##経緯
転職活動をするにあたって、実績をまとめたポートフォリオサイトを作成することにした。
一番簡単な方法はGitHub Pagesを使ってリポジトリを登録して一発でサイトホスティングしてしまう方法だと思うが、これだと過去のポートフォリオや画像を掲載するとサイトの動作が遅くなるという欠点がある。
私の場合はReactのSPAを掲載したかったため、動作が重くなる事態は避けたかった。
その時に実際行った手順を備忘録として残しておきたい。
##システム構成図
・S3とは？
AWSが提供するストレージサービス。静的サイトホスティングの機能も有しており、今回はこれを利用する。
・CloudFroutとは？
CDNサービス。あらかじめディストリビューションを登録しておくことでコンテンツを高速で配信する。
##メリット
・取得した独自ドメインに対してACMでSSL証明書を発行、これによりサイトをhttps通信で公開できる。(SEOの観点からも有利)
・ユーザーはあらかじめCloudFrontに登録されたコンテンツを閲覧できるため、とにかく動作が高速。
・サーバーレスで管理が楽。
・手軽にオリジナルドメインを導入できる。
・GitHub Pagesを使う場合とは異なり、実務等で静的サイトを公開する場合に応用が利く。
・費用が安い。
単にGitHub Pagesを使用するよりカッコいいのではないかと個人的には思う。
##手順
###①IAMユーザーを作成する
セキュリティの観点からadmin権限を持ったIAMユーザーを作成しておく。
今回は「test-admin」としておく。
AdministratorAccessというポリシーを忘れずにアタッチしておく。
このIAMユーザーは全ての権限にアクセスできるみたいな意味。
###②ドメインを登録する
今回はRoute53/お名前.comを利用する。
あらかじめお名前.comでドメインを購入しておく。
demonitoring.workを購入。
Route53の方でホストゾーンを作成。
自動でNSレコードが作成される。
demonitoring.workをクリック。
NSレコード４つを確認、お名前.com Naviから、ネームサーバーの選択。
その他のネームサーバーを使う。
４つのレコードを登録していく。
順番は気にしなくても良いが、末尾に.を含めないように気をつける。
##③ACMで独自ドメインにSSL証明書を発行する
登録したドメインにDNS検証をして、信用できるドメインだと証明する手順。
※この際に絶対忘れてはならないのがリージョンをバージニア北部(us-east-1)に変更すること。
CloudFrontで利用するドメインはSSL証明がバージニア北部からしか行えない。
画像上部の「証明書のリクエスト」から申請を行い、もう一度画像の画面に戻ってきたところで「Route 53でのレコード作成」ボタンを押す。
数分待てば検証状態：成功、状況：発行済みと表示される。
何時間も待たされるようだと一度手順を確認した方が良い。
何かが間違っている。
自分は何度も検証が通らず、理由も分からないという事態に直面した。笑
##④S3でhtml/CSSを公開する
画像にあるオレンジ色のボタン「バケットを作成」をクリック。
バケット名は一意である必要がある。
リージョンは東京に戻しておいて問題ない。
ここで重要なのが「パブリックアクセスを全てブロック」のチェックを外しておくこと。
後からS3でのホスティングはうまくいっているのか、問題はCloudFrontにあるのか、確認する上で便利である。
バケットのバージョニングは無効で問題ない。
デフォルトの暗号化も今回はいじらない。
詳細設定も無視してバケットを作成をクリック。
作成したバケットにファイルをアップロードしていく。
アップロードするファイルについて、topページに表示したいものはindex.htmlという名前であることが推奨される。
単純にわかりやすい。
次にプロパティのタブをクリック,静的ウェブサイトホスティングを編集。
静的ウェブサイトホスティング：有効にする
ホスティングタイプ：静的ウェブサイトをホストする
インデックスドキュメント：index.html
エラードキュメント - オプション：今回は特に記入しない。
最後にアクセス許可のタブから、バケットポリシーを作成。
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": [
"s3:GetObject"
],
"Resource": [
"arn:aws:s3:::example.com/*"
]
}
]
}
"Resource"の部分のexample.comのところだけ、用意したドメインに変更する。
もう一度プロパティのタブから、静的ウェブサイトホスティングをクリック。
エンドポイントという項目に、このバケットのURLが表示される。
問題なければエンドポイントにアクセスできるはず。
##⑤CloudFrontのディストリビューションに、作成したバケットを登録する
マネジメントコンソールからCloudFrontを選択。
右上のボタン「ディストリビューションを作成をクリック」
オリジナルドメイン：作成したS3バケットを選択
オリジンパス - オプション：空欄で問題なし
名前：オリジナルドメインと一致
S3 バケットアクセス：はい、OAI を使用します (バケットは CloudFront のみへのアクセスとなるように制限できます)
オリジンアクセスアイデンティティ：作成したバケットのOAIを選択
カスタムヘッダーを追加 - オプション：特にいじらない
オリジンシールドを有効にする：いいえ
追加設定：今回は必要なし
パスパターン：デフォルト (*)
オブジェクトを自動的に圧縮：Yes
ビューワープロトコルポリシー：Redirect HTTP to HTTPS※（HTTPできた通信をHTTPSにリダイレクト）
許可された HTTP メソッド：GET, HEAD
ビューワーのアクセスを制限する：No
キャッシュキーとオリジンリクエスト：Cache policy and origin request policy (recommended)
追加設定特になし。しばらくデフォルトの設定でよし。
料金クラス：すべてのエッジロケーションを使用する (最高のパフォーマンス)
AWS WAF ウェブ ACL - オプション：特にいじらない
代替ドメイン名 (CNAME) - オプション：先に登録したドメインを入力する
カスタム SSL 証明書 - オプション：先の手順でSSL証明書を発行したドメインを選択
サポートされている HTTP バージョン：HTTP/2
デフォルトルートオブジェクト - オプション：index.html を入力（S３バケットに登録したtopページに表示されるファイルを指定）
後はデフォルトのままで「ディストリビューションを作成」ボタンをクリック。
ディストリビューションが作成されて、ステータスが：有効になるのを確認する。
作成されたディストリビューションのドメイン（d15nhmn*******.cloudfront.net
）にブラウザからアクセスしてみる。
この時まだ代替ドメインからはアクセスできない。
##⑥S3のバケットポリシーを変更する
先に記述したバケットポリシーを変更。
こんな感じにする。
{
"Version": "2008-10-17",
"Id": "PolicyForCloudFrontPrivateContent",
"Statement": [
{
"Sid": "1",
"Effect": "Allow",
"Principal": {
"AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity E28L5RUN98ZNCT"
},
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::own-portfolio-site/*"
},
{
"Sid": "2",
"Effect": "Allow",
"Principal": {
"AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity E28L5RUN98ZNCT"
},
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::own-portfolio-site/*"
}
]
}
##⑦作成したCloudFrontディストリビューションのドメインを、Route53のAレコードに登録する。
再度Route53から、SSL証明書を発行した独自ドメインをクリック。
レコード名：特にいじらない
レコードタイプ：Aレコード
値：エイリアスをクリック→CloudFrontディストリビューションのエイリアス→米国北部(バージニア北部)→
先ほど作成したCloudFrontディストリビューションのドメインを選択（表示されない場合、手順に誤りがある）
ルーティングポリシー：デフォルト
ターゲットのヘルスを評価：デフォルト
「レコードを作成」ボタンをクリック。
最終的には４つのレコードが登録されているはず。
ブラウザから無事アクセスできれば成功である。（私の場合は
https://demonitoring.work
)
お疲れ様でした。