package.jsonで環境変数を選択してからビルド＆デプロイをする方法

⛅

使用ツール

vite
firebase
bash

デプロイ先を切り替え忘れて、そのままデプロイしてしまった経験はありませんか？

私は、めちゃくちゃあります🤧

もともと、テスト環境と本番環境のbuildコマンドを分けていたのですが、デプロイ先の変更忘れが度々あり、その都度変更するのもめんどうだな～と思っていました…

そのため、もっと簡単に環境変数を切り替えて、デプロイする方法を模索。。
いい感じにできたので共有してみました！

🏹

手順

.shファイルを作成する
.shファイルに実行したいコマンドを書く
package.jsonから、.shファイルを実行する
完了！

(例) .env.development

# FIREBASE STORE
VITE_FIREBASE_API_KEY=Xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
VITE_FIREBASE_AUTH_DOMAIN=hoge.firebaseapp.com
VITE_FIREBASE_PROJECT_ID=hogeId
VITE_FIREBASE_STORAGE_BUCKET=hoge.huga.com
VITE_FIREBASE_MESSAGING_SENDER_ID=Xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
VITE_FIREBASE_APP_ID=hoge

.shファイルを作成
```
# bash

touch build.sh
```

.shファイルに実行したいコマンド記述

# build.sh

echo -n 'Which one build with? (dev or prod): '
read input

if [ "$input" = 'dev' ]; then

	# 環境変数を取得する(development)
	source .env.development

	echo
	echo "You use 👉 ✨[ ${VITE_FIREBASE_PROJECT_ID} ]"
	echo

	# deploy先の切り替え
	firebase use $VITE_FIREBASE_PROJECT_ID

	# build & deploy
	vite build --mode development&&firebase deploy --only hosting

else

	source .env.production
	echo
	echo "You use 👉 🍧[ ${VITE_FIREBASE_PROJECT_ID} ]"
	echo

	firebase use $VITE_FIREBASE_PROJECT_ID
	vite build --mode production&&firebase deploy --only hosting

fi

package.jsonから、.shファイルを実行

// package.json (before)

"scripts": {
    "build": "vite build --mode development&&firebase deploy --only hosting",
    "build:prod": "vite build --mode production&&firebase deploy --only hosting",
  },


// ⇒ package.json (after)

"scripts": {
    "build": "bash build.sh",
  },

完了！(試しに実行)

$ npm run build

Which one build with? (dev or prod):_

"dev"と入力

$ npm run build

Which one build with? (dev or prod): dev # ←"dev"と入力

You use 👉 ✨[ hogeId ]

Now using project hogeId
vite v4.5.0 building for development...
✓ 541 modules transformed.
dist/index.html                                             0.51 kB │ gzip:   0.35 kB
(略..)

✓ built in 3.89s

=== Deploying to 'hogeId'...

(略..)

+  Deploy complete!

(略..)