AWS と GitHub Actions の勉強をかねて新しいブログサイトを構築することにした。

今回はHugo + CloudFront + S3でブログサイトを作成する。

初めはAWSのマネコンでぽちぽち操作をして、その後 terraform importで構成をTerraformに落とし込むことでIaC化することで、現実の操作内容とTerraformの中身を紐づくことができるのではないかと考えている。

技術構成は以下のようになった。

  • 静的ジェネレーターはHugo
  • CI/CDはGitHub Actions(ビルド担当)
  • S3は静的ファイルの格納場所
  • CloudFrontはCDNなのでここでwebに配信
  • 独自ドメインは元からCloudflareで取得済み

作るもの

アーキテクチャの全体像は以下の通り。

アーキテクチャ

ACMから証明書を発行してCloudflareに登録するところや,CloudFrontを利用してS3のバケットを参照させたり、CloudFront Functionsを用いてURLを変更するようにコードを書いて設定したりと初めのことも多かったのでとても楽しかった。

以下は学びになったAWSの操作を記載する。

ACMから証明書を発行してClaudflareに登録する

AWSにドメイン所有権を証明するために、ACMで証明書を発行 -> Cloudflareに登録の手順をやっていく。

  1. CLoudFrontが使用できるリージョンが us-east-1 なので、ACMのリージョンも us-east-1 にする。そして Request a certificate をクリック。

acm画面1

  1. 公開証明書でリクエストを作成する

acm画面2

  1. この記事に複数ホストも登録できると記載があったので *(アスタリスク) で登録した。

acm画面3

  1. CSVファイルをエクスポートして CNAME name と CNAME value を控えておく（コピーでも良い）

acm画面4

on ☸ admin on kubernetes-the-hard-way in default () ~/Downloads
♥ ❯ cat DNS_Configuration.csv
Domain name,CNAME name,Type,CNAME value
*.shooonng.com,_6e2510b7de5c2f6a659fa878d7fe59f2.shooonng.com.,CNAME,_1e50acc97e023be2f97dc14014edac0b.jkddzztszm.acm-validations.aws.%

on ☸ admin on kubernetes-the-hard-way in default () ~/Downloads
♥
  1. Cloudflareのサイトから DNS > Records でNameとValueを登録する。Proxyは外しておく。

acm画面5

acm画面6

CloudFrontの設定

  1. Free Plan > 任意のDistribution name > 作成したS3 バケットを指定してCloudFront Distributionを作成する。

cloudfront1

cloudfront2

cloudfront3

  1. Generalを選択して、CNAMEとACMで登録したSSL証明書を入力する。

cloudfront4

  1. 作成されたオリジンを選択して、OACを作成していない場合は Create new OAC から新しいOACを作成する。

cloudfront5

  1. 作成されたビヘイビアを選択して、以下項目を確認する。
  • Origin and origin groups (作成してs3のバケットが指定されている。)
  • Viewer protocol policy ( Redirect HTTP to HTTPS が指定されている。)
  • Allowed HTTP methods ( GET, HEAD が指定されている。)

cloudfront6

CloudFront Functionsを作成して、CloudFrontに設定する。

トップページは表示されるが記事のページにアクセスするとエラーになってしまったので、 CloudFront Functions を作成して、ディレクトリで終わるURLを index.html に書き換えることで、 S3 で静的サイトの pretty URL を正しく配信させる。

  1. CloudFrontの左タブからFunctionsを選択して、Create FunctionsからCloudFront Functionsを作成する。以下jsを記載する。

  2. CloudFrontの作成したディストリビューションからビヘイビアを選択して、 Function associations から作成したCloud FunctionsからCloud Functionsを選択する。

cloudfrontfunctions

あとがき

その他やったことははGitHub ActionsでCI/CDを設定したりした。

マネコンからS3作成、CloudFront作成、ACMで証明書発行など一連の操作をできて大変勉強になった。

次はこの設定をTerraformにimportしてIac化していく。