3年のそむです。
この記事はMYJlab Advent Calender18日目にあたります。
最近は面接でちょっとやらかしたので落ち込んでいます。
よろしくお願いします。

背景

就活にあたり、今まで作成したwebページやプログラムなどをざっと見られるページが欲しいと思いました。
ポートフォリオ自体は適当にサーバーを借りれば簡単に作れるものですが、今回は触ってみたいと思っていたAWSを使用することにします。
費用は無料利用枠を使って月額0.5$程度です。（VATがかかるような気がします）

この記事でやること

AWS(Route53, S3, ACM, CloudFlont)を使用してポートフォリオサイトをwebに公開します。
公開するものはペライチのhtmlファイルです。
中身については取り扱いません。

早速作ってみる

0. 用意するもの

公開したいhtmlファイル、その他
メモ

1. 事前準備(1時間程度)

こちらの記事を参考にユーザー設定、権限設定等を行います。
Google Aucenticatorのあたりがちょっと手間でした。

2. ドメイン設定（1時間〜2時間程度）

アドレスがすっきりしていた方がかっこいいので（重要）、ドメインを設定したいと思います。利用したサイトはFreenomです。
長期的に利用する場合、お名前.comなどでもう少し信用のあるドメインを取得した方がいいかと思います。
Freenomでのドメイン取得方法はこちらの記事を参考にしました。（「チェックアウト」までで大丈夫です）

ドメインが取得できたら、FreenomとAWSでの作業を交互に行っていきます。

AWS Route53で「ホストゾーンを作成」をクリック、Domain Name欄に取得ドメインを入力して「作成」します。
作成後、NSレコード（ns-000.XXXXXXXX.net.とか）が4件生成されるので、メモ帳か何かに控えます。
Freenomで「Use DNS」を選択し、先ほどのNSレコードを2件（どれでもいい）Nameserverとして登録します。
申し込みを完了します。
(休憩)
Amazon S3で「バケットを作成」し、バケット名を1で取得したドメイン名（XXXXX.tkなど）とします。
作成したバケットに、webページとして表示させたいhtmlファイルをアップロードします。
バケットポリシーを変更します。バケットポリシーに以下のコードをコピペします。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadForGetBucketObjects",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::ここはS3のパケット名/*"
        }
    ]
}

(コード例はこちらからお借りしました)

（番号が振り出しに戻ってしまった…）静的ウェブサイトホスティングを設定します。「プロパティ」タブから静的ウェブサイトホスティングをクリック、「このバケットを使用してウェブサイトをホストする」にチェックを入れます。インデックスドキュメントにindex.htmlを入力します。
一段落です。おつかれさまでした。S3のプロパティタブの静的ウェブサイトホスティングの欄でエンドポイントURLをクリックすると、アップロードしたhtmlファイルが表示されていると思います。このエンドポイントURLはメモっておいてください。

3. SSL証明書を発行(30分程度)

仕上げとして、Amazon Certificate Manager(ACM)でSSL証明書を発行します。
1. CloudFlontを作成します。「Origin Domain Name」にS3のエンドポイントURLを、「Viewer Protocol Policy」で「Redirect HTTP to HTTPS」を、「Alternate Domain Names」に取得したドメインを、「SSL Certificate」で「Custom SSL Certificate」にチェックしたのち取得したドメインを、最後に「Default Root Object」にindex.htmlを、それぞれ設定します（長くてすみません）。
2. 「Create Distribution」を押し、ひたすら待ちます。30分くらいかかることもあるようです（私は設定でつまずいたため1時間ほどかかりました）。
3. 状態が「Deployed」になったら、Route53に戻り「レコードセットの作成」をします。「エイリアス」を「はい」にチェックし、エイリアス先をCloudFlontディストリビューションに設定します。

これで全ての工程が終了です！お疲れさまでした。
取得したドメインにアクセスして、アップロードしたhtmlファイルが表示されれば完成です。

まとめ

間違っている部分や、「もっとこうした方がいい」などありましたらご指摘いただけると嬉しいです。
ありがとうございました！

参考文献

AWSアカウントを取得したら速攻でやっておくべき初期設定まとめ
 【解説付き】ポートフォリオサイトを作ってAWSで公開する
 【初心者向け】無料ドメインを使ってAmazon Route 53で実装しながら理解するDNS
無料ドメイン(.tk)とRoute53を利用して0円でHTTPS環境を設定してみた
 ACMでDNSによるドメイン検証する方法

AWSで就活ポートフォリオっぽい何かを作る

背景