前回の記事 で紹介した当ブログの構成ですが、 GitHub Pages でホスティングしていた当ブログを S3 に移行しました。

SSL/TLS による HTTPS への対応や CloudFront による高速配信に対応しました。

また、設定方法などを画像付きでまとめました。

要約

  • Route53 でドメインを取得した
  • ホスティングサイトを GitHub Pages から AWS S3 に変更した
  • CDN は CloudFront
  • SSL 証明書は ACM
  • サブディレクトリの index.html が読まれず、Lambda@Edge でアクセス先を変更する処理を加えた

はじめに

当初は適当に公開できれば良いと思っていたのですが、以下の不満点が湧いてきました。

  • 独自ドメインに変更したい
    • デフォルトだと GitHub のアカウントと紐付けられてしまう
    • URL の github.io がしっくりこない
  • CDN を利用したい
    • 読み込みは速いほうが良さそう
    • 最近の検索エンジンでは重視されるらしい
  • username.github.io をブログに使用するのがもったいない気がする
    • 他の使い道もありそうなので…
    • GitHub アカウントを複数持つことは推奨されていない1
  • 1 GB 以上のサイトは不可2など、色々制限付き

普通に静的サイトをデプロイするなら Netlify が最強だと思います[要出典]が、この際なので機能が豊富そうな AWS を利用してみようと思いました。

ドメインの取得（Route 53）

Route 53 は DNS サービスですが、ドメインの取得も可能です。

他社サイトと比較すると割高になりますが、 AWS 上で一元管理できると楽なので 今回は Route 53 でドメインを購入しました。

他社サイトでドメインを取得した場合は追加でネームサーバを Route 53 に向ける設定が必要になります。

AWS コンソールの Route 53 から「ドメインを登録」押下で次のような画面が出てきます。

ドメインを選ぶ

AWS コンソールから Route 53 を選択し、画面の指示に従ってポチポチやると購入できます。

すぐにメールアドレスの認証用メールが届き、数十分後に完了メールが届きました。

S3 バケットの作成

S3 バケットで公開するには、独自ドメインと一致したバケット名を付ける必要があるようです。3

今回のように CloudFront を使用する場合は一致していなくても問題ない気もします。

追記: CloudFront を経由して公開する場合はバケット名は何でも良さそうです。

S3 バケットのままエイリアスレコードを登録する際にはドメイン名と完全一致している必要があるようです。

ホスティング設定

バケットを作成したら 適当な index.html ファイルをアップロードし、

プロパティタブから静的ウェブホスティングを有効に変更しておきます。

バケットポリシーの設定は後のステップで行われるため、次へ進みます。

SSL 証明書を取得（ACM）

AWS の ACM（AWS Certificate Manager） では SSL 証明書が取得できます。（無料、自動更新）

  1. ACM から「パブリック証明書のリクエスト」を選択
  2. 「証明書のリクエスト」
  3. ドメイン名に取得したドメイン名を入力
  4. 検証方法を選択

検証方法はどちらを選んでも大丈夫だと思います。

Route 53 で取得した場合は上の「DNS の検証」を選択すると、以下のようなボタンをクリックするだけで完了しました。

CloudFront を設定（HTTPS対応、読み込み高速化）

HTTPS の有効化と読み込み高速化のために CloudFront を設定します。

S3 に配置した静的データをオリジン（Origin）としてキャッシュさせることができます。

設定自体は意外とシンプルで、コンソールから CloudFront を選択し、

「Create Distribution」→ 「Get Started」 を選択します。

設定項目

主な設定項目は以下です。

  • Origin Domain Name
    • クリックするとプルダウンメニューが表示されるので、対象の S3 バケットを選択
  • Restrict Bucket Access
    • Yes を選択 （直接 S3 のバケットへアクセスされないように）
  • Origin Access Identity
    • 初回の場合は「Create a New Identity」を選択
  • Grant Read Permissions on Bucket
    • 「Yes, Update Bucket Policy」を選択
    • → 自動でバケットポリシーを設定してくれます！
  • Alternate Domain Names
    • 取得したドメイン名を入力します
  • Viewer Protocol Policy
    • Redirect HTTP to HTTPS を選択
  • SSL Certificate
    1. Custom SSL Certificate を選択
    2. 取得した SSL 証明書を設定

設定が終わり、ステータスが Deployed になったら Domain name を使ってアクセスしてみます。

正常にトップページが表示されていれば OK です。

自動ビルド・デプロイ用 GitHub Actions の設定

ファイルの置き場所を S3 にしたため、自動でビルド、アップロードするようにしておきます。

GitHub Pages に対応していた submodule は削除し、

前回の記事 で使用していた GitHub Actions の設定ファイルを次のように書き換えました。

.github/workflows/publish.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
name: deploy
on:
  push:
    branches:
      - main
jobs:
  deploy:
    runs-on: ubuntu-18.04
    steps:
      - name: Git checkout
        uses: actions/checkout@v2
        with:
          submodules: recursive

      - name: Configure AWS credentials
        uses: aws-actions/configure-aws-credentials@v1
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: ap-northeast-1

      - name: Setup hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: "0.82.1"

      - name: Build
        run: hugo --minify

      - name: publish
        env:
          DISTRIBUTION_ID: ${{ secrets.CFN_DISTRIBUTION_ID }}
        run: |
          aws s3 sync public s3://catengineer.net --delete
          aws cloudfront create-invalidation --distribution-id $DISTRIBUTION_ID  --paths "/*"

主な変更箇所は最後の publish の部分で、S3 へのアップロードと CloudFront のキャッシュ削除をしています。

secrets は適宜設定する必要があります。

Lambda@Edge を設定

サブディレクトリの index.html を読み込ませる

実は上述の設定のみだと、サブディレクトリ配下の index.html が正しく読み込まれません。

そこで、Lambda@Edge を使用して index.html へアクセスするよう変更します。

以下の公式の記事のコードをコピペしました。

以下に注意する必要がありました。

  • リージョンを us-east-1 変更しておくこと
  • Node.js 12.x を指定すること （デフォルトだと 14.x になっている）

Lambda@Edge を使用せずに解決する方法もあります。

CloudFront のオリジン設定にて、S3 の ホスティング先の URL を直接記述する方法です。(~.s3-website-~.amazonaws.com)

このようにすると自動で index.html を読み込んでくれますが、バケットを一般に公開する必要があるので注意が必要です。

Route 53 の設定

取得したドメインサイトにアクセスできるように設定していきます。

取得したドメイン名のホストゾーンを開き、レコードを作成します。

レコードタイプ A、 エイリアスを指定して 「CloudFront ディストリビューションへのエイリアス」を選択します。

対応する CloudFront のホスト名が表示されるので選択します。

「レコードを作成」を押すと設定完了です。

数十分後、取得したドメイン名で Web サイトにアクセスできるか確認します。

正常に読み込み、ページ遷移ができれば成功です。

取得したドメインに対して dig コマンドを実行するとDNSサーバにレコードが登録されたことがわかります。

$ dig catengineer.net

; <<>> DiG 9.10.6 <<>> catengineer.net
;; global options: +cmd
;; Got answer:
;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 11039
;; flags: qr rd ra; QUERY: 1, ANSWER: 4, AUTHORITY: 0, ADDITIONAL: 1

;; OPT PSEUDOSECTION:
; EDNS: version: 0, flags:; udp: 512
;; QUESTION SECTION:
;catengineer.net.		IN	A

;; ANSWER SECTION:
catengineer.net.	59	IN	A	13.225.170.112
catengineer.net.	59	IN	A	13.225.170.96
catengineer.net.	59	IN	A	13.225.170.58
catengineer.net.	59	IN	A	13.225.170.104

（略）

おわりに

今回は AWS に Hugo の静的サイトをホスティングするまでの設定についての記事になりました。

そろそろ猫について何か書きたいと思います。

  1. https://docs.github.com/ja/github/getting-started-with-github/types-of-github-accounts ↩︎

  2. https://docs.github.com/ja/pages/getting-started-with-github-pages/about-github-pages ↩︎

  3. https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/userguide/website-hosting-custom-domain-walkthrough.html ↩︎