LoginSignup
0
0

More than 3 years have passed since last update.

@katsura_tarou_a(太郎 桂)

安い、速い、うまいSSL対応ホームページの作り方

Last updated at Posted at 2021-03-20
  • まず初めに
    • 動的なコンテンツを表示したいですか？ -> Yes（お問い合わせフォームが欲しい、ログイン機能が欲しい等）
      残念ですが、この記事は参考になりません。静的ページのみ対象です。
  • AWSを使用します。クレジットカードなどが必要になります。

速いとは

CDNを利用しているから

CDNとは？

https://www.akamai.com/jp/ja/cdn/what-is-a-cdn.jsp

安いとは？

CDNのお値段比較

https://qiita.com/maru3/items/fa62f73e6476b8112787
AWSが最安とは言っていない。

ただ、cloudfront <-> S3間の通信費が必要ない。

うまいとは？

＊

手順

  • まず、作りたいホームページのドメインを取得する。
    Route53で購入しよう。

    "hasami.uk" というものを私は購入しました。実家がイギリスの鋏屋さんです。

  • S3にバケットを作成しよう。

購入したドメインのS3と、www."購入したドメイン"　の２つを作成する。
私の場合
hasami.uk　　こっちはパブリックアクセスブロックしてよし。 ブラウザで直接　hasami.ukとアクセスされた時に　https://www.hasami.uk/にリダイレクトさせるために作成。
FireShot Capture 009 - S3 Management Console - s3.console.aws.amazon.com.png

www.hasami.uk　こっちはパブリックアクセスのチェックを全部外す。注意のところはよく読んでチェックしよう。
FireShot Capture 006 - S3 Management Console - s3.console.aws.amazon.com.png

の２つのバケットを作成した。

hasami.ukの方のバケットには
S3＞プロパティ＞静的ウェブサイトホスティング
の編集を行う。　デフォが無効になっているので　有効にして・・
FireShot Capture 015 - S3 Management Console - s3.console.aws.amazon.com.png
で　「オブジェクトのリクエストをリダイレクトする」
「ホスト名」に　wwwツキの方を書き込んでおく。 プロトコルはHTTPを選んでください。
スクリーンショット 2021-03-20 19.18.45.png

変更の保存。

www.hasami.ukの方に　 アクセス許可たぶ＞バケットポリシーを設定する。aws:Refererに　お好きな文字列（長めがいい）を設定しておく。

{
    "Version": "2012-10-17",
    "Id": "http referer policy example",
    "Statement": [
        {
            "Sid": "Allow get requests originating1234567890",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::www.hasami.uk/*",
            "Condition": {
                "StringLike": {
                    "aws:Referer": "himitsu_desu"
                }
            }
        }
    ]
}

FireShot Capture 027 - S3 Management Console - s3.console.aws.amazon.com.png
変更を保存し、
ここでテストしよう。

FireShot Capture 030 - S3 Management Console - s3.console.aws.amazon.com.png
バケットウェブサイトエンドポイントに対して、普通にcurlをするとアクセスdenied

katsura@iMac ~ % curl  http://www.hasami.uk.s3-website-ap-northeast-1.amazonaws.com/ 
<html>
<head><title>403 Forbidden</title></head>
<body>
<h1>403 Forbidden</h1>
<ul>
<li>Code: AccessDenied</li>
<li>Message: Access Denied</li>
<li>RequestId: 3HE75TKEW5ZH2N7X</li>
<li>HostId: OcM68kP+jYV3rPVbNp2ERb/xG75KdD1oLA+qFW3WK9ZiDUYMtZaMqJuz64gPyJ91eryU59mcno0=</li>
</ul>
<hr/>
</body>
</html>

バケットポリシーで設定したRefererヘッダを付与した場合、コンテンツが見られることをかくにん。

katsura@iMac ~ % curl -H 'Referer:himitsu_desu' http://www.hasami.uk.s3-website-ap-northeast-1.amazonaws.com/
<!doctype html>
<html lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>ハサミ</title>
    </head>
    <body>
        <h1>ハサミ</h1>
        <p>It works!</p>
    </body>
</html>%

Route53の方にも設定が必要だ。

FireShot Capture 018 - Route 53 Console Hosted Zones - console.aws.amazon.com.png

レコード名を　トップレベルのドメイン　つまり　レコード名　を空「から」で　レコードタイプを「A」
トラフィックのルーティング先　として　INFOスイッチをONにすると　S3ウェブサイトエンドポイントへのエイリアスが出てくる。
S3作ったリージョンを選ぶと　無事に　hasami.ukバケットがあるので　選択し、レコードを作成。

ここでテストしよう

katsura@iMac ~ % curl -D - hasami.uk   
HTTP/1.1 301 Moved Permanently
x-amz-id-2: MnaE3tDh6+ghBk6ZTPxcUR0bHSZdew6ebPuw4djzFOpyHmnc0wnFMQ8ZP5ALjaImxObfA+0CWwA=
x-amz-request-id: BBSB6G8KWDVGZVJE
Date: Sat, 20 Mar 2021 10:20:29 GMT
Location: http://www.hasami.uk/
Content-Length: 0
Server: AmazonS3

301と言われているのでOKだ。

次にwww.hasami.ukにコンテンツをアップロードする。　これがホームページの素材だ。
適当にindex.html (つまりトップページ)を書き込んでっと。
スクリーンショット 2021-03-20 18.35.55.png

ホームページのコンテンツは完成した。

これをHTTPSで配信する。
www.hasami.uk のS3バケットも　静的ウェブサイトホスティングの有効化を行う。
今度は　「静的ウェブサイトをホストする」　ラジオボタンをONにして
インデックスドキュメントとして　index.htmlを指定する。
（エラーページも用意してもいいかもしれない。）
FireShot Capture 021 - S3 Management Console - s3.console.aws.amazon.com.png

変更の保存を行う。

やっとcloudfrontですね。

スクリーンショット 2021-03-20 19.37.22.png
ここ英語です。
create Distributionをクリック。　＞　Get　Started
先にACMで証明書を作っておきましょう。
今回はwww.hasami.ukの証明書。
スクリーンショット 2021-03-20 19.45.35.png
（ここのフローを進めるとRoute53に自動でレコード作ってくれます。）
作成できたら
cloudfrontに戻って
FireShot Capture 036 - AWS CloudFront Management Console - console.aws.amazon.com.png

OK

オリジンの設定をする。　OriginDomainNameにS3バケットが選択できるので　wwwを選択する。

スクリーンショット 2021-03-20 21.24.53.png

最後のOrigin Custom Headerに
Header Name 「Referer」、Value「S3のバケットポリシーで設定したやつ（himitsu_desu）」を入れる
あとはデフォでいいと思います。

最後にRoute53に
なんとか.cloudfront.com -> www.hasami.ukに名前解決させたいので
作成したcloudfront のgeneralタブに　DomainNameが書いてあるので
スクリーンショット 2021-03-20 21.29.08.png

これをRoute53にCNAMEで登録する。
スクリーンショット 2021-03-20 21.10.02.png

完成だ。

最終確認

katsura@iMac ~ % curl -D - https://www.hasami.uk
HTTP/2 200 
content-type: text/html
content-length: 248
date: Sat, 20 Mar 2021 12:33:38 GMT
last-modified: Sat, 20 Mar 2021 12:15:07 GMT
etag: "7870ebfca42a75a820cd96e145cdb6b4"
accept-ranges: bytes
server: AmazonS3
x-cache: Hit from cloudfront
via: 1.1 853dab48fd1de187261c15f5b98cd2a0.cloudfront.net (CloudFront)
x-amz-cf-pop: NRT20-C4
x-amz-cf-id: GyJDgpudMNhmxFjrIItzu2B0YnYv8nMusXpcn6aaRt0zjES1SAGz2Q==
age: 7

<!doctype html>
<html lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>ハサミ</title>
    </head>
    <body>
        <h1>ハサミ</h1>
        <p>It works!</p>
    </body>
</html>% 

katsura@iMac ~ % curl -D - hasami.uk  
HTTP/1.1 301 Moved Permanently
x-amz-id-2: ALlahY+LWzoFtb2CYm1cslzd1gnwo2Mor7H7lkFqWoVePY6iacczqOM+wtJyIKUi4jJJ0zzOXk8=
x-amz-request-id: V28H69F8RC1CANTP
Date: Sat, 20 Mar 2021 12:35:30 GMT
Location: http://www.hasami.uk/
Content-Length: 0
Server: AmazonS3

お疲れ様でした。
あとはS3にコンテンツを増やしていこう。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0