🔥

Firebase ✖️Github Actions on AWS EC2で簡単デプロイ

2021/03/13に公開

AWS

Firebase と Github Actionsを用いたCI/CDを、AWS EC2 インスタンス上で行うときにハマった箇所などを踏まえつつやり方を書いていきます。

この記事で見かけて興味を持ったのがきっかけです。

Assuming

※AWS EC2 インスタンス作成と、ブラウザでのFirebase プロジェクト作成は終えていることを前提としています。

プロジェクト構成

project_dir/
    | - .git/         # プロジェクトルートにGit置いてます
    | - react_app/    # Reactのアプリも置いてます
    | - .gitignore    
    | - firebase.json # ↓Firebase用の設定ファイル群です。
    | - .firebasesrc
    | - .firebase/
         ...          # "firebase init" の時にどの機能を設定するかによって設定ファイルの量は異なる

Get Started🔥

1. Set up your Firebase Hosting

まず、EC2インスタンスないでFirebaseのデプロイ設定をします。
ここはドキュメントの通り進めていきます。

hosting設定が終わっていない人
色々と質問されますが、大体デフォルトでいけます。
public directoryはどうしますか？的なことを聞かれますが、これは、デプロイ時に参照されるディレクトリを聞かれています。なので、私はreact_app/buildを指定しました。

$ firebase init hosting

hosting設定が終わっている人
GitHub用の設定だけを行いたいので、次のコマンドを叩きます。

$ firebase init hosting:github

上記のどちらの人も最後あたりで、次のように聞かれます。
3行目の "Set up automatic builds and deploys with GitHub?"ってやつですね。
これをYesで通過するといよいよ本題に入ります。

2. Connect GitHub Account

上記の質問にYesで答えた後に、まずはGitHubアカウントとの連携をしなければなりません。(すでにgit initしていたのですがそれする前ににfirebase initしたらエラーとか出るのかな？)

これです。

(黒塗りにする必要ないかもしれませんが一応笑)

ここで表示されたURLにアクセスすると Success! になるわけですがすんなりとはいきませんでした。なんか Localhost:9005 にアクセスして、「ERR_なんたらかんたら」が出てくるんです。

調べてみると、Dockerコンテナ内で同じようなエラーが起きているらしい。
ローカルでは行けるけど仮想環境だとアウト、と考えてピンときました。

AWS EC2 インスタンス内でのlocalhostか！と。

ということで、

アクセスすべきURLのホストを書き換えます。

EC2インスタンスのオープンアドレスをコピーして、localhost を置き換えます。

するとアクセスできて、コンソール上では次のようになってるはずです。

すると次に対象とするリポジトリを聞かれます。

個人開発なら普通に "user/repository" でいけるんですけど、これが組織のリポジトリになってくると話が変わってきます。
なんか404エラーを返されてしまう。
このエラーに関してはバグらしくて、Issueも立っていたのでそちらを参照したところ解決方法を見つけた人がいました。神。こちらです
下までスクロールすると「いいね」がたくさんついているコメントがあります。それです。

あとは質問にデフォルトで答えつつ、自分のプロジェクト構成に合うように回答を修正します。
たとえば、次の質問では、

"npm ci && npm run build" がデフォルトの答えになっていますが、Firebaseプロジェクトの設定をプロジェクトルートで行っているので、一度react_app/配下に入るようにしています。

3. Test it

ここまできたら、GitHub Actions 用のyamlファイルが作成されています。
登録したリポジトリにプッシュします。

ローカルでブランチをきり適当に変更したファイルをリモートリポジトリにプッシュすると、プルリクエストが作成され、それと同時に先ほど作成したyamlファイルも走ります。

プルリクエストをみてみると、テストが走り終わっていた。

無事にサンプルサイトが立ち上がっているようです。
デフォルトの閲覧期限もいじれるっぽいのでそこもいじってみてはどうでしょうか。