【Firebase】dotenv-webpackを使って環境ごとにビルド&デプロイする

July 30, 2023
Firebase / webpack

Firebaseでホスティングしているアプリケーションを、localやstgなどの環境ごとに環境変数を差し替えてビルド & デプロイしたい時の対応方法です。

使用したライブラリはdotenv-webpackです。

dotenv-webpack

https://www.npmjs.com/package/dotenv-webpack

インストール

npm i -g firebase-tools
npm i dotenv-webpack

環境ごとに.env.xxxを用意する

stg用の.envは.env.stg、local用は.env.localといった様に、環境ごとに.envを作成します。

package.jsonにscriptを定義する

環境ごとにbuild & deployするコマンドを定義します。

例えばnpm run deploy:stgを実行すると、NODE_ENV=stgを設定した上で、webpack.config.jsをベースにbuildを行い、stg環境にデプロイされます。

local, stg, prod全部を同時にデプロイしたい時はnpm run deploy:allを実行します。

firebaseにログインしていない場合はfirebase loginでログイン後に実行する必要があります。

  "scripts": {
    "clean": "rimraf ./public/*",
    "build": "npm run clean && webpack --config webpack.config.js",
    "local": "NODE_ENV=local npm run build && firebase serve",
    "deploy:local": "NODE_ENV=local npm run build && firebase use <your-app-id-for-local> && firebase deploy",
    "deploy:stg": "NODE_ENV=stg npm run build && firebase use <your-app-id-for-stg> && firebase deploy",
    "deploy:prod": "NODE_ENV=prod npm run build && firebase use <your-app-id-for-prod> && firebase deploy",
    "deploy:all": "npm run deploy:local && npm run deploy:stg && npm run deploy:prod"
  }

webpack.config.jsを修正する

下記のように、環境ごとに読み込む.envを切り替えてビルドするようにします。

const Dotenv = require('dotenv-webpack');
// NODE_ENVを取得する
const enviroment = process.env.NODE_ENV;

module.exports = {
.
.
.
  plugins: [
    new Dotenv({
      // 例: .env.stg
      path: `./.env.${enviroment}`,
    }),
  ],

以上です


Profile picture

React, Vue, TypeScript, Node.js, PHP, Laravel, AWS, Firebase, Docker, GitHub Actions, etc...