사전 준비

Vue.js, Nuxt.js 애플리케이션의 배포를 가정합니다.

· firebase 프로젝트
· Google 계정
· 노드, npm 환경
· Vue.js 또는 Nuxt.js 애플리케이션

Firebase-CLI 설치

Firebase로 작업하기 위해 Firebase-CLI를 설치합니다.

터미널

$ npm install -g firebase-tools

버전이 표시되면 설치 완료입니다.

터미널

$ firebase --version
8.16.2

Google 계정 및 연결

터미널

$ firebase login

터미널

Allow Firebase to collect CLI usage and error reporting information? (Y/n)

Y를 입력하고 Enter
브라우저가 시작됨

자신의 Google 계정을 선택하세요.


권한 선택



이 화면이 표시되면 완료됩니다.

Firebase 프로젝트 초기화

Hosting을 설정합니다.

응용 프로그램 아래에서 다음 명령을 실행합니다.

터미널

アプリ名$ firebase init

호스팅을 선택하고 Enter


Use an existing project를 선택하고 자신의 Firebase 프로젝트를 선택합니다.



터미널

=== Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? dist
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? Set up automatic builds and deploys with GitHub? (y/N) No

다음 순서로 입력
・dist
・y　(SPA의 경우)
・N

이런 표시가 되면 OK입니다.


애플리케이션에 다음 파일이 작성되었습니다.

· .firebaserc
· firebase.json

애플리케이션 빌드

응용 프로그램 아래에서 다음 명령을 실행합니다.

터미널

アプリ名$ npm run build    

그러면 dest 디렉토리 아래에 컴파일된 파일이 작성됩니다.

배포

터미널

アプリ名$ firebase deploy  

Deploy complete! 라고 표시되면 OK입니다.
Hosting URL로 이동하면 앱이 게시됩니다.

터미널

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/********
Hosting URL: https://***************.web.app

배포 중지

터미널

アプリ名$ firebase hosting:disable 

터미널

? Are you sure you want to disable Firebase Hosting for the site deploy-test-6110f
This will immediately make your site inaccessible! (Y/n) Y

Y로 앱이 닫힙니다.