【AWS】S3静的ウェブサイトホスティングがAWS Amplifyで強化されたんだぜぇ〜ワイルドだろぉ〜


## この記事で伝えたいこと（ポイント）

- AWS Amplify ホスティングについて説明しているよ
- AWS Amplify ホスティングについてハンズオンしているよ

## はじめに

この記事では「この前リリースされた機能って実際に動かすとどんな感じなんだろう」とか「もしかしたら内容次第では使えるかも」などAWSサービスの中でも特定の機能にフォーカスして検証していく記事です。

主な内容としては実践したときのメモを中心に書きます。（忘れやすいことなど）
誤りなどがあれば書き直していく予定です。

今回はAWS Amplifyが機能として提供しているAWS Amplify ホスティング（以下、本文ではAmplify）を検証します。

[AWS Amplify ホスティングで Amazon S3 静的ウェブサイトホスティングを簡素化および強化](https://aws.amazon.com/jp/blogs/news/simplify-and-enhance-amazon-s3-static-website-hosting-with-aws-amplify/)

## AWS Amplifyってなんだっけ

簡単に説明するとフルスタックになんでもできちゃうフロンエンド、ウェブ、モバイルなどのアプリケーション開発で強い味方になってくれるサービスです。

[フルスタック TypeScript。AWS のためのフロントエンド DX](https://aws.amazon.com/jp/amplify/)

## AWS Amplify ホスティングとは

ではAWS AmplifyのAWS Amplify ホスティングとはなんでしょうか。公式ドキュメントでは下記のように説明されています。

> Amplify Hosting は、継続的なデプロイでフルスタックのサーバーレスウェブアプリケーションをホストするための Git ベースのワークフローを提供します。Amplify は、 AWS グローバルコンテンツ配信ネットワーク () にアプリケーションをデプロイしますCDN。このユーザーガイドでは、Amplify ホスティングを使い始めるために必要な情報を提供します。

[引用：AWS Amplify ホスティングへようこそ - AWS Amplify ホスティング](https://docs.aws.amazon.com/ja_jp/amplify/latest/userguide/welcome.html)

つまりはウェブサイトをサーバレスでホスティングしつつ、自動でアプリケーションをCDNにデプロイします。デプロイはGitを使った継続的なデプロイとなっているため、細かくバージョンを管理しながらWebサイトをデプロイできます。

今回はこのつよつよサービスがS3ホスティングと連携したということになります。

## ハンズオン

### S3の操作

S3バケットを作成するため、CloudShellをAWSマネジメントコンソールのターミナルアイコンから起動します。

![スクリーンショット 2024-11-12 18.21.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527543/b875c541-01da-1e0e-6ea7-797cf410636a.png)

:::note info
VPCとCloudShellが連携するようになったため、以下のような選択肢が出ると思いますが
迷わずに `Open ap-northeast-1 environment`を選択してください。

![スクリーンショット 2024-11-12 18.24.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527543/00702cfa-cfa3-a527-e417-fe7a4750c55e.png)

これはAWS CloudShellがVPCアクセスに対応したことによるものです。
[AWS CloudShell now supports Amazon Virtual Private Cloud (VPC)](https://aws.amazon.com/jp/about-aws/whats-new/2024/06/aws-cloudshell-amazon-virtual-private-cloud/)
:::

CloudShellが起動したら以下のコマンドをコピーしてCloudShellに貼り付け、実行します。

```bash
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
```

![スクリーンショット 2024-11-12 18.28.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527543/7629c58c-533a-1fa6-24ae-7cdb2050d4ca.png)

バケットが作成できたかどうかを確認するために以下のコマンドを実行します。

```bash
aws s3 ls my-unique-bucket-$AWS_ACCOUNT_ID
```

エラーが何も出なければ、作成ができています。`No such bucket`やその他のエラーが出る場合はバケット名を変更して作成するかバケットの作成権限があるかどうかなど調査するようにしてください。

以下のHTMLを`index.html`として保存してS3バケットにアップロードします。

```html
<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を使ったアップロードで対応します。

```bash
vi index.html
```

ソースコードを貼り付けるために`i`キーを押してHTMLのソースを貼り付けます。
貼り付けが完了したらエスケープキーを押して`wq`と入力し、`Enter`で確定してください。

```bash
aws s3 cp index.html s3://my-unique-bucket-$AWS_ACCOUNT_ID/index.html
```

index.htmlがコピーできたかを確認します。

```bash
aws s3 ls my-unique-bucket-$AWS_ACCOUNT_ID
```

実行結果

```bash
2024-11-12 09:42:36        174 index.html
```

問題なくコピーできていることが確認できました。

これでAWS Amplify ホスティングを操作するための事前準備は終わりました。CloudShellはバツボタンで閉じましょう。

![スクリーンショット 2024-11-12 18.47.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527543/a6587428-dc6a-0e71-3d7d-55b36fb9a0ee.png)

### マネジメントコンソールからS3バケットを開く

AWSマネジメントコンソールからS3を開きます。

![スクリーンショット 2024-11-12 18.49.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527543/f74ce231-f8c6-a03c-1127-454ee423ee44.png)

S3のコンソール画面を開いたら東京リージョンであることを確認したうえで`Buckets`をクリックします。

![スクリーンショット 2024-11-12 18.52.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527543/08c6abdf-77bf-186e-6c31-6cb746d76e06.png)

バケットの検索で`my-unique-bucket-`と入力します。すると東京リージョンで作成したバケットがあると思います。バケット名をクリックします。

![スクリーンショット 2024-11-12 18.54.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527543/8c905783-05f1-5bc7-ec2e-a24076081c96.png)

### S3のプロパティを開く

バケットの操作画面が表示されます。先ほどCloudShellでコピーした`index.html`があることを確認したうえで`Properties`をクリックします。

![スクリーンショット 2024-11-12 18.58.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527543/6b3f944a-085c-e9bf-db17-f5d29a55f5a4.png)

一番下にある`Static website hosting`から`Create Amplify app`をクリックします。
なお、このときS3 static website hostingが無効になっていますが、有効にする必要はありません。

![スクリーンショット 2024-11-12 18.58.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527543/9a3bf0fa-b2f4-393c-53a6-44b0dd327a7b.png)

### AWS Amplify ホスティングの操作

画面がS3からAmplifyの画面に遷移します。以下の項目を埋めます。

App name: `website`
Branch name: `dev`
Method: `Amazon S3`
S3 Location: CloudShellで作成したバケット名

![スクリーンショット 2024-11-12 19.04.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527543/d50624d8-3196-f7e9-52ce-cefbb15036cb.png)

最後に`Save and deploy`でデプロイを実行します。

### 実行結果の表示

![スクリーンショット 2024-11-12 19.09.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527543/ef028ddb-eeba-d9e7-d254-49dbda737701.png)

実行結果

![スクリーンショット 2024-11-12 19.11.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527543/a3e91766-b8a8-f480-3673-1d528e47366b.png)

## 実際に使ってみて思うこと

ハンズオンは以上です。今回はAmplifyで強化されたS3の静的ウェブサイトホスティングを試しました。

そこで思った人が多いと思いますが、WebサイトホスティングというとS3が提供する機能にも静的ウェブサイトホスティングがあります。

S3静的ウェブサイトホスティングがAmplifyで`強化された`なのでAmplifyを使っていないS3ホスティングとは全くの別のものだということがわかります。

実際のところ、AmplifyによるホスティングをしてもS3バケットの設定がホスティングに切り替わることはありませんでした。(設定はdisableのまま)

![スクリーンショット 2024-11-12 19.12.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527543/55ee3f15-af6c-46ee-7def-50dcdf862a91.png)

## まとめ

今回はAWS Amplifyホスティングを確認しました。S3の静的ウェブサイトホスティングと何が違うのかはまだ謎が残りますが、かなりの手軽さからこれからのWebサイトホスティングはAmplify寄せていくのかなぁと思いました。

ですが、従来？のS3ホスティングでは細かい設定まで対応できたのでis equalで対応できるかどうかまではわかりません。今度は多くの人が知っているS3ホスティングをやってみて比較してみようと思います。