この記事で伝えたいこと（ポイント）
- AWS Amplify ホスティングについて説明しているよ
- AWS Amplify ホスティングについてハンズオンしているよ
はじめに
この記事では「この前リリースされた機能って実際に動かすとどんな感じなんだろう」とか「もしかしたら内容次第では使えるかも」などAWSサービスの中でも特定の機能にフォーカスして検証していく記事です。
主な内容としては実践したときのメモを中心に書きます。（忘れやすいことなど）
誤りなどがあれば書き直していく予定です。
今回はAWS Amplifyが機能として提供しているAWS Amplify ホスティング（以下、本文ではAmplify）を検証します。
AWS Amplify ホスティングで Amazon S3 静的ウェブサイトホスティングを簡素化および強化
AWS Amplifyってなんだっけ
簡単に説明するとフルスタックになんでもできちゃうフロンエンド、ウェブ、モバイルなどのアプリケーション開発で強い味方になってくれるサービスです。
フルスタック TypeScript。AWS のためのフロントエンド DX
AWS Amplify ホスティングとは
ではAWS AmplifyのAWS Amplify ホスティングとはなんでしょうか。公式ドキュメントでは下記のように説明されています。
Amplify Hosting は、継続的なデプロイでフルスタックのサーバーレスウェブアプリケーションをホストするための Git ベースのワークフローを提供します。Amplify は、 AWS グローバルコンテンツ配信ネットワーク () にアプリケーションをデプロイしますCDN。このユーザーガイドでは、Amplify ホスティングを使い始めるために必要な情報を提供します。
引用：AWS Amplify ホスティングへようこそ - AWS Amplify ホスティング
つまりはウェブサイトをサーバレスでホスティングしつつ、自動でアプリケーションをCDNにデプロイします。デプロイはGitを使った継続的なデプロイとなっているため、細かくバージョンを管理しながらWebサイトをデプロイできます。
今回はこのつよつよサービスがS3ホスティングと連携したということになります。
ハンズオン
S3の操作
S3バケットを作成するため、CloudShellをAWSマネジメントコンソールのターミナルアイコンから起動します。
VPCとCloudShellが連携するようになったため、以下のような選択肢が出ると思いますが
迷わずに Open ap-northeast-1 environmentを選択してください。
これはAWS CloudShellがVPCアクセスに対応したことによるものです。
AWS CloudShell now supports Amazon Virtual Private Cloud (VPC)
CloudShellが起動したら以下のコマンドをコピーしてCloudShellに貼り付け、実行します。
export AWS_ACCOUNT_ID=$(aws sts get-caller-identity --query 'Account' --output text)
aws s3 mb s3://my-unique-bucket-$AWS_ACCOUNT_ID --region ap-northeast-1
バケットが作成できたかどうかを確認するために以下のコマンドを実行します。
aws s3 ls my-unique-bucket-$AWS_ACCOUNT_ID
エラーが何も出なければ、作成ができています。No such bucketやその他のエラーが出る場合はバケット名を変更して作成するかバケットの作成権限があるかどうかなど調査するようにしてください。
以下のHTMLをindex.htmlとして保存してS3バケットにアップロードします。
<html>
<head>
<title>My Website Home Page</title>
</head>
<body>
<h1>Welcome to my website</h1>
<p>Now hosted on AWS Amplify</p>
</body>
</html>
S3のマネジメントコンソールからアップロードできますが、ここではあえてviとAWS CLIを使ったアップロードで対応します。
vi index.html
ソースコードを貼り付けるためにiキーを押してHTMLのソースを貼り付けます。
貼り付けが完了したらエスケープキーを押してwqと入力し、Enterで確定してください。
aws s3 cp index.html s3://my-unique-bucket-$AWS_ACCOUNT_ID/index.html
index.htmlがコピーできたかを確認します。
aws s3 ls my-unique-bucket-$AWS_ACCOUNT_ID
実行結果
2024-11-12 09:42:36 174 index.html
問題なくコピーできていることが確認できました。
これでAWS Amplify ホスティングを操作するための事前準備は終わりました。CloudShellはバツボタンで閉じましょう。
マネジメントコンソールからS3バケットを開く
AWSマネジメントコンソールからS3を開きます。
S3のコンソール画面を開いたら東京リージョンであることを確認したうえでBucketsをクリックします。
バケットの検索でmy-unique-bucket-と入力します。すると東京リージョンで作成したバケットがあると思います。バケット名をクリックします。
S3のプロパティを開く
バケットの操作画面が表示されます。先ほどCloudShellでコピーしたindex.htmlがあることを確認したうえでPropertiesをクリックします。
一番下にあるStatic website hostingからCreate Amplify appをクリックします。
なお、このときS3 static website hostingが無効になっていますが、有効にする必要はありません。
AWS Amplify ホスティングの操作
画面がS3からAmplifyの画面に遷移します。以下の項目を埋めます。
App name: website
Branch name: dev
Method: Amazon S3
S3 Location: CloudShellで作成したバケット名
最後にSave and deployでデプロイを実行します。
実行結果の表示
実行結果
実際に使ってみて思うこと
ハンズオンは以上です。今回はAmplifyで強化されたS3の静的ウェブサイトホスティングを試しました。
そこで思った人が多いと思いますが、WebサイトホスティングというとS3が提供する機能にも静的ウェブサイトホスティングがあります。
S3静的ウェブサイトホスティングがAmplifyで強化されたなのでAmplifyを使っていないS3ホスティングとは全くの別のものだということがわかります。
実際のところ、AmplifyによるホスティングをしてもS3バケットの設定がホスティングに切り替わることはありませんでした。(設定はdisableのまま)
まとめ
今回はAWS Amplifyホスティングを確認しました。S3の静的ウェブサイトホスティングと何が違うのかはまだ謎が残りますが、かなりの手軽さからこれからのWebサイトホスティングはAmplify寄せていくのかなぁと思いました。
ですが、従来？のS3ホスティングでは細かい設定まで対応できたのでis equalで対応できるかどうかまではわかりません。今度は多くの人が知っているS3ホスティングをやってみて比較してみようと思います。