【保存版】AWS HTML・CSSで作ったウェブサイトをHTTPSで公開しましょう！（具体的な手順を書いています。）

ユウキ

2022年7月27日 10:47

こんにちは、CryptoGamesの高橋です。

クリスペというサービスを行っている会社です。

本日は静的ウェブホスティングを利用して、S3を使って静的ウェブサイトを公開します。

その上で、ACMやRoute53を使用して、HTTPS接続をしてみます。

なんだか難しそうですね。

ただ、手順を具体的に書いていますので、この通りにやっていけばできると思います。

はじめる前に

AWSのサービスには料金がかかります。

事前に確認を行い、テスト終了後はクリーンアップを忘れずに行なうようにお願いします。

１　ドメインを登録する

では、まずはドメインを登録しましょう。

「Route53」から「開始する」

「ドメインを登録」を選んで「開始する」

もしくは、直接こちらから行っても大丈夫です。（「ドメインの登録」）

登録したいドメインを検索して、探してみましょう。

なお、「.link」でしたら年間５ドルのようです。

カートに入れて、「続行」

自身の連絡先を入れて、「続行」

テストで行う場合は、年間の自動更新をされないように、「無効化」を選択します。

登録契約に同意ができれば、チェックをして、「注文を完了」

すると、このように、注文が正常に送信された旨が表示されます。

こちらをみると、ドメインの登録の完了には最大３日かかるようです。

余裕を持って実施しましょう。

なお、登録が完了するとこのようなメールが届きます。

私の場合は、今回は20分程度で届きました。

２　ACMの登録を行う

では、「HTTPS」接続ができるようにするために、「SSL/TLS証明書」をリクエストしていきます。

ここで大事なのはリージョンを「バージニア北部」にすることです。

現時点では、後に実行するCloudFrontに対応しているのはこちらの「バージニア北部」です。

「パブリック証明書をリクエスト」を選択して「次へ」

「完全修飾ドメイン名」に取得した
を入れて、進みます。

更新ボタンを押すと、このように、リクエストができています。

このリクエストを選択します。

リクエスト直後はここが特に何もできていないと思います。

少し待ちます。

少し待って、下のように、「CNAME名」などが表示されましたら、「Route53でレコードを作成」を選択

「レコードを作成」を選択

すると、Route53の「ホストゾーン」を見ると、下のように「CNAME」ができていることがわかります。

（この時点では、確認しなくても大丈夫です。）

しばらくすると、「証明書」のステータスが「発行済み」になります。

私の時は１分くらいだったと思います。

もし、しばらく経っても保留状態なら、「ネームサーバー（NS）」が怪しい気がします。

そんな時は、こちらの記事を参考にしてみてください。

３　HTMLファイルを保存するS3を作成する

３ー１　バケットを作成する

では、HTMLファイルを保存する場所となるS3バケットを作成しましょう。

S3から「バケットを作成」

任意の「バケット名」を入力します。

下のようにチェックします。

なお、これにより、誰からでもアクセスができる状態に近づきます。

HPなどは誰からでもアクセスできますもんね。

なので、このバケット内には外部に公開したくない情報は絶対に入れないように、十分ご注意ください。

あとは、「バケットを作成」で下のようにバケットができました。

３ー２　ウェブサイトホスティングを有効にする

では、次にこのバケットにHTMLファイルを入れた時に、それがウェブサイトとして認識されるように設定をしていきます。

「プロパティ」の一番下に行きます。

「静的ウェブサイトホスティング」から「編集」

下のように設定します。

なお、「インデックスドキュメント」は独自の名前ではなく、「index.html」としてください。

３ー３　バケット内を公開状態にする

では、バケット内のファイルを公開状態にしましょう。

現在は、公開が可能な状態ですが、まだ公開はされていません。

「アクセス許可」の「バケットポリシー」で「編集」を選択

こちらを貼り付けましょう。

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

その上で、「Bucket-Name」の箇所をそのバケット名に変更しましょう。

ざっくりですが、このバケット内の全てのファイルについてオブジェクトの取得（GetObject）を許可しています。

「変更の保存」で変更を完了させると、下のように「パブリックにアクセス可能」となっています。

これで、外部からアクセスが可能になりました。

３ー４　HTMLファイルを格納する

では、バケット内に公開したいHTMLファイルを入れます。

ポイントとして、必ずファイル名は「index.html」としてください。

ドラッグして、「アップロード」を行います。

なお、テスト用のものを下に作ったので、よかったら使ってください。

一旦デスクトップなどに、「index.html」として保存すれば良いと思います。

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>Hello My Domain</title>
</head>

<body>
    <h1>Welcome to my site</h1>
    <p>This is my webpage</p>
</body>

</html>

<style>
    h1 {
        color: red
    }

    p {
        color: blue;
    }
</style>