目次
Reactアプリをセットアップ
npmとnpxがPCにインストールされていることを確認してください。
npm install -g npx
ターミナルを開いてフォルダ選択してプロジェクト名を決めてから以下のコマンドを実行してください。私はmy-appというプロジェクト名を付けます。
npx create-react-app my-app
以下のコマンドを実行してアプリフォルダーに入ってアプリケーションを実行してください。
cd awesome-app
npm start
Firebaseプロジェクトのセットアップ
Firebase にログインし、「go to console」をクリックしてください。今は「Add Project」をクリックして、Firebase 上に新しいプロジェクトを作成してください。
Firebase CIトークン作る
プロジェクトフォルダに入ってFirebase-toolsをインストールする必要があります。
npm install -g firebase-tools
トークンを取得するには、以下のコマンドを実行してください。
firebase login:ci
トークンはターミナルに出力されます。このトークンは今GitHub Secretsに保存しておいてください。私はFIREBASE_TOKENという名前で保存します。
Firebase用にアプリケーションを構成する
Reactアプリのフォルダに入って以下のコマンドを実行してください。
firebase init
いくつかのオプションが表示されます。 [Hosting] オプションのみを選択してください。そのあとUse an existing projectを選択して自分が作ったプロジェクトを選択してください。Reactアプリケーションをデプロイしますのでパブリックディレクトリのために「build」と入力します。
ワークフロー ファイルの作成
.github/workflowsというフォルダー内に.ymlまたは.yamlファイルを作成してください。私はdeploy.ymlという名前をつけます。
.github/workflows/deploy.yml
Deploy.ymlファイルは以下のようになります。
これでコミットしてプッシュすると、自動デプロイが行われます。
