편하게하는 것은 좋은 일입니다.

그래서 개인적으로 좋아하고 사용하는 Nuxt.js를 Firebase에 배포하고, 그 후 Github에 푸시 할 때마다 자동으로 배포되도록 설정하기까지이 기사에서는 해설해 둡니다.

Firebase를 사용해 보았습니다.

이쪽의 기사를 참고로 했습니다.

Nuxt.js를 단기간에 Firebase에 배포하여 CircleCI에서 자동 배포를 할 때까지 설정하기 매뉴얼 ② 자동 배포 설정

↑다음 회분 투고했습니다!

환경

OSX Catalina
npm version6.14.6
node.js v12.18.4

건설

Firebase

먼저 Firebase에 로그인합니다.
Google 계정이 필요하므로 가지고 있지 않은 분은 받으세요.



이 페이지를 방문한 후 사용해보기를 클릭하고 아래의 개인 프로젝트를 관리하는 페이지로 이동하십시오.



그런 다음 프로젝트 추가를 클릭하고 모든 프로젝트 이름을 설정하고 프로젝트를 만듭니다.





이제 프로젝트를 만들 수 있었습니다!

먼저 터미널을 열고 다음 명령을 사용하여 Firebase CLI를 설치합니다.

$ npm install -g firebase-tools

그리고 드디어 로그인을 해 봅시다.

$ firebase login

다음은 Nuxt 프로젝트를 만들고 Firebase와 연결하여 배포해 봅시다.

Nuxt.js

mkdir firebase
cd firebase
vue init nuxt-community/starter-template sample

여기 firebase 디렉토리에 Nuxt 템플릿이 생성되었습니다.
그런 다음 firebase와 연결해야하므로 다음 명령을 터미널에서 실행하십시오.
또한 여기에서 Hosting을 선택하십시오.

$ firebase init

MacBook-Pro sample % firebase init            

     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

  firebase/sample/

? Which Firebase CLI features do you want to set up for this folder? Press Space
 to select features, then Enter to confirm your choices. Hosting: Configure and 
deploy Firebase Hosting sites

=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add, 
but for now we'll just set up a default project.

? Please select an option: Use an existing project
? Select a default Firebase project for this directory: (先ほど入力したプロジェクト名)
i  Using project (先ほど入力したプロジェクト名)

=== 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? public
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
✔  Wrote public/index.html

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

✔  Firebase initialization complete!

이것으로 firebase 프로젝트와의 연결이 완료되었습니다!

다음으로 Nuxt 프로젝트를 빌드합시다.

$ npm nuxt generate

이제 dist 내에 빌드한 파일이 출력되었습니다.

그런 다음 샘플 프로젝트에 출력된 firebase.json을 다음과 같이 다시 작성합니다.

firebase.json

{
  "hosting": {
    "public": "sample/dist"
  }
}

그런 다음 하나의 계층 구조의 firebase 디렉토리로 이동하여

$ cd ..

$ firebase deploy

이 명령으로 Firebase에 배포합니다! !

잘하면 다음과 같이 주소가 표시되므로 브라우저에서 액세스하십시오.

Project Console: https://console.firebase.google.com/project/[あなたのプロジェクト名]/overview
Hosting URL: https://[あなたのプロジェクト名].web.app

이것으로 이번 기사의 범위, 배포까지는 완료입니다!
다음 번에는 Github에 저장소를 만들고 CircleCi와 함께 작동하는 방법에 대해 씁니다!

수고하셨습니다!