🛠️
Nuxt3でデプロイ環境毎に、baseURLを変更する
Production, Development, Stagingなどのデプロイ環境毎に、ルートURL（baseURL）を変更する方法。例えば、各サーバの事情で、公開されるURLが異なる場合などに便利。
.env.*が反映されない
baseURLを指定するnuxt.config.ts内では、.env.*ファイルからの環境変数が読み込まれず、.envのみ読み込まれ、baseURLなどのプロパティを環境毎に設定できない。そのため、以下の方法で設定を分岐させる。
デプロイ環境例
| 環境名 | 公開URL |
|---|---|
| development | http://dev.foo.com/dev/ |
| staging | http://dev.foo.com/stg/ |
| production | http://www.bar.com/ |
環境変数でデプロイ環境を指定する
process.env.NODE_ENVを参照して、デプロイ環境を取得する方法もあるが、Nuxt3では、NODE_ENVは、productionとdevelopmentの2種類しか取れないため、stagingなどのデプロイ環境を指定できない。そのため、独自の環境変数で指定する。
cross-envをインストール
yarn add -D cross-env
スクリプトを追加
package.json
"scripts": {
"generate:development": "cross-env APP_MODE=\"development\" nuxt generate",
"generate:staging": "cross-env APP_MODE=\"staging\" nuxt generate",
"generate:production": "cross-env APP_MODE=\"production\" nuxt generate",
}
ここでは、APP_MODEという環境変数で指定している。
参考
nuxt.config.ts
nuxt.config.tsに、環境変数API_MODEの値毎に、パスの文字列を返す関数を追加する。
nuxt.config.ts
const getBaseUrl = () => {
const environment = process.env.APP_MODE;
switch (environment) {
case "staging":
return "/stg/";
case "development":
return "/dev/";
case "production":
return "/";
default:
return "/";
}
};
同じく、app.baseURLプロパティを追加し、👆で追加した関数の戻り値を与えるようにする。
nuxt.config.ts
export default defineNuxtConfig({
app: {
baseURL: getBaseUrl(),
},
}
参考
Discussion