이번 포스팅에서는 전시간에 이어 구글 Firebase에 PWA로 만든 Vue 프로젝트를 배포하여 HTTPS 프로토콜에서 웹사이트가 잘 동작하는지 확인해보도록 하겠습니다.(Firebase를 시작하기 위해서는 구글 계정이 필요합니다.)
파이어베이스란?
Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼입니다. 이번 포스딩은 크게 구글 Firebase에 프로젝트를 만드는 부분과 이젠 포스팅에서 만든 Vue프로젝트를 Firebase와 연결하고 배포하는 부분으로 나누어 진행하도록 하겠습니다.
1. 구글 파이어베이스 시작하기
아래의 링크로 접속하여 구글 파이어베이스를 시작합니다.
Firebase
Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼입니다.
firebase.google.com
2. 프로젝트 만들기 버튼을 클릭하여 단계를 계속 진행합니다.
3. 프로젝트 이름을 지정하고 약관동의 후 계속버튼을 클릭하여 다음단계로 진행합니다.
4. 기본으로 Google 애널리틱스 사용을 설정하고 계속버튼을 클릭합니다.
5. 애널리틱스 위치를 선택하고 약관동의 후 프로젝트 만들기 버튼을 클릭하여 단계를 마무리합니다.
6. 새프로젝트가 준비되었습니다. 계속버튼을 눌러 해당 프로젝트로 이동합니다.
7. 파이어베이스에 프로젝트가 추가된것을 확인하실 수 있습니다.
여기까지 파이어베이스에 프로젝트 추가까지의 과정이 진행되었습니다. 이제부터 Vue 프로젝트에 파이어베이스에서 추가한 프로젝트를 연결해 보도록 하겠습니다.
1. Firebase Tools 설치
아래의 npm install 명령어로 파이어베이스 툴을 설치합니다.
| 명령어 : npm install -g firebase-tools |
2. Firebase 버전확인
설치가 완료되면 아래의 명령어로 파이어베이스 설치버전을 확인하실 수 있습니다.
| 명령어 : firebase --version |
3. Firebase 계정연결
firebase login명령어를 통해 파이어베이스에서 해당 Vue에 접근할 수 있도록 계정을 연결해줍니다.
링크를 클릭하시면 구글계정에 액세스 할 수 있습니다.
| 명령어 : firebase login |
4. Firebase + 구글계정 연결
허용 버튼을 클릭하여 firebase와 구글계정을 연결합니다.
5. Firebase 연결확인
연결이 확인되면 아래와 같이 화면이 뜨고 Vue 프로젝트의 Command 창에서는 연결한 구글계정으로 로그인에 성공했다는 메시지가 뜨게 됩니다.
6. Firebase와 Vue 프로젝트 연결
firebase init 명령어를 통해 파이어베이스에서 만들어놓은 프로젝트와 Vue 프로젝트 연결해주는 기본설정을 해줍니다. 저는 이미 만들어진 PWA Vue프로젝트를 호스팅만 할 것이므로 3번과 같이 파이어베이스 호스팅을 선택하였습니다.
| 명령어 : firebase init |
7. Project Setup
저는 이미 개발된 Vue프로젝트가 있으므로 Use an existing project를 선택하였습니다.
8. 프로젝트 성격에 맞춰 설정 진행
Firebase에서 만들어놓은 프로젝트를 선택하시고 Vue프로젝트의 public directiory는 dist이므로 해당 디렉토리를 적어줍니다. 나머지 GitHub 부분은 개인들의 설정에 맞게 작업합니다.
9. Firebase설치 확인
파이어베이스의 기본설정을 마치면 아래와 같이 프로젝트에 파이어베이스 관련파일들이 생깁니다.
10. Project 빌드
프로젝트를 빌드하여 파이어베이스에 배포해보록 하겠습니다. 아래의 명령어를 통해 해당 프로젝트를 빌드합니다.
| 명령어 : npm run build |
11. Project 빌드 확인
빌드가 완료되면 프로젝트에 dist 디렉토리가 생기고 해당 디렉토리를 배포하게됩니다.
12. Firebase deploy
파이어베이스에 빌드된 프로젝트를 배포합니다. 아래의 firebase deploy명령어를 통하여 빌드된 프로젝트를 배포합니다.
| 명령어 : firebase deploy |
13. Firebase Project 배포 확인
배포가 완료되면 파이어베이스 홈페이지로 와서 배포를 확인합니다. 아래 배포됨 영역을 클릭하시면 상세내역을 확인하실 수 있습니다.
14. Hosting에서 웹페이지 확인
호스팅 부분의 해당 도메인 링크들을 클릭하여 배포된 웹페이지를 확인하실 수 있습니다.
15. PWA 동작 확인
이전 포스팅에서 작업해놓은 PWA이 잘 작동되는것을 확인 할 수 있습니다. 모바일로 접속시 동일하게 해당프로젝트에 대한 설치를 진행하실 수 있습니다.
16. 매니페스트 파일과 Service Workers 확인
개발자 도구로 가서 매니페스트 파일과 Service Wokers 부분도 잘 적용되었는지 확인합니다.
여기까지 Firebase에 PWA로 만든 Vue 프로젝트 배포하기 포스팅을 마치도록 하겠습니다.
'개발 Recording > vue.js & javascript' 카테고리의 다른 글
| Node.js + Express 웹서버에서 CORS 이슈해결 (0) | 2021.11.30 |
|---|---|
| [웹서버] Node.js + Express 웹서버 구축 (0) | 2021.11.28 |
| [Vue.js] Vue 프로젝트 PWA 사이트 만들기 (0) | 2021.11.24 |
| [PWA] 모바일에서 네이티브 앱 경험을 제공하는 Progressive Web Apps (0) | 2021.11.22 |
| [Vue.js] ngrok를 이용한 localhost 외부접속-2 (0) | 2021.11.19 |