今回はReact Native for Web(Expo)で作成したプロジェクトをfirebaseでデプロイしたいと思います。

firebaseのデプロイ設定

firebase init

Expoで作成したプロジェクトのルートで下記コマンドでfirebaseの設定をします

$ firebase init

Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploysを選択します

$ ? Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter to confirm your choices. (Press <
space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)

すでにfirebaseプロジェクトを作っている場合、Use an existing projectを選択

$ ? Please select an option: (Use arrow keys)

下記の入力時に、ディレクトリをweb-buildに設定しましょう

$ ? What do you want to use as your public directory?

こちらはSPAなのでyと入力しEnter

$ ? Configure as a single-page app (rewrite all urls to /index.html)? (y/N) 

github actionsの自動デプロイ設定をするか？今回は別で設定するのでn

$ ? Set up automatic builds and deploys with GitHub? (y/N)

index.htmlをオーバーライドするか？（しないのでn）

$ ? File web-build/index.html already exists. Overwrite? (y/N) 

これでfirebaseの初期設定が完了しました

ビルド

下記コマンドでWeb向けにビルドすることができます

$ expo build:web

デプロイ

$ firebase deploy

これでfirebaseにデプロイすることができるようになりました。

GitHubの特定ブランチにpushしたときにデプロイするようにする

GitHub Actionsを使用してCI/CDができるように設定してみます

firebaseのトークンを入手する

下記コマンドでfirebaseにログイン後、ターミナルにトークンが表示されるのでメモします

$ firebase login:ci

リポジトリの環境変数にfirebaseのトークンを登録する

リポジトリ > Secrets > Actions > New Repository secretから環境変数を登録することができます。

今回はFIREBASE_CI_TOKENという名前で登録しました。

workflowのyamlを作成する

プロジェクトのルートで下記コマンドでworkflowsのファイル作成

$ mkdir .github && mkdir .github/workflows && touch .github/workflows/deploy.yml

yamlファイルの中身を記載します

name: deploy-main

on:
  push:
    branches:
      - main

jobs:
  deploy:
    name: deploy
    runs-on: ubuntu-latest
    steps:
      - name: checkout repository
        uses: actions/checkout@v2
      - name: setup node
        uses: actions/setup-node@v2
        with:
          node-version: 16.x
          registry-url: "https://registry.npmjs.org"
      - name: install global packages
        run: yarn global add firebase-tools expo-cli
      - name: install packages
        run: yarn
      - name: build
        run: expo build:web
      - name: deploy to firebase
        run: firebase deploy --token=$FIREBASE_CI_TOKEN
        env:
          FIREBASE_CI_TOKEN: ${{ secrets.FIREBASE_CI_TOKEN }}

上記内容をリポジトリのデフォルトブランチに反映後、mainブランチにマージすることで自動でfirebaseにデプロイされるようになりました。