Developer.2018-08-01Vue.jsとFirebaseで本番環境、ステージング環境をなるべく節約して構築するyagish履歴書は、システム1人、デザイン1人、イラスト1人、計3人の小さなチームで作っていて、開発は非常に身軽なので、本番公開時もローカルの開発環境+Firebase本番環境だけだった。rirekisho.yagish.jpでもさすがに大きな変更を本番でやるのは怖いので、手間と費用をなるべく抑えつつ、Firebaseを使ったステージング環境を構築することにした。cli.vuejs.org環境変数これは3ファイルで分ける.env.production.env.development.env.stagingステージング環境について公式ドキュメントに書いてあるので、参考にする。'staging'を判定に使うことができないため、VUE_APP_MODEという変数を追加して使うことにした。.env.stagingVUE_APP_MODE=stagingビルド時に書き出しディレクトリを変えて、Dockerコンテナは一つで済ませる開発環境はDockerコンテナで行っているが、これを本番、ステージングなどで分けてしまうと面倒くささが圧倒的に増すのでやりたくない。開発サーバーの実行、ステージング用ビルド、本番用ビルドもすべて一つのコンテナで行う。buildコマンドを明示的にbuild-staging、build-productionでそれぞれ--modeをつけて分ける。etc...これだけだとビルドしたファイルが同じdistディレクトリに入ってしまい、間違えてステージングのファイルを本番にデプロイなんてことも起きそうなので分ける。書き出し先ディレクトリはvue.config.jsのoutputDirで行う。上記で書いた環境変数を使ってディレクトリを変える関数を作って切り替えた。本番はdist-productionに書き出されるようになった。Hostingでデプロイ先プロジェクトを分ける設定。事前に本番用、ステージング用でプロジェクトを作っておく。--addでステージング、本番用の設定を追加しておくfirebae.jsonに書くpublicはdeploy時、-pオプションで上書きできるのでこれで分ける。dist-productionこれを実行中の開発用Dockerコンテナでexecするためシェルスクリプト化した。dist-stagingdate本番用はビルドでこけたらデプロイしないように止める必要がありそう。API用のGKEとロードバランサーは本番と同じのを使うGCPのHTTPSロードバランサーは最低2000円/月ぐらいしてしまうので、分けるのは避けたい。ドメインを分けるとSSL証明書とかの手間も増えるのでドメインも同じにしたい。今回はHTTPSロードバランサーの設定でアクセスしてきたパスでバックエンドを分けた。ステージングバックエンドというように振り分けるようにして、APIではどちらのパスも同じ処理へルーティングして同じコンテナでどちらでも動くようにした。Vue側は環境変数で切り分ける。使ったことないけどIngressを使えばもっと簡単にできそうなので調査中。StorageとかDjangoとか使ってるサービスごとにやるので何気にめんどう。consoleのエラーを見ながら設定しておく。19:31Vue.jsとFirebaseで本番環境、ステージング環境をなるべく節約して構築するTweet広告を非表示にする関連記事2019-03-02退職エントリ(とんかつカレーBBSについて)2019年2月で2年11ヶ月いたビズオーシャンを退職しました。週間)WEBアプリ開発者。月別アーカイブはてなブログをはじめよう!uyamazakさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。