はじめに

練習で作成した静的サイトを本番環境にデプロイしたくなる時ありますよね。手軽に実施するなら「 GitHub Pages」「Vercel」などがありますが、AWSに触れたいこともあり今回はS3 + CloudFrontでデプロイする方法を調査しました。原理が分かった上で上記方法＋AWS Amplifyを利用していく予定です。
そこで備忘録的にもこの方法の進め方をまとめておきます。最低限デプロイするのであればこの記事から追っていくのが効率的です。

1. AWSアカウントを作成して初期設定

何はともあれ、AWSのアカウントを作成して無料枠を確保しましょう。
このために新しいメールアドレスを作成しました笑
作成した後は下記URLを参考にもしもの時のために最低限の初期設定をしましょう

2.S3 x CloudFrontの記事を探す

本家・先人が記事を書いてくれているのでまず探しましょう。

上記に目を通し、自身の実施したい内容が分かったら言語化してChatGPTに投げて方針を言語化しましょう。
上記の記事に従えば問題なく解消すると思います。
もし、言っていることが分からない、全くもって意味不明の場合はまだ挑戦する前に勉強すべきことがあるかもしれません。
理解することには時間がかかるのでしっかり分からないことを理解してから進めましょう。結果的にそれが1番近道になります。

まとめ

結構簡単にデプロイはできますね。個人開発を進めようと思っているのでここでデプロイ方法を理解できたので非常に良かったです。
どうやらこれらのS3・CloudFrontを準備する手間を省いてフルマネージドに準備してくれるのがAWS Amplifyみたいですね。
ReactのみのAPPではこの方法でデプロイするのがAWSや周辺知識を理解する上でも結構おすすめです。理解できたならAmplifyでもよいかもね

それでは良い1日を！