Nuxt.jsのservice workerで環境変数を切り替えられるようにする

Nuxt.jsで開発しているアプリでService Worker によるセッション管理を実施した。

その際に、Service Worker内で[[firebase.initializeApp(config);]]を行う必要があったが、firebase情報をハードコードしたくなかったので、ビルド時にnodeコマンドでファイル生成を行い設定情報を切り替えられるように対応した。

対応方法

• rootDirに適当なディレクトリ（custom_scriptsとした）を追加し、[[swEnvBuild.js]]を作成

// custom_scripts/swEnvBuild.js

const fs = require('fs')

fs.writeFileSync('./src/static/swenv.js',
  `
const swEnv = {
  apiKey: '${process.env.APIKEY}',
  authDomain: '${process.env.AUTHDOMAIN}',
  databaseURL: '${process.env.DATABASEURL}',
  projectId: '${process.env.PROJECTID}',
  storageBucket: '${process.env.STORAGEBUCKET}',
  messagingSenderId: '${process.env.MESSAGINGSENDERID}',
  appId: '${process.env.APPID}'
}
`)

このjsファイルでprocess.envに設定された環境変数をswEnv定数に書き出している。

• buildコマンド実行前にswEnvBuild.jsを実行するようにpackage.jsonを修正

{
  "scripts": {
    "build": "nuxt build",
    "prebuild": "node custom_scripts/swEnvBuild.js"
  }
}

• swenv.jsがコミット対象に含まれないように.gitignoreに追記

# .gitignore
src/static/swenv.js

• Service WorkerではimportScriptsを使って設定情報を読み込むようにする

// static/firebase-sw.js

importScripts('https://www.gstatic.com/firebasejs/6.2.4/firebase-app.js')
importScripts('https://www.gstatic.com/firebasejs/6.2.4/firebase-auth.js')
importScripts('/swenv.js')

firebase.initializeApp(swEnv)

これでService Worker内でも環境ごとに設定を切り替えられるようになった。

参考

• webpack - How can I customize my Service Worker based on environment variables? - Stack Overflow
• [[Nuxt] Firebase Authentication を使ってみての覚書② ServiceWorkerによるセッション管理 – WebTecNote](https://tenderfeel.xsrv.jp/javascript/3665/)