CloudFront x S3で静的サイトをデプロイする方法を紹介する記事まとめ
S3 + CloudFront で静的サイトをデプロイする手順まとめ（AWS Amplifyにも触れる）
はじめに
練習で作成した静的サイトを本番環境にデプロイしたくなる時、
手軽に済ませるなら「GitHub Pages」や「Vercel」がありますが、
**AWSを使ってみたい！**というモチベーションで今回は S3 + CloudFront を選びました。
さらに、原理を理解したうえで AWS Amplify も活用する予定です。
この記事では、最低限の手順を備忘録的にまとめています。
最短で本番環境にデプロイしたい方におすすめです。
1. AWSアカウントを作成して初期設定
まずは AWS アカウントを作成して、無料枠を確保しましょう。
私はこのために新しいメールアドレスを作成しました（笑）
作成後は初期設定を忘れずに行いましょう。万が一の備えとして、
請求通知、ルートアカウントの MFA、有効な請求アラーム の設定は必須です。
2. S3 × CloudFront に関する記事を探す
次に、本家や有識者が公開してくれている良記事を読みましょう。
まずは 正しく動かすことを最優先 に、構成を理解していきます。
参考記事：
上記に一通り目を通し、
「自分がどういう構成を組みたいのか」が見えてきたら、
ChatGPTに投げて方針を明確に言語化していくのもおすすめです。
記事に従えば基本的には問題なく進められるはずですが、
もし、言っていることが分からない、全くもって意味不明の場合はまだ挑戦する前に勉強すべきことがあるかもしれません。
理解することには時間がかかるのでしっかり分からないことを理解してから進めましょう。結果的にそれが1番近道になります。
まとめ
結構簡単にデプロイはできますね。個人開発を進めようと思っているのでここでデプロイ方法を理解できたので非常に良かったです。
どうやらこれらのS3・CloudFrontを準備する手間を省いてフルマネージドに準備してくれるのがAWS Amplifyみたいですね。
ReactのみのAPPではこの方法でデプロイするのがAWSや周辺知識を理解する上でも結構おすすめです。理解できたならAmplifyでもよいかもね
それでは良い1日を！
Discussion