ReactをAWS S3にGitHub Actionsでデプロイ
ReactをAWS S3にGitHub Actionsでデプロイ
今回はReactをS3へアップロードしてHTTPアクセスできるようにします。
備忘録として作業内容を残します。
独自ドメインを設定してHTTPS通信までは今回説明しません。
CloudFront経由も今回していません。
※Route53とCertificateManagerを絡めるとHTTPSでのアクセスができます。
バケットの作成
1.S3画面にアクセスし、バケットを作成をクリック。
2.バケット名を入力。
3.オブジェクト所有者でACLを有効にする。
4.このバケットのブロックパブリックアクセス設定のチェックを外す。
他の設定はデフォルトで問題ないです。
バケットの作成をクリック。
5.作成されたバケットをクリック。
6.プロパティの一番下にある静的ウェブサイトホスティングの編集をクリック。
7.内容を画像のように入力する。
8.アクセス許可のバケットポリシーを下記のように編集する。
arn:aws:s3:::YourBucketName/* の部分は自分のバケット名に変更してください。
編集画面の左上に表示されているのでコピペで問題ありません。
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicRead",
"Effect": "Allow",
"Principal": "*",
"Action": [
"s3:GetObject",
"s3:GetObjectVersion"
],
"Resource": "arn:aws:s3:::YourBucketName/*"
}
]
}
IAM ユーザーを作成
1.IAM画面にアクセスする。
2.ユーザー画面に移動し、「ユーザーを追加」をクリック。
3.ユーザー名を入力し、「次へ」をクリック。
4.ポリシーを直接アタッチするを選択し、AmazonS3FullAccess と IAMUserChangePassword を検索してチェックを入れる。
5.「ユーザーの作成」をクリック。
6.作成されたユーザーをクリック。
7.セキュリティ認証情報のアクセスキーでアクセスキーを作成する。
8.CLIを選択し、「次へ」をクリック。
9.自分がわかる名前を入力し、アクセスキーを作成する
10.作成されたアクセスキーは必ず大切に保管してください。
.csvファイルもダウンロードを忘れずに行ってください。
※アクセスキーはこのように絶対に公開しないように！！。（現在表示されているものは削除されています）
ちなみに、ここで自動生成されたシークレットアクセスキーに「/」が入っている人はなくなるまで作り直しておいてください。
GitHubのsecretsに登録してワークフローの設定をするのですが、「/」が特殊文字判定されてデプロイでこけまくりました。特殊文字認定され、アクセス失敗となってしまいます。(2時間ぐらい溶かした...)
気になる人は下記ページの人と同じエラーが表示されるのでそのままやってみても良いかもww
下記ページでは「+」もだめだったと書いている人がいましたが、私は「+」は問題ありませんでした。「/」がアウト。
ワークフローの設定
1.Reactのsrcディレクトリやpublicディレクトリと同じ階層に
.github→workflowsを作成する。
workflowsディレクトリの中に.ymlファイルを作成する。(今回はdeploy.yml)
2.deploy.ymlファイルの中に下記内容を入れる。
下から2行は自分のバケット名と作成したバケットのリージョンに修正してください。
今回は、リージョンを大阪のap-northeast-3、バケット名をYourBucketName としています。
name: Auto Deploy
on:
push:
branches:
- main
jobs:
build_and_deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout repository
uses: actions/checkout@v2
- name: Set up Node.js
uses: actions/setup-node@v2
with:
node-version: '14'
- name: Install dependencies
run: npm install
- name: Build
run: npm run build
- name: Deploy to S3
run: |
aws configure set aws_access_key_id ${{ secrets.AWS_ACCESS_KEY_ID }}
aws configure set aws_secret_access_key ${{ secrets.AWS_SECRET_ACCESS_KEY }}
aws configure set default.region ap-northeast-3
aws s3 sync build/ s3://YourBucketName/
.envファイルに外部に漏らしたくない環境変数を自分で設定されている方は下記のように追記しておいてください。今回はREACT_APP_BACKEND_URLを設定しています。
name: Auto Deploy
on:
push:
branches:
- main
jobs:
build_and_deploy:
runs-on: ubuntu-latest
env:
REACT_APP_BACKEND_URL: ${{ secrets.REACT_APP_BACKEND_URL }}
~~~
省略
~~~
3.GitHubにpushしておく。
4.下記の記事を参考にAWS CLIをインストールしておく。
Homebrewを使用しているので下記記事を参考にしました。
GitHub Secrets の設定
1.GitHubの開発したリポジトリに移動。
2.「Settings」の「Secrets and Variables」の「Actions」を選択
3.ワークフローでGitHub Secretsを読み取るように設定している環境変数を登録する。
今回登録するのは下記2種類(追加で書き込んだ人はその分も！)
- AWS_ACCESS_KEY_ID
- AWS_SECRET_ACCESS_KEY
4.登録が終わったらこのようになっているはずです。
（今回はREACT_APP_BACKEND_URLの変数も登録しているので3種類あります）
これでmainにpushされたらS3に自動デプロイされるようになっています。
mainにpushしたときにリポジトリのActionsで挙動がみることができます。
記事用に適当なコミット名をつけているのでお気になさらず...ww
デプロイ時に各々こけることがあると思うので、このあたりを見てエラーを解消していってください。
build時やdeploy時に私はいくつかこけました。
S3で確認
作成したバケットの中身を見てみると、buildされたものがデプロイされています。
(私はワークフローの設定を間違えてnode_modulesまでデプロイされ時間が溶けました)
記事に書いているワークフローを書いていれば間違い無いと思います。
もし、こうした方が良いって人がいれば遠慮なくぶん殴ってください。
WEBサイトで確認(HTTPだけど...)
バケットのプロパティの静的ウェブサイトホスティングのエンドポイントでみることが確認できます。
無事見ることができました！！!
まとめ
今回は最初にも言った通り、S3にデプロイしただけです。
次回はCloudFront経由でサイトを表示し、独自ドメインを設定してHTTPS通信までできるようにします。
CloudFront + S3 + ACM + Route53を使用し静的ホスティングでWebを公開・SSL化 の記事もできたら書きます！
Discussion