0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Cloudflare+S3+CloudFrontでサブドメインを使ってHPを表示させる

Posted at

経緯

ムームードメインからドメイン更新料値上げのお知らせが来て、よくよく見ると今まで3000円+調整費だったものが3/3から5000円+調整費になると書いてありたまげる。わたしは立て看板的なリンク用サイトをやっているだけなので、さすがに年間5000円かけてドメインを維持するのは割に合わない。とはいえlit.linkやpotofuのような無料のリンクサイトサービスを使うのは、このインターネットサービス戦国時代不安が募らんでもない(といいつつお財布事情でわたしのように急にサイトURLを変更する人もいるのだが・・・)

先日Misskeyの自鯖を建てた時に新しいドメインを取ったので、もうこのドメインに一元化してしまうか~ということで、HP用にサブドメインを作成してCloudflareでMisskeyサーバ同様にDNS設定をすることにした。

やりたいこと
misskeyのサーバー用に取得したドメイン(salmonjerky.net)のサブドメインを作ってホームページを表示させる

準備するもの

・HPのHTML(もうある)
・独自ドメイン(取得済)
・AWS S3、CloudFront、ACM
・Cloudflare

手順

新しいS3バケットを作り静的ウェブサイトホスティング設定

今までのサイトで使っていたものとは別のS3バケットを作成し(バケット名をそのまま予定されたサイトドメインと同じにした)、HTMLのデータをアップロードして、静的サイトホスティングを有効にする
image.png
このバケットウェブサイトエンドポイントでやろうとしたがダメだった。詳しくは後述

とりあえずこの時点ではアクセス許可はすべて許可しない状態にしておく。あとでCloudFrontからのアクセスのみを許可するように自動で設定するため

CloudFront経由でアクセスを許可

CloudFrontに移動し、ディストリビューションを作成
image.png
この時バケットエンドポイントではなくウェブサイトエンドポイントを使用しろと言ってくるがぜんぜんバケットエンドポイントのままいく

オリジンアクセスはLegacyを選んでオリジンアクセスアイデンティティを新しく発行
image.png
この時に「はい、バケットポリシーを自動で更新します」を選ぶことで自動でS3バケットにアクセス許可ポリシーを付与してくれる

そのほかはデフォルトのキャッシュビヘイビアをHTTPS onlyにしたりするが基本特に変更はしなくてよい
(デフォルトルートオブジェクトをindex.htmlにするくらい)
SSL証明書はのちほど説明

awsのACMでSSL証明書を発行

ディストリビューションの一般>設定>編集に入る
image.png
CNAMEsと書いてあるところに今回使うサブドメインをいれる(sub.domein.net
とりあえず入力したらそのまま下のCustom SSL certificateの赤枠のところをクリックしてSSL証明書をリクエスト

画面の通りに進む
image.png
image.png
この「完全修飾ドメイン名」のところにさっきのサブドメインを入力sub.domein.net
他はデフォルトのまま「リクエスト」を押す

image.png
↑こういう画面になる(ステータスが保留中になる)

ドメインと書いてあるところを右の方にスクロールするとCNAMEの名と値が出るのでそれぞれコピーして、Cloudflareに移動し、DNSレコードを追加
image.png
↑この「名前」にさっきACMで出てきた「CNAME名」そしてターゲットに「CNAME値」をいれる。プロキシステータスはオフ。保存を押す

しばらくおいてACMの画面をリロードし、ステータスが「発行済」になっていることを確認
image.png

放置していたCloudFrontのディストリビューションの画面に戻ってきて
image.png
下矢印からカスタム証明書を選択。し、変更を保存する

image.png
ディストリビューションのトップに戻り、詳細のディストリビューションドメイン名をコピーしておく
(この時実際にディストリビューションドメイン名にアクセスしてサイトが表示されることを確認しておくとヨシ)

CloudflareでDNSレコードを追加してディストリビューションとサブドメインを繋ぐ

Cloudflareに戻ってきてDNSレコードを追加する
image.png
タイプはCNAME、名前に(ex:sub.domein.net)のsub部分、ターゲットにさっきのディストリビューションドメイン名のhttps://を除いた部分をペースト。プロキシステータスはオンにする

保存し、ブラウザのアドレスバーからサブドメイン(ex:sub.domein.net)にアクセスして表示されれば完了!

image.png
今回CloudFront経由にしたのはMisskeyサーバーの関係でCloudflareのSSL設定をフルにしているかららしい
(サイト側のSSL証明書を確認している)

おわり

たいしたことはしてないが備忘録として残しておく

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
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?