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内でも環境ごとに設定を切り替えられるようになった。

参考


Related #js

Next.jsのPreview Mode時はAnalyticsを無効化する

cookieの__next_preview_dataキーで判定

next.jsにtailwindcssを導入する

VSCodeのTailwind CSS IntelliSense拡張が便利

Alexaに気温と二酸化炭素濃度を教えてもらう

「Alexa、気温」でセンサー情報を教えてくれるようになった

ESLintでimport文を自動で並べ替える

eslint-plugin-simple-import-sortを使う