poriweb

備忘録とか

Nuxt.jsでビルド後にenvを差し替えたい時

Nuxt.jsを使ってspa modeでWebアプリケーションを構築しています。
local/productionなど環境による変数(例えばAPIのURLなど)は通常build時に自動で切り替わるように設定を行うと思いますが、デプロイ手順の都合で後からENVを差し替えたい場合がありました。(デプロイ手順の都合: ステージングのdockerイメージをそのまま本番に載せるため)
そんな時はheadのsrcで静的ファイルのenv.jsを読み込むようにして、グローバルな定数を定義し、axiosのbaseUrl等はそこから参照するようにします。

手順例

  1. staticディレクトリにenv.jsを用意
  2. const BASE_URL = 'http://localhost:8000'
    
  3. nuxt.config.jsonのheadにscript: [{ src: '/env.js' }]を記述
  4. head: {
        title: 'hoge',
        ...
        script: [
          { src: '/env.js' }
        ]
      },
    
  5. pluginsのaxios.jsでbaseURLを定義$axios.defaults.baseURL = env.jsの定数
  6. export default function ({ app, redirect }) {
      app.$axios.defaults.baseURL = BASE_URL
    }
    

build後、dist/env.jsを差し替えても問題なく動作します。

あくまで静的ファイルとして配置されるだけなので、サーバー側で差し替えた時にクライアント側のブラウザは画面更新を行わない限りは当然前の状態のままになります。
以上、小ネタでした。