【今日から始めるAWS】S3に静的ウェブサイトをホストする

#はじめに
30代未経験からエンジニア転職をめざすコーディング初学者のYNと申します。お読みいただきありがとうございます。
20年に入ってコーディングの勉強を始め、この記事を書く2時間ぐらい前にAWSアカウントを作成しました。何から勉強すべきか全くわかりませんので、とりあえず目についたチュートリアルを進めて行きます。

#今回やったこと
[チュートリアル](https://aws.amazon.com/getting-started/hands-on/build-modern-app-fargate-lambda-dynamodb-python/module-one/)に従い、とりあえず静的なウェブサイトをS3にデプロイしました。
「20分で終わる」と書かれていましたが、しっかり2時間かかりました。
また、今回は`Cloud9`でなく、自前のPC（mac）上で開発を進めていきます。
<img width="1659" alt="スクリーンショット 2020-07-30 16.41.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572098/4bc474df-9c9b-290b-ba8e-e30b27171673.png">

#手順
* ローカルPCにレポジトリをクローン
* aws-cliをインストール
* aws-cliの設定
* S3にバケットを作成
* 静的ウェブページのデプロイ

#ローカルPCにレポジトリをクローン
チュートリアルでは`Cloud9`を使っていますが、今回はローカルPCにレポジトリをクローンしています。
まずは適当なフォルダを作り、そこへ移動してクローンします。

```bash

$ cd ~
$ mkdir aws-tutorial
$ cd aws-tutorial
$ git clone -b python https://github.com/aws-samples/aws-modern-application-workshop.git
```

#aws-cliをインストール
[チュートリアル](https://aws.amazon.com/getting-started/hands-on/build-modern-app-fargate-lambda-dynamodb-python/module-one/)では、`aws-cli`を使うところから始まるのですが、（今回は自前のPCを使うので）そもそもインストールから始めなければなりません。今回は`homebrew`を使ってインストールします。

```bash

$ brew install awscli
```
[こちらの記事](https://qiita.com/amemolee/items/c05c10334ada41397b1d)を参考にさせていただきました。

#aws-cliの設定
当然ながら、`aws-cli`をインストールしただけでは動かすことはできません。設定が必要です。
[公式ドキュメント](https://docs.aws.amazon.com/ja_jp/cli/latest/userguide/cli-configure-quickstart.html)を見つつ設定していきます。
今回は`aws configure を使用したクイック設定`をします。
<img width="967" alt="スクリーンショット 2020-07-30 17.05.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572098/abb84bf9-6596-8c97-55c2-dc3ed043ddd7.png">

下記4つの設定が必要です。

* アクセスキー
AWSのサービスを切り替えて`IAM`へ移り、設定を確認します。下図の`アクセスキーを作成`ボタンを押すと見れます。
<img width="1680" alt="スクリーンショット 2020-07-30 17.07.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572098/71810e91-0af5-5a25-3aa1-40cace21b1c1.png">

* シークレットアクセスキー
上記アカウントキーと一緒に見れます。

* デフォルトリージョン
AWSのリージョンを設定します。
自分は`オハイオ`を選んだので`us-east-2`を入力しました。

* デフォルトフォーマット
とくに気にしない場合は`json`でOKです。


#S3にバケットを作成
ここまで終わってようやく[チュートリアル](https://aws.amazon.com/getting-started/hands-on/build-modern-app-fargate-lambda-dynamodb-python/module-one/)のstep3に進むことができます。
しかし、私は最初の<img width="899" alt="スクリーンショット 2020-07-30 17.28.25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572098/0e229a9d-cbbf-1197-8fed-fdc36627ddd6.png">
でつまづいてしまいました。

```
InvalidSignatureException: The request signature we calculated does not match the signature you provided.
```

まず、上記エラーはアカウントキーを再設定することで対処しました。
対処に際しては[こちらの記事](https://qiita.com/o_hana/items/3878ddcdc0d2f069ad36)を参考にさせていただきました。

```
An error occurred (InvalidBucketName) when calling the CreateBucket operation: The specified bucket is not valid.
```

次に、[S3バケットの命名規則](https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/dev/BucketRestrictions.html#bucketnamingrules)に準じている（と思っていた）にもかかわらず、上記エラーが出てしましました。
対処に際しては、[こちらの記事](https://qiita.com/heyheyww/items/bfe77691eaa075247cc3)を参考にさせていただきつつ、大文字や小文字などといろいろいじったら解決しました。


#静的ウェブページのデプロイ
次に、ウェブサイトの初期表示ページを設定します。
<img width="885" alt="スクリーンショット 2020-07-30 17.39.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572098/ef2b40d9-4ad2-9a1b-53e0-6fc414bf6911.png">


そして、バケットポリシーにバケット名を反映します。
<img width="970" alt="スクリーンショット 2020-07-30 18.15.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572098/c8e67a3b-2b66-d8f4-2779-10973a43d108.png">


その後、ウェブサイトにバケットポリシーを適用します。
<img width="896" alt="スクリーンショット 2020-07-30 17.57.55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572098/e020c2b4-3b3c-4668-0251-dd1bd83d7dcb.png">
ローカルPCで作業する場合、Cloud9とファイルパスが異なるので少し書き換える必要があります。今、`~/aws-tutorial`にいるとすると、

```
aws s3api put-bucket-policy --bucket REPLACE_ME_BUCKET_NAME --policy file://~/aws-tutorial/aws-modern-application-workshop/module-1/aws-cli/website-bucket-policy.json
```
と書き換えます。


最後に、ウェブサイトをデプロイして完了です。ローカルPCを使う場合、上記同様に書き換える必要があります。
<img width="883" alt="スクリーンショット 2020-07-30 18.04.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572098/84f9d5ba-b7e8-7089-a474-fc1649e9e864.png">


ここまで終わって、初めてウェブページをブラウザで開くことができます。
urlは、選んだAWSリージョンごとに（微妙に）異なるので注意が必要です。
<img width="899" alt="スクリーンショット 2020-07-30 18.07.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572098/0ef9ceac-4236-b3fb-e270-701f0cb50b6d.png">





#最後に
本当にただ簡単なチュートリアルとこなしただけなのですが、（初心者なこともあり）予想以上に手間取ってしまいました。
何か間違い等あればご指摘いただければ幸いです。
お読みいただきありがとうございました。