【Circle CI】Nuxt.jsのdotenvを設定して環境変数をSTGとPRDで出し分けする

2890 ワード
CircleCI Vue.js nuxt.js .env CircleCI2.1 CircleCI テキストリンク

Nuxt.jsで自動デプロイする時にSTGとPRDを出し分ける

現在開発のプロジェクトではNuxt.jsを利用していて、Circle CIを使ってGKEに対して自動デプロイをしています。

参考：https://qiita.com/arthur_foreign/items/6ac67596a98c0a60d6be

ただ、環境変数をSTGとPRDに分けるには不十分な手順だったため、備忘のため新しく記事を書くことにしました。

Circle CIで環境変数をSTGとPRD向けに設定する

Environment Variablesで、STGとPRD向けに作った環境変数を.envファイルに書き込むための布石を打っておきます。

別に分けられれば名前はどうでもいいんですが、以下の命名規則にしました。

  • STG環境で利用する環境変数 => STG_環境変数名
  • PRD環境で利用する環境変数 => PRD_環境変数名

Nuxt.jsの.envに環境変数を書き込むコマンド

Nuxt.jsのCSR時のAPIの向き先とSENDGRIDのAPI KEYを、STGとPRDで出し分けした際に以下のコマンドを書き込みました。

ECHO = echo

inject_envfile_stg:
    $(ECHO) API_URL_BROWSER=${STG_API_URL_BROWSER} > .env
    $(ECHO) SENDGRID_API_KEY=${STG_SENDGRID_API_KEY} >> .env
inject_envfile_prd:
    $(ECHO) API_URL_BROWSER=${PRD_API_URL_BROWSER} > .env
    $(ECHO) SENDGRID_API_KEY=${PRD_SENDGRID_API_KEY} >> .env

※Makefileを使っています。

参考：https://qiita.com/arthur_foreign/items/6ac67596a98c0a60d6be

以下の記事を参考にしました。

参考：https://blog-hello-world.web.app/posts/2019-12-07-nuxt-dotenv-module-circleci/