Vue + Firebase + Cloud Functions의 Staging / Production 환경 구축

개요

vue + firebase + cloud functions(API Server) 로 이루어진 어플리케이션의 staging/production 환경 만들기

 

1. Firebase는 복수의 호스팅이 가능하다.

 

 

2. vue-cli를 이용해 staging용 production용 빌드 스크립트 정의

"scripts": {
    "build-stg": "vue-cli-service build --mode staging",
    "build-prd": "vue-cli-service build --mode production",
    // firebase deploy --only hosting:타겟이름(.firebasesrc에 정의한)
    "stg-deploy": "npm run build-stg && firebase deploy --only hosting:staging",
    "prd-deploy": "npm run build-prd && firebase deploy --only hosting:production",
 },

 

3. Cloud Functions(API Server)의 엔드포인트를 staging용 productuon용으로 나눈다.

# .env.staging
VUE_APP_APIROOT=https://cloudfunctions.net/test-webapi
VUE_APP_ROOT=https://stg-mywebsite.web.app
VUE_APP_MODE=staging

# .env.production
VUE_APP_APIROOT=https://cloudfunctions.net/webapi
VUE_APP_ROOT=https://mywebsite.web.app
VUE_APP_MODE=production

 

4. vue.config.js의 staging용 production용으로 빌드파일을 분할

const getOutputDir = () => {
  if (process.env.VUE_APP_MODE === 'production') {
    return 'dist-production'
  } else if (process.env.VUE_APP_MODE === 'staging') {
    return 'dist-staging'
  }
}

module.exports = {
  outputDir: getOutputDir(),
  
  ,,,
}

 

5. .firebasesrc 파일의 호스팅 타겟 지정

{
  "projects": {
    "default": "mywebsite"
  },
  "targets": {
    "mywebsite": {
      "hosting": {
        "staging": [
          "stg-mywebsite"
        ],
        "production": [
          "mywebsite"
        ]
      }
    }
  }
}

 

6. firebase.json 수정

{
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "hosting": [
    {
      "target": "staging",
      "public": "dist-staging",
      "rewrites": [
		...
      ]
    },
    {
      "target": "production",
      "public": "dist-production",
      "rewrites": [
		...
      ]
    }
  ],
}