Nuxt에서 Firebase로 Hosting하기(build와 generate 차이)

개요

• build 와 generate라는 배포옵션이 있는 이 두가지의 차이점이란?
• nuxt로 작성한 웹앱을 Firebase의 호스팅기능을 이용해 배포하는 과정 적어보기

build와 generate의 차이

build

nuxt.config.json의 target: 'server' 가 설정되어 있을때 npm run build 을 실행함으로써 .nuxt/dist에 다양한 파일들이 생성된다.

그 파일들은 Webpack으로 트리쉐이킹되고 압축된 JS와 CSS파일들로 구성되어 있는데 Heroku 나 Digital Ocean 같은 Node.js 서버에 deploy할때 쓰는 용도이다.

 

generate

nuxt.config.json에서 target: 'static' 이 설정되어 있을 때 npm run generate 를 실행함으로써 dist 이하에 파일이 생성된다.
응용 프로그램을 빌드할 뿐만 아니라 모든 경로에 HTML 파일을 생성하여 정적인 호스팅 사이트를 만들 수 있다.
'Netlify'나 'Vercel', 'Firebase Hosting' 등의 호스팅 서비스에 deploy 할 때 쓰는 용도

generate의 빌드 결과물은 default로 dist 디렉토리로 되어 있지만 nuxt.config내에서 변경가능

예를 들어, Firebase Hosting 디플로이하는 디렉토리를 dist로 변경하는 경우에는  nuxt.js의 generate 설정을 아래와 같이 변경해 디플로이 폴더를 맞출 수 있다.

 

디플로이 관련 공식문서

소개 - Nuxt.js

 

Nuxt로 작성한 웹앱을 Firebase로 호스팅 하기

1. 우선 이하의 Firebase 프로젝트 작성이 끝났다는걸 가정

https://heewon26.tistory.com/279

Firebase 사용해보기 (feat. Vue)

 

2. yarn generate

빌드 결과물 확인

에러 발생 (generate해서 에러없으면 그냥 다음 단계)

* Firebase SSR모드로 배포하려면 사전에 다른 준비가 필요한 것 같다. (우선 Firebase를 SSR은 안되게 설정)

해결방법? 

【Nuxt.js】Nuxt.js SSRモードでfirebaseにデプロイする手順 2020年版

 

3. firebase deploy

 

끝.