猿でもわかる！S3 + CloudFrontでの静的サイトホスティング

概要

博士「ポートフォリオや、ちょっとしたサイト作ったけど、わざわざサーバ立てたりするのは面倒だなーって思うよね？
そんな時!AWSのS3を使えばサーバレスなサイトホスティングができるよ！
サーバーを使っていないから、月々の費用も安いし、管理も楽なんだ！
やりかたもとっても簡単！簡単すぎて猿でもできるんだ！
実際に猿を連れてきたからみんなで一緒にやってみよう。よろしくね、猿くん！！」

猿「・・・・・・・・・・」

今回扱うこと

• S3を用いたサーバレスなサイトホスティングの方法
• AWSコンソールを使ったリソース作成
• ACMでの証明書発行方法
• CloudFrontの最低限の設定方法

今回扱わないこと

• AWSアカウントの設定周り
• DNSの細かい設定
• awscliなどコマンドラインでのリソース作成
• 猿の生態
• 猿との正しい触れ合い方

作成手順

事前準備

博士「事前に用意が必要なものはこの２つ」

• AWSアカウント作成
• サイトのドメインの準備

博士「今回AWSアカウントの作成方法は省略するよ！読みやすい記事がたくさんあるから読み漁ってね！」

猿「ウキー・・・・」

博士「ほら、読んで、猿くん、LGTMして？」

猿「・・・・・・ウキャー！！(PCを叩く)」

博士「・・・あとは、自分のサイトで利用したいドメインを用意しよう！
　お名前ドットコムなんかで買ってもいいし、Route53でも発行できるよ
　ぶっちゃけホスティングだけならドメインなくてもできるけど、URLダサくなるよ！」

STEP1 S3を作成しよう！

博士「それじゃあ早速やっていこう！まずはS3のBucketを作成するよ」

猿「キーッ！！ウキャーウキャー」

博士「AWSコンソールからログインしたら、 バケットの作成 を押そう！」

博士「ここでポイント！この時、実際に利用するドメイン名でバケットを作成すること！
今回は sarusaru.com というサイトでを作る想定で進めるよ」

博士「リージョンは東京が無難だね、そのほかの設定は一旦無視してOK、バケット作成 を押して作成しよう」

博士「無事にできたかな？」

猿「・・・・・・（バナナを食べている）」

博士「次に行ってみよう」

STEP2 S3を設定しよう

博士「それじゃあ、作ったバケットにサイトのコンテンツをアップロードしよう！猿くんできるかな」

猿「・・・・キー」

博士「・・・うん。まあ、なんか普通にやってればできるから・・・・この時、TOPページがどこになるか覚えておいてね」

猿「ウキー」

博士「ここからが本題！次はS3の設定をするよ！バケット名を押して、詳細から プロパティ を押そう」

博士「そのままずーっと下の方に進むと静的ウェブサイトホスティングの項目があるよね？そこで編集するを押そう」

博士「編集画面で、ラジオボタンを有効にするに帰ると・・・・」

博士「たくさん出てきたね！ほら、見てよ猿くん」

猿「キーッ！！ウキャーッ！キャッキャ！」

博士「ああ、これは威嚇行動だよ！歯を見せて自分にこれ以上近寄ると噛み付くぞというアピールなんだ、怖いなあ」

博士「インデックスドキュメントには、サイトのTOPページに当たるファイルのパスを入れよう。
　大体の人はindex.htmlだと思うからそれを記載しておくね」

猿「キー！」

博士「エラードキュメントも設定しておかないと、保存ができないからしておこう。エラーが起こったときにこのページを返してくれるんだ
そんなページは用意してないかもしれないけど、まあ、ここは実ページがなくても大丈夫だから一旦入れておこう」

猿「・・・・」

博士「変更できたら、変更の保存を押そう！」

STEP3 S3を公開しよう!

博士「いよいよコンテンツを公開するよ！この先の作業を実施すると
　バケット内のコンテンツが全世界に公開されることになるから気をつけよう！
　Twitterの裏垢のパスワードとかうっかり入れないようにね」

博士「それじゃあ、バケットの詳細画面を開いてアクセス許可のタブを押してね」

博士「編集を押したら、一番上パブリックアクセスを全てブロックのチェックマークを外そう！！」

博士「こんなふうに大丈夫？って聞かれるけど、問題ないから強い心で変更を貫こう」

博士「できたかな？次はその下、バケットポリシーの編集をするよ！
　下の方にある項目で編集を押して・・・・」

博士「こんな画面が開けたかな？そしたら今から書くものを貼り付けてね」

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::sarusaru.com/*"
            ]
        }
    ]
}

博士「こんな感じ！sarusaru.comの部分は自分のバケット名に置き換えよう。
　他はこのままで大丈夫！猿くんもできたよね？」

猿「キーッ！！」

博士「落ち着いてよー、リンゴあげるから」

猿「・・・・キー」

STEP4 サイトを確認しよう!

博士「ポリシーの設定ができたら、さっき設定した静的サイトホスティングの箇所に戻ろう！」

博士「ここの赤線が引いてあるリンクがエンドポイントと呼ばれる、いわゆるURLだよ。
　実際にここをクリックして自分のサイトが見れるか確認しよう！」

猿「・・・・・」

博士「ここまでできれば公開までは大丈夫！」

博士「SSLでのアクセスに拘らないのであれば、あとはDNSで指定のドメインとさっきのエンドポイントを紐づければ公開自体はできるよ」

猿「ウッキ」

博士「そう！DNSに登録するのはちょっと待って、SSLの設定に進むよ猿くん！」

猿「・・・・・」

STEP5 証明書を発行しよう!

博士「ここから先はhttpsでサイトにアクセスさせたい場合に必要な手順になるよ！ちょっとだけ難しくなるけど頑張ろうね！」

猿「・・・・・」

博士「大丈夫、猿くんでもできるよ！自信持って！」

猿「キー！(扉を叩く)」

博士「ああっ！逃げちゃダメだよ.まずはAWS Certificate Manager(ACM)の画面にアクセスしよう！」

博士「今すぐ始めるを押して・・・欲しいんだけどその前に一つ注意点！この先の作業はバージニア北部リージョン(us-east-1)で行ってね。そうしないと、このあと利用するClooud Frontに紐付けができなくなるんだ」

博士「準備ができたら、パブリック証明書のリクエストにチェックを入れて証明書のリクエストを押そう！」

博士「ドメイン名のところに自分のドメイン(ここではsarusaru.com)を入れて、次へを押そう」

博士「もしDNSの設定変更ができる場合はDNSの検証がおすすめだけど、Eメールの検証でも問題ないよ」

猿「・・・キー(果実をかじる)」

博士「ちょっと難しいかな？」

猿「ウキー！ウキー！」

博士「設定したはあとはポチポチ押して進めよう」

博士「この赤枠のところ！この値を今回利用したいDNSサーバーに設定しよう！設定したらあとは待つだけ、バナナでも食べてのんびりしてよう」

猿「キー！」

博士「ちなみに、イギリスでは猿の餌にバナナはあげないらしいよ。健康に悪いんだって」

博士「ここの検証保留中が発行済みになったら準備OKさ！そろそろ大詰めだよ」

STEP6 CloudFrontを作成しよう!

博士「ここが一番難しいよ！Cloud Frontを設定しよう」

博士「Cloud Frontの画面を開いたらCreate Distributions を押そう」

博士「早速英語だらけだけど、上のGet Startedを押そう」

博士「大量のパラメータが出てきたね！やれることはたくさんあるけど今回は必要最低限に留めるよ」

博士「まずはOrigin Nameここはプルダウンにさっき設定したS3が出てくるはずだからそこを選ぼう
　そうするとOrigin IDが自動で入るよ」

博士「Restrict Bucket AccessをYesにしておこう！こうすることでS3バケット直のアクセスを防げるんだ」

博士「ここはCreate a New Identityを選択。Commentは自動で入るからそのままでいいよ(変えても大丈夫だよ)」

博士「ここもYesで！CloudFrontからのバケットアクセスが許可されるよ」
猿「・・・・・・」

博士「次はここ！HTTPでリクエストが来たらHTTPSに飛ぶように設定変更しよう。
　なんらかの事情でhttpを残したい場合はこれだとhttp通らなくなるから気をつけてね」

猿「ウキャー！ウキャー！」

博士「ああ、どうしよう、急に暴れ出したよ猿くん！どうしたの！」

博士「さあ！もうすぐだよ！Alternate Domain Namesにドメイン名(S3のバケット名)を設定しよう！
　　SSL CertificateはCustomを選ぶとさっきACMに登録した証明書が出てくるはずだから選ぼう
　　もし出てこなかったら証明書が発行済みになってるか、ACMのリージョンがバージニアになっているか確認しよう」

博士「Default Root Objectには、STEP２で設定したインデックスと同じ値を入れよう！」

博士「ここまでお疲れ様！最後にCrete Distributionを押してクラウドフロントを作成しよう！」

猿「(木の上に登って枝をゆすり始める)」

博士「ああっ！だめだよ猿くん！これはマウンティングといって行動でもって『おれはこんなに強いんだぞ』と相手より自分が優位であることを示すための行動だよ。エンジニアにもこういう人は多いんだ。もっとも、エンジニアの場合こういうマウント取ってくるやつに限って大概はしょうもないんだけどね！あっ違うんだよ猿くん今のは僕の偏見だよ！！降りてきてよ〜〜」

STEP7 DNSを設定しよう

博士「いよいよ最後だよ！もう一踏ん張り」

猿「ウキャー！ウキャー！」

博士「ああ、さっきからすごい叫んでるよ・・・困ったなあ・・・・」

博士「Domain Nameの****.cloudfront.netの値をメモしよう！あとはこれをDNSサーバーに設定すれば設定は完了だ！」

猿「ウキー！ウキー！」

博士「Route53に設定する場合はこんな感じだよ」

博士「ちなみにレコードタイプは他環境や別のDNSを利用する場合はCNAMEでの設定が必要になるよ！」

猿「ウキーーー！」

博士「ここまでできたらやっと、静的ホスティングの完成だ！」

猿「ウキャー！(バンバン)」

終わりに

博士「どうだったかな？これでサーバーの管理することなく、サイトを公開できるよ。簡単だったでしょ？ね？猿くん！」

猿「ウキャー！(木の枝を投げる)」

博士「・・・・・・・無理・・・・・か」

猿「・・・・・・・・」

一般に人間は猿より賢いと認識されており
知能が低い人間でもできることを揶揄して「猿でもできる」などといいます
ですが、厳しい野生の中でも仲間を重んじ、本能のまま生きる猿たちと
高いはずの知能を持ちながら互いをを憎み、妬み、いたずらに命を奪い
辛いと思いながらも会社にいく毎日を余儀なくされている我々人間
果たして、本当に賢いのはどちらなのでしょうか

参考URL

https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/dev/WebsiteHosting.html
https://qiita.com/THacker/items/11eadffe6b3ce3491e3b