[Firebase] Firebase hosting으로 next.js 배포 자동화하기

pIutos 2023. 1. 17. 01:09

시작하며

firebase는 웹 앱을 빠르게 배포 해주는 hosting기능을 제공합니다. 이번 글은 next.js 프로젝트를 firebase hosting을 이용하여 사이트에 배포하는 법에 대해 작성하였습니다. 또 github와 연결하여 pr을 날리고 병합할 때 자동으로 배포하는 방법에 대해서도 알아보겠습니다.

로컬 환경에서 firebase deploy 적용하기

Firebase CLI 설정하기

firebase cli 설치하기

npm i firebase-tools -D

우선 firebase cli를 npm install을 통해 설치해줍니다. 로컬환경에 firebase cli를 설치하게 되면 sudo 권한 문제와
피할 수 있습니다.

node_modules/.bin/firebase login

그리고 위 명령어를 통해 firebase에 로그인을 합니다.

firebase init hosting 명령어를 통해 초기화하기

node_modules/.bin/firebase init hosting

명령어를 입력하면 아래와 같이 프로젝트 셋업을 하는 질문들이 나타납니다.

저는 dongne-market이라는 이름의 파이어베이스 프로젝트가 존재하므로 찾아서 선택해주고, Hosting Setup에서 public directory를 out으로 설정해줍니다. next build && next export를 하게되면 out디렉토리에 정적 파일이 생성되기 때문입니다. 이후 질문에는 모두 No로 설정해줍니다.

Firebase deploy 명령어로 배포하기

node_modules/.bin/firebase deploy

명령어를 실행하면 아래와 같이 firebase는 out폴더에있는 정적 파일을 hosting URL에 배포해줍니다.

하지만 코드에 변경사항이 있다면 배포 전에 꼭 npm build등의 명령어를 통해 정적 파일을 생성해야한다는 번거로움이 있습니다. 그래서 다음으로 github Action을 통해 자동으로 빌드하여 배포하는 방법을 알아보겠습니다.

Github Action과 연동하여 배포하기

현재 프로젝트가 깃허브에 연동되어있다고 가정하고 환경을 구축하겠습니다. 우선 아래 명령어를 입력합니다.

node_modules/.bin/firebase init hosting:github

최초 세팅시 github와 연결하기위해 브라우저 창이 뜨며 github에 로그인이 필요합니다.

로그인이 완료되었다면 다시 터미널 창으로 돌아와 호스팅하기위한 질문에 답변이 필요합니다.

우선 원하는 github repository를 사용자 이름/저장소 이름 형식으로 입력합니다.

workflow에서 build script를 사용할지 묻는 질문에는 Yes로 설정합니다. 이는 package.json에서 설정한 npm build(next build && next export)명령어를 사용하기 위함입니다.

다음으로 매 배포시마다 어떤 script가 실행될 지 묻는 질문에는 npm ci && npm run build 를 입력해줍니다.

이후 질문에는 아래와같이 Yes, main을 입력해 줍니다.

설정이 완료되었다면 두개의 yml파일이 생성됩니다. yml 파일의 내용에 따라 main브랜치로 pr이 생성될 때 미리보기 사이트(7일간 확인 가능)에 배포되며, pr이 merge된다면 라이브 사이트(projectId.web.app)에 자동 배포가 진행됩니다.

TroubleShooting: 프로젝트에서 .env파일을 사용한다면

만약 프로젝트에서 .env파일을 사용한다면 gitignore에 등록되어있으므로 깃허브에 따로 변수를 등록해주는 과정이 필요합니다.

프로젝트 설정(settings)탭으로 들어가서 Security > Secrets and Variables > Action 탭으로 이동 후 아래 사진과같이 New repository secret 버튼을 클릭하여 env파일에 들어갈 변수를 하나씩 저장합니다.

그리고 이전에 생성된 yml파일에서 actions/checkout@v2 와 run npm ci && npm build 스텝 사이에 아래 코드와 같이 env파일을 생성하는 스텝을 추가합니다.

- name: Generate Environment Variables File for Production
    run: |
      echo "DONGNE_MARKET_FIREBASE_APIKEY=$DONGNE_MARKET_FIREBASE_APIKEY" >> .env
      echo "DONGNE_MARKET_AUTH_DOMAIN=$DONGNE_MARKET_AUTH_DOMAIN" >> .env
      echo "DONGNE_MARKET_PROJECT_ID=$DONGNE_MARKET_PROJECT_ID" >> .env
      echo "DONGNE_MARKET_STORAGE_BUCKET=$DONGNE_MARKET_STORAGE_BUCKET" >> .env
      echo "DONGNE_MARKET_MESSAGING_SENDER_ID=$DONGNE_MARKET_MESSAGING_SENDER_ID" >> .env
      echo "DONGNE_MARKET_APP_ID=$DONGNE_MARKET_APP_ID" >> .env
      echo "DONGNE_MARKET_MEASUREMENT_ID=$DONGNE_MARKET_MEASUREMENT_ID" >> .env
    env:
      DONGNE_MARKET_FIREBASE_APIKEY: ${{ secrets.DONGNE_MARKET_FIREBASE_APIKEY }}
      DONGNE_MARKET_AUTH_DOMAIN: ${{ secrets.DONGNE_MARKET_AUTH_DOMAIN }}
      DONGNE_MARKET_PROJECT_ID: ${{ secrets.DONGNE_MARKET_PROJECT_ID }}
      DONGNE_MARKET_STORAGE_BUCKET: ${{ secrets.DONGNE_MARKET_STORAGE_BUCKET }}
      DONGNE_MARKET_MESSAGING_SENDER_ID: ${{ secrets.DONGNE_MARKET_MESSAGING_SENDER_ID }}
      DONGNE_MARKET_APP_ID: ${{ secrets.DONGNE_MARKET_APP_ID }}
      DONGNE_MARKET_MEASUREMENT_ID: ${{ secrets.DONGNE_MARKET_MEASUREMENT_ID }}