【Vue.js】Viteで Vue.js + TypeScript のプロジェクトを作成、FirebaseへDeploy、GitHub Actionsで自動的にDeploy

プロジェクトの作成からDeployまでの備忘録。
※以下はIntelliJ IDEAのターミナルで実行している。

プロジェクトの作成

1.ターミナルで以下を実行する。

npm init vite@latest

2.プロジェクト名を入力する。
3.vue を選択する。

4.TypeScriptを利用したいため vue-ts を選択する。

5.表示された通り入力し、サーバを立ち上げる。

6.アクセスする。

7.IntelliJ IDEAの Open... からプロジェクトを読み込む。

FirebaseへのDeploy

Firebaseでプロジェクトを作成

続行して行くと作成できる。

端末へfirebase-tools のインストール

npm install -g firebase-tools

Firebaseとの連携

firebase login

Firebaseへの接続設定を追加

firebase init

Spaceキーで選択し、エンターを押す。 Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys

Use an existing project を選択。

先ほど作成したプロジェクトを選択。

What do you want to use as your public directory? は dist を入力。

pushしたときに自動的にDeployしたいため、以下はYesとする。
Set up automatic builds and deploys with GitHub?

リポジトリの情報 user/repository を入力する。

以下もYesとする。
Set up the workflow to run a build script before every deploy?

以下も例の通り入力する。

npm ci && npm run build

ここでnpm ciを忘れると依存関係を解決できずにBuildに失敗する。

これで firebase-hosting-pull-request.yml が作成される。

プルリクエストがマージされたときもDeployするようにしておく。

これで firebase-hosting-merge.yml が作成される。

これで初期化は完了。

後は以下を実行してFirebaseへDeployする。

npm run build

firebase deploy

Hosting URL: へ表示されたURLへアクセスするとDeployされていることが確認できる。

GitHub Actionsで自動的にDeploy

上記で作成されたFirebase関連のファイルをcommit、pushすると、GitHub上でworkflowが実行される。

ここでポイントなのが、前述のFirebaseとの連携で Actions secrets がGitHubへ登録されているため、スムーズに連携連携することができている。

Firebaseの画面を見るとGitHub ActionによりDeployされている。