arsro.net

[Nuxt.js] FirebaseのDev,Prodデプロイ切り分けについて

Nuxt.jsとFirebaseのHostingやFirestoreを使いつつ、サービスを作ったりしていました。

そこで、FirebaseへのデプロイをDevelopとProductionに環境を切り分けたんですが、忘れそうだったので残しておくことにします。

1. パッケージのインストール

↓をインストールします。（他にあれば順次追記します。）

2. Firebaseのプロジェクトを環境の数だけ作成

configを控えておきましょう。（後で確認できるので、控えなくてもいいです🥺）

  var firebaseConfig = {
   apiKey: "api-key",
   authDomain: "project-id.firebaseapp.com",
   databaseURL: "https://project-id.firebaseio.com",
   projectId: "project-id",
   storageBucket: "project-id.appspot.com",
   messagingSenderId: "sender-id",
   appID: "app-id",
   measurementId: 'measurement-id'
 };

3. 環境変数とnuxt.config.jsの設定

env.local.jsやenv.production.jsなどを作成し、各設定ファイルごとに2.で控えたconfigを設定します。

// env.production.jsmodule.exports = {
 firebaseConfig: {
   config: {
     apiKey: "api-key",
     authDomain: "project-id.firebaseapp.com",
     databaseURL: "https://project-id.firebaseio.com",
     projectId: "project-id",
     storageBucket: "project-id.appspot.com",
　　  messagingSenderId: "sender-id",
     appID: "app-id",
　　  measurementId: 'measurement-id'
   },
   services: {
     analytics: true,
     firestore: true
   }
 }
}

僕はanalyticsとfirestoreを有効化しています。（詳しい使い方は「@nuxtjs/firebase」のドキュメントを確認してください。）

設定したfirebaseConfigを環境ごとに読み込めるようにします。

// nuxt.config.js// 環境ごとに読み取る設定ファイルを変更する。const environment = process.env.NODE_ENV || 'local'
const envSet = require(`./env.${environment}.js`)

export default {
 mode: 'spa',
 .
 .
 .
 /*
  ** Nuxt.js modules
  */
 modules: [
   // ここで読み込む
   ['@nuxtjs/firebase', envSet.firebaseConfig]
 ],
 .
 .
 .
}

4. デプロイ先ごとのエイリアス設定

firebaseのデプロイ先を設定できるように切り分けたい環境の数分、プロジェクトを追加してきます。

$ firebase use --add

? Which project do you want to add? {追加したいFirebase プロジェクトを選択}

? What alias do you want to use for this project? (e.g. staging) {hogehoge_devなど、環境ごとにエイリアスを設定}

終わったら、「.firebaserc」というファイルに今回追加したファイルが追加されていることを確認してみてください。

// .firebaserc

{
 "projects": {
   // 設定した環境ごとのエイリアス: firebaseのプロジェクト名"project-alias-dev": "project-dev",
   "project-alias-prd": "project-prd"
 }
}

参考

5. デプロイ用スクリプトの設定

最後にfirebase hostingにデプロイしようとする場合、

  1. まずはDevelopにデプロイしてDev確認

  2. 問題なさそうならProductionにデプロイ

のようなステップを取ると思うのですが、毎回デプロイ先を切り替えて、$ yarn build && firebase deploy するのは面倒…😵

なので、簡単に切り替えてお目当ての環境にデプロイできるようにスクリプトを作っておきます。

{
 .
 .
 .
 "scripts": {
   .
   .
   .
   "dply_dev": "NODE_ENV=development nuxt build && firebase use project-alias-dev && firebase deploy",
   "dply_prd": "NODE_ENV=production nuxt build && firebase use project-alias--prd && firebase deploy"
 },
 .
 .
 .
}

こんな感じですかね。

最近のポスト