クラウド事業推進部の石倉です。
今回はAWS Amplifyに興味を持ったことをきっかけに静的Webサイトを構築してみました。
Amplifyを使った方法に加え他の構成パターンでも構築してみたのでご紹介します。
Webサイトの内容はVite+Reactアプリケーションです。
ローカル環境準備
はじめにローカル環境にVite+Reactアプリケーション環境を用意します。と言ってもこちらのコマンドだけでできます。
npm create vite@latest
プロジェクト名やどの環境にするか質問されるので答えます。 今回はReact, TypeScript環境でやっていきます。 質問に答えた後に表示される以下のコマンドを実行します。
cd {プロジェクト名}
npm install
npm run dev
npm run dev実行後に表示されるローカルホストのアドレスにアクセスし以下のように表示されればOKです。
これでローカル環境の準備は完了です。 早速WebサイトをAWS上に構築していきます。
パターン１）S3 + CloudFront
おそらくAmplify登場前のAWS上でWebサイトを構築する最も一般的な方法ではないでしょうか。
S3だけだとパブリックアクセスを有効にする必要があるためCloudFrontを挟む構成です。
まずはS3を作成します。デフォルト設定から特に変えずに作成します。
次にCloudFrontを作成します。 作成したS3をオリジンとしOACの設定を入れて作成します。これによりCloudFront経由でのみS3のコンテンツにアクセスできます。
この後のWAFの設定については今回は入れずに作成します。
CloudFrontの作成が終わり、S3のバケットポリシーを見るとOACを有効にして作成したことによりCloudFrontからのアクセスを許可する設定が自動で入っています。
WebサイトのコンテンツをS3にアップロードします。 ローカルで以下のコマンドでビルドを行いビルド出力場所のdistフォルダ配下の内容をS3にアップロードします。
npm run build
最後にCloudFrontに設定を一つ足します。 デフォルトルートオブジェクトにindex.htmlを設定します。これでCloudFrontのドメインにアクセスした際にindex.htmlを見に行くようになります。
これで構築完了です。
CloudFrontのドメインにアクセスすれば先ほどローカル環境で確認したページが表示されます。
またS3のコンテンツに直接アクセスしようとするとはじかれることが確認できます。
Webサイトを更新したい場合はローカル環境で変更後に再度ビルドした内容をS3にアップロードします。
S3にアップロード後再びCloudFrontのドメインにアクセスすると表示が更新されています。
パターン２）Amplify(+S3)
現在S3で静的Webサイトを構築しようとするとAmplifyを使うことをお勧めされます。
Amplifyを使うことで先ほど自身で構築したS3+CloudFrontの環境をAmplifyが自動でやってくれます。
ただしAmplify側が管理するリソースになるためこちらでコンソール上などで確認することはできません。
また自身で作成するS3とAmplifyが管理するS3は別になります。
パターン１と同様にS3を作成しWebサイトのコンテンツをS3にアップロードしておきます。
上記S3コンソールで表示されている「Amplifyアプリを作成」を選択して構築していきます。
Amplifyの画面に遷移するので作成したS3を設定して保存してデプロイします。
するとこれだけで環境が構築できます。
作成されたAmplifyのドメインにアクセスするとVite+Reactのページが表示されます。
引き続き直接S3にはアクセスできないようになっています。
S3のバケットポリシーを見るとAmplifyの設定が自動でされています。
curlコマンドで確認してみると内部ではCloudFrontが利用されていることがわかります。
-> curl -I {Amplifyのドメイン}
HTTP/2 200
content-type: text/html
content-length: 464
date: Sun, 20 Jul 2025 04:13:51 GMT
server: AmazonS3
accept-ranges: bytes
etag: "7ba2b18ec1baaab2e9aa1e3a42425232"
last-modified: Sun, 20 Jul 2025 03:58:01 GMT
cache-control: public, max-age=0, s-maxage=31536000
x-cache: Hit from cloudfront
via: 1.1 0cf2f9f29d4ea64bbc1cf639883c7e5a.cloudfront.net (CloudFront)
x-amz-cf-pop: NRT12-P7
alt-svc: h3=":443"; ma=86400
x-amz-cf-id: zWQ0GpMB9JJwv75x0TsfIMRBCfrhpaOqNrvXUuSOgKWhla29xbuDGg==
age: 639
自身でCloudFrontの作成やOACの設定をせずにお手軽に静的Webサイトが構築できました。
このパターンでWebサイトを更新する際ですが自身でWebサイトのコンテンツをアップロードするS3とAmplifyが管理するS3は別になるため、ビルドし直した内容を自身のS3にアップロードするだけでは更新が反映されません。 Amplifyの方で再度デプロイをする必要があります。
S3にアップロード後Amplifyの方で再度デプロイします。
Amplifyの再デプロイ後アクセスするとWebサイトが更新されています。
パターン３）Amplify(+GitHub, CI/CD)
パターン２ではWebサイトを更新する場合、ローカルで変更後ビルドし直しS3へアップロードして、Amplifyで手動で再デプロイするという作業が必要でした。
これをGitHubリポジトリでWebサイトのコンテンツを管理し、GitHubリポジトリが更新されたらそれを検知しAmplifyの方で自動でビルド・デプロイが始まるという形にします。
まずはGitHubリポジトリを用意し今回のVite+Reactアプリケーションの内容をアップロードしておきます。
GitHubリポジトリの用意ができたらAmplifyで新しいアプリを作成していきます。
認証まわりが聞かれるので作成したリポジトリに許可、その後ブランチの設定をします。
するとリポジトリの内容を読み取って必要なビルド設定をしてくれます。
今までローカルで行なっていたnpm run buildとdistフォルダに出力する設定がされています。
ここで今回のVite+Reactアプリケーション用の設定を一つ足します。
詳細設定から「ライブパッケージの更新」でNode.jsのバージョンを22にしておきます。
最初にローカル環境で行ったnpm create vite@latestですが、記事執筆時点のViteのバージョンは7になっており7ではnodeのバージョンが20以上が必要になっています。
Amplifyのビルドイメージで使用されているAmazon Linux2023のデフォルトのnodeのバージョンは18なのでこのままだとデプロイ時にエラーになるため変更します。
vite/packages/vite/CHANGELOG.md at main · vitejs/vite · GitHub
これで保存してデプロイをすれば構築完了です。 AmplifyのドメインにアクセスするとVite+Reactのページが表示されます。
最後にWebサイトを更新します。
ローカル環境で変更を行いGitHubリポジトリにpushします。
pushされると変更を検知し自動でAmplifyのデプロイが始まります。
再度アクセスすると変更内容が反映されています。
最後に
Amplifyを利用することで、管理するリソースも少なくサクッとCI/CDも備えた静的Webサイトを構築できるのが凄いですね。
Amplifyは加えてデータベースや認証機能などバックエンドの構築もできます。
その辺りはドキュメントにチュートリアルもあるので気になった方は是非やってみてください。
Quickstart - AWS Amplify Gen 2 Documentation
参考
