【保存版】AWS HTML・CSSで作ったウェブサイトをHTTPSで公開しましょう!(具体的な手順を書いています。)
こんにちは、CryptoGamesの高橋です。
クリスペというサービスを行っている会社です。
本日は静的ウェブホスティングを利用して、S3を使って静的ウェブサイトを公開します。
その上で、ACMやRoute53を使用して、HTTPS接続をしてみます。
なんだか難しそうですね。
ただ、手順を具体的に書いていますので、この通りにやっていけばできると思います。
はじめる前に
AWSのサービスには料金がかかります。
事前に確認を行い、テスト終了後はクリーンアップを忘れずに行なうようにお願いします。
1 ドメインを登録する
では、まずはドメインを登録しましょう。
「Route53」から「開始する」
「ドメインを登録」を選んで「開始する」
もしくは、直接こちらから行っても大丈夫です。(「ドメインの登録」)
登録したいドメインを検索して、探してみましょう。
なお、「.link」でしたら年間5ドルのようです。
カートに入れて、「続行」
自身の連絡先を入れて、「続行」
テストで行う場合は、年間の自動更新をされないように、「無効化」を選択します。
登録契約に同意ができれば、チェックをして、「注文を完了」
すると、このように、注文が正常に送信された旨が表示されます。
こちらをみると、ドメインの登録の完了には最大3日かかるようです。
余裕を持って実施しましょう。
なお、登録が完了するとこのようなメールが届きます。
私の場合は、今回は20分程度で届きました。
2 ACMの登録を行う
では、「HTTPS」接続ができるようにするために、「SSL/TLS証明書」をリクエストしていきます。
ここで大事なのはリージョンを「バージニア北部」にすることです。
現時点では、後に実行するCloudFrontに対応しているのはこちらの「バージニア北部」です。
「パブリック証明書をリクエスト」を選択して「次へ」
「完全修飾ドメイン名」に取得した
を入れて、進みます。
更新ボタンを押すと、このように、リクエストができています。
このリクエストを選択します。
リクエスト直後はここが特に何もできていないと思います。
少し待ちます。
少し待って、下のように、「CNAME名」などが表示されましたら、「Route53でレコードを作成」を選択
「レコードを作成」を選択
すると、Route53の「ホストゾーン」を見ると、下のように「CNAME」ができていることがわかります。
(この時点では、確認しなくても大丈夫です。)
しばらくすると、「証明書」のステータスが「発行済み」になります。
私の時は1分くらいだったと思います。
もし、しばらく経っても保留状態なら、「ネームサーバー(NS)」が怪しい気がします。
そんな時は、こちらの記事を参考にしてみてください。
3 HTMLファイルを保存するS3を作成する
3ー1 バケットを作成する
では、HTMLファイルを保存する場所となるS3バケットを作成しましょう。
S3から「バケットを作成」
任意の「バケット名」を入力します。
下のようにチェックします。
なお、これにより、誰からでもアクセスができる状態に近づきます。
HPなどは誰からでもアクセスできますもんね。
なので、このバケット内には外部に公開したくない情報は絶対に入れないように、十分ご注意ください。
あとは、「バケットを作成」で下のようにバケットができました。
3ー2 ウェブサイトホスティングを有効にする
では、次にこのバケットにHTMLファイルを入れた時に、それがウェブサイトとして認識されるように設定をしていきます。
「プロパティ」の一番下に行きます。
「静的ウェブサイトホスティング」から「編集」
下のように設定します。
なお、「インデックスドキュメント」は独自の名前ではなく、「index.html」としてください。
3ー3 バケット内を公開状態にする
では、バケット内のファイルを公開状態にしましょう。
現在は、公開が可能な状態ですが、まだ公開はされていません。
「アクセス許可」の「バケットポリシー」で「編集」を選択
こちらを貼り付けましょう。
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": [
"s3:GetObject"
],
"Resource": [
"arn:aws:s3:::Bucket-Name/*"
]
}
]
}
その上で、「Bucket-Name」の箇所をそのバケット名に変更しましょう。
ざっくりですが、このバケット内の全てのファイルについてオブジェクトの取得(GetObject)を許可しています。
「変更の保存」で変更を完了させると、下のように「パブリックにアクセス可能」となっています。
これで、外部からアクセスが可能になりました。
3ー4 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>
3ー5 ファイルが公開されているかを確認する
では、ウェブサイトとして適切に公開されているかを確認してみましょう。
「プロパティ」の静的ウェブホスティングを見てみます。
こちらにアクセスしてみましょう。
このように、アクセスができれば、問題なく公開設定ができていることがわかります。
4 CloudFrontでHTTPS接続を実現する
では、CloudFrontを利用して、今回なら、「https://ytakahashi.link」として接続できるようにしていきます。
「CloudFront」から「CloudFrontディストリビューションを作成」を選択
「オリジンドメイン」で、第3章で作成した、S3のバケットを選択します。
下の「Redirect HTTP to HTTPS」を選択して、HTTPで受け取った場合もHTTPSにリダイレクトするようにします。
「大体ドメイン名」に取得したドメイン名を入れます。
カスタムSSL証明書から第2章で作成済みの証明書を選択します。
最後に、「デフォルトルートオブジェクト」に「index.html」を入れて、「ディストリビューションを作成」
5 Route53でAレコードを作成する
では、最後に「ドメイン名」と第4章で作成した「ディストリビューション」を紐付けます。
「Route53」の「ホストゾーン」からドメイン名を選択
「レコードを作成」を選択
下のように「エイリアス」から次のように選択します。
ここで、ドメインと先ほどの第4章のCloudFrontのディストリビューションを紐づけています。
「レコードを作成」を選択
このように、Aレコードができました。
これで大丈夫なはずです。
6 表示を確認する
では、最後に表示を確認しましょう。
うまく行ってそうですね。
最後に
終わった後は、不要なものは必ずクリーンアップを行なってください。
料金が継続的にかかってしまうため、忘れないよう、十分ご注意ください。
今回は以上です。
最後まで、ありがとうございました。
サポートをしていただけたらすごく嬉しいです😄 いただけたサポートを励みに、これからもコツコツ頑張っていきます😊