10日で作るWebサイト(day4)

HTML/CSS

day4の課題は「Firebase Hostingにデプロイ」です。
実はfirebase initした際にGitHubActionsで自動デプロイする設定にしているため、初日からほぼ完了してはいるのですが、知っておきたいこともあったので調査フェーズです。

github workflows

Firebase Hosting init的なコマンドを打つってGitHubActionsでの連携を設定すると以下のファイルが.github/workflowsフォルダに作成されます。

・firebase-hosting-merge.yml
・firebase-hosting-pull-request.yml

中身はほぼ同じなので片方だけ見てみます。

name: Deploy to Firebase Hosting on merge
'on':
  push:
    branches:
      - main
jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - run: npm ci && npm run build
        env:
          NEXT_PUBLIC_API_KEY: ${{ secrets.NEXT_PUBLIC_API_KEY }}
          NEXT_PUBLIC_AUTH_DOMAIN: ${{ secrets.NEXT_PUBLIC_AUTH_DOMAIN }}
          NEXT_PUBLIC_PROJECT_ID: ${{ secrets.NEXT_PUBLIC_PROJECT_ID }}
          NEXT_PUBLIC_STORAGE_BUCKET: ${{ secrets.NEXT_PUBLIC_STORAGE_BUCKET }}
          NEXT_PUBLIC_MESSAGING_SENDER_ID: ${{ secrets.NEXT_PUBLIC_MESSAGING_SENDER_ID }}
          NEXT_PUBLIC_APP_ID: ${{ secrets.NEXT_PUBLIC_APP_ID }}
          NEXT_PUBLIC_MEASUREMENT_ID: ${{ secrets.NEXT_PUBLIC_MEASUREMENT_ID }}
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_PROJECT_ID }}'
          channelId: live
          projectId: PROJECT_ID

環境変数用のenvだけは私が追記しましたが他はそのままです。
onのところでリッスンするイベントを記載して、そのイベントの発火時にjobsにある部分が順次実行されていきます。

usesはライブラリのイメージです。どこかの誰かが公開しているactionsを利用する場合に使います。
以下は書いてある通りcheckoutするためだけに利用しています。

uses: actions/checkout@v3

続いてビルドコマンドを叩きます。独自のコマンドの場合は書き換えてください。(yarnに変えるとか)

run: npm ci && npm run build

デプロイ部分も定型文のため何も変える必要はありません。
channelId: live
2つのファイルを比べると上の箇所は片方にしかありませんね。
これはproduction環境にデプロイする場合に指定するようです。指定しない場合はpreview機能というのがあって、preview用のサイトにデプロイされます。

uses: FirebaseExtended/action-hosting-deploy@v0

環境変数について

.env系のファイルは今回は一切コミットしてませんので、わざわざGithHubのSecretsに設定しましたが、これって正解はどうなんだろう。API_KEYとかは最終的にclient側に露出するものなので、秘匿する価値はほとんどない気がするものの、かといってソースに混ぜるのはちょっと違うんじゃないかなぁと思ったり。
かといって今みたいなGithHub Secretsとローカルの.envで多重管理する辛みもあるので、コミットしちゃった方が楽なのか。んーワカラン。誰か正解を教えて。

料金はどうなってるの?

で、ここで疑問に思います。GitHubでコード管理はタダなのは知ってるけど、Actionsってビルドしたりしてリソース掛かってるけど、これお金かかるの?無料だとして、どこまでセーフ?勝手に課金されない?など気になってきます。

ということで調べました。

GitHub Freeプランの場合、月2000分までは無料のようです。

では今回のプロジェクトではどれぐらいリソース使ったのかを見ていきます。
まずは該当リポジトリのActionsページを確認します。
右の方に2m23sと書いてますね。この1アクションの実行に2分23秒かかったようです。

お次は私のアカウントが全体で今どのくらい使っているのかを調べます。
場所はSettings/Billing and plansです。

そしてスクロールしていくとこちらに書いてあります。
合計13分使ってますね。

そして矢印部分を見てください。monthly spending limitが$0となっています。
これは利用上限を自身で設定できますが、デフォルトでは0ドルでリミットつまり料金が掛かる前に止まる、ということです。一安心です。

まとめると2000分まではタダで実行できるよ!ってことでした。
今のプロジェクトは1回あたり数分ですが、テストやlintなどを実行するともっと長時間になるでしょう。1日当たり60分と考えると十分すぎる気がしますが、メインブランチに直コミットするような運用していると2000分過ぎてしまう可能性も無きにしも非ず。気を付けて運用しましょう。

コメント