不動産価格調査ツールを公開したい①（静的ウェブサイトの公開）

# はじめに
こんにちは、中学校の先生です。
今回は、以前作成したWEBスクレイピングツール

https://qiita.com/Daha/items/e04c14dbec3af7133b27

を公開したいがために、AWSを使ってみた記事です。
本来はサーバーPCをレンタルしてサイトを公開しようと思っていました。
しかし『サーバーレスアーキテクチャ』なるものがあると知って、チャレンジしてみた次第です。

# もくじ
* [ざっと設計](#ざっと設計)
* [公開ページの作成](#公開ページの作成)
* [S3バケットの作成、ファイルアップロード](#S3バケットの作成、ファイルアップロード)
* [S3の設定変更、公開](#S3の設定変更、公開)
* [ぶち当たったエラー](#ぶち当たったエラー)
* [まとめ](#まとめ)


# ざっと設計
最終的には
![スクリーンショット (10).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2773852/dfa82638-cbae-6e97-98de-a5f94779af7f.png)
こんな感じを目指していて、
今回は、
![スクリーンショット (9).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2773852/6c58bd0a-9fca-fc00-8d73-b15e9ae3c3dd.png)
これをやろうとしたら、意外と書くこと多かったので、
![スクリーンショット (9)-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2773852/fb87225b-d075-ab80-4737-62313de0fb32.png)
ここだけやってみることにしました。


# 公開ページの作成
HTMLを使用し、公開ページを作成します。
S3で公開できるのは静的ウェブサイトなので、PHPなどは使っていません。
（HTMLの中に書く言語すべて使えないのだろうか？使ったらどうなるのだろうか？要検証）
![スクリーンショット (33).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2773852/f956518e-a7fe-a861-3103-a045b40b6766.png)
こんな感じで書きました。
![スクリーンショット (31).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2773852/a0c24441-a925-b36c-e4ca-561438ee3221.png)
ブラウザで読むとこうなります。
ちなみにこのままだと、[後で困ったこと](#ぶち当たったエラー)が起きます。

# S3バケットの作成、ファイルアップロード
次はAWSにアクセスします。
![スクリーンショット (11).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2773852/cede285d-0082-e8c9-ae4b-4260411b084e.png)
検索なりなんなりして、S3にアクセスしまして、
![スクリーンショット (12).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2773852/c66c6009-fe26-56be-b5d0-345c6fa61354.png)
バケットを新規に作成します。
![スクリーンショット (13).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2773852/f1d03991-feb1-917b-3553-7f3d197f6088.png)
名前を決めたら、
![スクリーンショット (16).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2773852/3091fb23-13d5-dc61-9541-8591f894c9e6.png)
バージョニングを有効にして、
![スクリーンショット (17).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2773852/3a8d7e88-2af8-e18d-e985-db0811116ee7.png)
バケットの作成を押しました。
後で設定を変えられると思って、他はいじっていません。
その後、
![スクリーンショット (34).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2773852/76d97c69-0a2d-9bd5-caaa-0cc92c857b30.png)
S3のトップページから、作成したバケットにアクセスします。
![スクリーンショット (35).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2773852/06f9e6c4-f5ff-8d38-fba6-5bca0828d145.png)
アップロードを選択して、
![スクリーンショット (36).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2773852/b0fed08e-1e24-1e0d-0c9b-900e2066a39c.png)
必要なファイルをアップロードします。

# S3の設定変更、公開
このままだと誰もS3の中身を覗けないので、設定を変更します。
![スクリーンショット (19).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2773852/99ee2f3d-8a8a-333c-e262-fc3491945375.png)
またS3のページからバケットを選択したら、プロパティにアクセスします。
![スクリーンショット (20).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2773852/0554320a-0a79-f113-d4a8-58e8d2aac92b.png)
下の方に『静的ウェブサイト～』があるので、3点をチェックします。
* 静的ウェブサイトホスティングを有効にする
* 静的ウェブサイトをホストする
* インデックスドキュメントのファイル名を指定する
これはまだ看板を立てただけで、誰も入れません。
次は
![スクリーンショット (19)-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2773852/1da5d9e9-5c7f-48aa-a48c-d2947cb3f2d6.png)
アクセス許可を設定します。
![スクリーンショット (22).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2773852/1b249d5a-8db0-0640-2d6a-2277e04a9f0d.png)
『パブリックアクセスをすべてブロック』のチェックを外して![スクリーンショット (23).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2773852/d753cc5d-e829-6805-0e0d-b38cfbf0b35b.png)
変更を保存します。
![スクリーンショット (24).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2773852/24027dad-e8c5-7104-6dc5-7f0a9f38dc18.png)
おそらく確認されるので、『確認』と入力します。
![スクリーンショット (25).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2773852/dad21a50-b803-2056-26df-e30c541bf15e.png)
次は、その下にあるポリシーを記述します。
![スクリーンショット (27).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2773852/2f5a7202-4ed6-3f8b-d3ec-370f37587fca.png)
![スクリーンショット (28).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2773852/bb67a9b0-5d2d-3349-34aa-0ebc92d711de.png)
さて、これでサイトが公開されたはずなので
![スクリーンショット (38).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2773852/726f23bc-d97d-1739-3789-8ce058da6c63.png)
プロパティへ戻りまして、
![スクリーンショット (39).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2773852/e73d6398-c32f-985b-9f27-2eaba73945f1.png)
サイトのURLをクリックしてみました。
![スクリーンショット (29).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2773852/252df6da-1305-127b-d64d-9f716f499eaa.png)
見事に文字化けしてて笑いました。

# ぶち当たったエラー
ブラウザの問題かもしれないのですが、とりあえずUTF-8じゃなくなっていることはわかったので
<details><summary>こちら</summary>

(head)
 (meta http-equiv="content-type" charset="utf-8")
(/head)


</details>
を追記しました。サイトにアップロードすると、解決したことを確認できました。

# まとめ
今回のチャレンジで、
* S3のセキュリティが何段階かあって、設定が必要
* サーバーを立てなくてもwebサイトを作れる
* （意外と簡単だからブログ作ろうかな・・・？）
なんてことがわかりました。
次はCloudfrontを挟むか…と思案しています。
以上となります。
閲覧ありがとうございました。