개요

firebase에서, spa를 netlify나 vercel과 같이 풀릭 마다 URL을 바꾸어 deploy하고 싶다.

how to

firebase 초기화

공식
firebase tool을 글로벌하게 install
이번에는 deploy하는 directory는 dist를 하고 있습니다. (firebase의 default는 public)

npm i -g firebase-tools
firebase login
firebase hosting #deloyするdirectoryをdist にする

channel deploy 명령을 package.json에 추가

preview와 같은 deploy는 channel deploy 라는 명령을 사용합니다.
따라서 다음과 같이 스크립트에 추가합니다.

{
  "name": "firebase deploy app",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt-ts",
    "build": "nuxt-ts build",
    "start": "nuxt-ts start",
    "generate": "nuxt-ts generate",
    "lint:js": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "lint:style": "stylelint **/*.{vue,css} --ignore-path .gitignore",
    "lint": "yarn lint:js && yarn lint:style",
    "test": "jest",
    "channel-deploy": "firebase hosting:channel:deploy" ←# 追加
  },

github workflow 설정

다음과 같이 설정합니다.

firebase-deploy.yml

name: CI

on: [push]

jobs:
  FrontDeploy:
    name: FrontDeploy
    runs-on: ubuntu-latest
    steps:
    - name: Checkout Repo
      uses: actions/checkout@main
    - name: setup Node
      uses: actions/setup-node@v1
      with:
        node-version: '12'
        registry-url: 'https://registry.npmjs.org'
    - name: Install Dependencies
      run: yarn
    - name: Build
      run: yarn build
    - name: deploy to Firebase Hosting
      shell: bash
      run:  yarn channel-deploy $(echo ${GITHUB_REF#refs/heads/}) --token=${{ secrets.FIREBASE_TOKEN }}

여기에서는 branch 이름을 얻고 있습니다.

$(echo ${GITHUB_REF#refs/heads/})

token 가져오기

다음 명령으로 token을 얻을 수 있습니다.

firebase login:ci

취득한 token을 FIREBASE_TOKEN에 넣습니다.



이상으로 deploy 할 수 있어야합니다!

twitter도 팔로우 잘 부탁드립니다. !