備忘録的なもの

ブログのサイトホスティングを Cloudflare Pages に移すのとドメイン変更をやった

ブログのシステム構成（サイトホスティング周り）を弄ったのでやったことのメモ。

概要

これまでこのブログのサイトホスティングは GitHub Pages を使っていたのだが、 Cloudflare Pages を使っているというブログの記事を見かけて、読んだ感じ良さそうだったので切り替えてみることにした。

また、これに合わせて近々やりたいと思っていたサイトのドメインの変更も合わせてやった。 とある理由で独自ドメインのメールアドレスが欲しくなっていたのだが、 元のドメインが shida-ws.net で ws = WorkSpace という意図で取ったもので、メールアドレスとして使うには若干微妙に感じていたため。 （ブログのドメインとも合わせたかった）

ということで、この辺の作業でやったことのメモ。

記事の内容としては、次にまたサイトのホスティング、ドメインを切り替えることになった場合の参考情報にしたいので、 Cloudflare の設定方法等については軽く流す程度にして、コンポーネントの結合部分の話を中心に書いている。

全体図

変更前の全体図（ 以前書いた記事 から再掲）

構成変更前の全体図

変更後の全体図

構成変更後の全体図

作業

今回はこんな感じの流れでやった。

  1. GitHub Pages サイトでの準備
  2. Cloudflare Pages サイトの作成
  3. リダイレクト設定
  4. その他

正直アクセスもほとんど無い個人ブログなので断とかリダイレクトとか気にせず雑にやっても良かったが、 せっかくなので練習がてらちゃんと切り替えるならどうやるのが良いかというのを意識しつつやった。

GitHub Pages サイトでの準備

作業前の状態としては前述の変更前の図の通り、 Hugo リポジトリの main ブランチへのプッシュをトリガーにして、 GitHub Actions で Hugo ビルドを行い、 GitHub Pages 公開用のリポジトリにプッシュする様にしていた。

ただ Cloudflare Pages にも main リポジトリの状態をデプロイする様にすると色々と不都合がある（具体的には config.toml のドメイン設定やリダイレクト設定等）ので、 切り替え作業用のブランチを切って、これを GitHub Pages 公開用リポジトリへのプッシュ用にする。

  • 切り替え作業用ブランチ
    • GitHub Pages へのデプロイ時に使うブランチ（別途作成）
    • GitHub Actions のトリガーおよび公開用リポジトリにプッシュするブランチを main からこれに切り替え
  • main ブランチ
    • Cloudflare Pages へのデプロイに使うブランチ

ということで、 main ブランチから切り替え作業用ブランチを切って、以下のような感じで GitHub Workflow の設定を修正する。

❯ git diff HEAD^ -U100
diff --git a/.github/workflows/gh-pages.yml b/.github/workflows/gh-pages.yml
index 443e512..bb988fd 100644
--- a/.github/workflows/gh-pages.yml
+++ b/.github/workflows/gh-pages.yml
@@ -1,39 +1,39 @@
 name: GitHub Pages
 
 on:
   push:
     branches:
-      - main  # Set a branch to deploy
+      - maint/change-hosting  # Set a branch to deploy
   pull_request:
 
 jobs:
   deploy:
     runs-on: ubuntu-22.04
     permissions:
       contents: write
     concurrency:
       group: ${{ github.workflow }}-${{ github.ref }}
     steps:
       - uses: actions/checkout@v3
         with:
           submodules: true  # Fetch Hugo themes (true OR recursive)
           fetch-depth: 0    # Fetch all history for .GitInfo and .Lastmod
 
       - name: Setup Hugo
         uses: peaceiris/actions-hugo@v2
         with:
           hugo-version: '0.105.0'
           extended: true
 
       - name: Build
         run: hugo --minify
 
       - name: Deploy
         uses: peaceiris/actions-gh-pages@v3
-        if: ${{ github.ref == 'refs/heads/main' }}
+        if: ${{ github.ref == 'refs/heads/maint/change-hosting' }}
         with:
           deploy_key: ${{ secrets.BLOG_DEPLOY_KEY }}
           external_repository: goshida/blog-public
-          publish_branch: main
+          publish_branch: maint/change-hosting
           cname: blog.shida-ws.net

一応プッシュした後 GitHub Workflow が想定通りに動くことは確認しておく。

GitHub Workflow の動作確認

その上で、 Github Pages 公開用リポジトリで、実際に公開するブランチを main ブランチから切り替え作業用ブランチに変更する。 （やってから気付いたが、 publish_branch は main のままで良かったかもしれない）

GitHub Pages での公開ブランチの変更

ここまでで既存サイト側の準備は一旦終わり。

Cloudflare Pages サイトの作成

切り替え先に当たる Cloudflare Pages サイトを作成する。

まず、Cloudflare Pages にサイトをデプロイするにあたって、 Hugo リポジトリの main ブランチ側で2点修正しておく

  • GitHub Workflow の設定ファイル .github/workflow/gh-pages.yml の削除
  • Hugo の設定ファイル config.toml での baseURL の指定
diff --git a/.github/workflows/gh-pages.yml b/.github/workflows/gh-pages.yml
deleted file mode 100644
index 443e512..0000000
--- a/.github/workflows/gh-pages.yml
+++ /dev/null
diff --git a/.github/workflows/gh-pages.yml b/.github/workflows/gh-pages.yml
deleted file mode 100644
index 443e512..0000000
--- a/.github/workflows/gh-pages.yml
+++ /dev/null
@@ -1,39 +0,0 @@
-name: GitHub Pages
-
-on:
-  push:
-    branches:
-      - main  # Set a branch to deploy
-  pull_request:
-
-jobs:
-  deploy:
-    runs-on: ubuntu-22.04
-    permissions:
-      contents: write
-    concurrency:
-      group: ${{ github.workflow }}-${{ github.ref }}
-    steps:
-      - uses: actions/checkout@v3
-        with:
-          submodules: true  # Fetch Hugo themes (true OR recursive)
-          fetch-depth: 0    # Fetch all history for .GitInfo and .Lastmod
-
-      - name: Setup Hugo
-        uses: peaceiris/actions-hugo@v2
-        with:
-          hugo-version: '0.105.0'
-          extended: true
-
-      - name: Build
-        run: hugo --minify
-
-      - name: Deploy
-        uses: peaceiris/actions-gh-pages@v3
-        if: ${{ github.ref == 'refs/heads/main' }}
-        with:
-          deploy_key: ${{ secrets.BLOG_DEPLOY_KEY }}
-          external_repository: goshida/blog-public
-          publish_branch: main
-          cname: blog.shida-ws.net
-
diff --git a/config.toml b/config.toml
index 71f2712..a298a88 100644
--- a/config.toml
+++ b/config.toml
@@ -1,7 +1,7 @@
-baseURL = 'https://blog.shida-ws.net/'
+baseURL = 'https://blog.goshida.net/'
 theme = 'hugo-theme'
 title = 'SHIDALOG'
-copyright = "© 2022 shida."
+copyright = "© 2022 goshida."
 LanguageCode = "ja"
 hasCJKLanguage = true
 defaultContentLanguage = "ja"

修正が済んだら Cloudflare でアカウントを作ってサイトの設定をする。 とは言っても冒頭に書いた通り、本旨では無いので軽く流す程度。ざっくりとはこんな感じ。

  • ドメインの取得
  • Workers & Pages からサイトの設定
    • Cloudflare から GitHub のどのリポジトリへのアクセスを許可するか等を設定（ Integration の設定）
    • リポジトリやビルド方法（コマンド）等を設定
    • デプロイ
  • デプロイしたサイトのカスタムドメインとして、取得したドメインを設定

Cloudflare の GUI が結構親切で、メニューの場所さえ分かれば後は GUI の指示通りにやってればそこまで詰まるようなところは無かったと思う。 （Hugo のバージョン未指定でビルドしたらエラーが出たので指定方法を調べたくらい）

Cloudflare Pages のドメイン管理画面
ドメイン
Cloudflare Pages のデプロイ設定画面
デプロイ設定
Cloudflare Pages のカスタムドメインの設定画面
カスタムドメイン設定
Cloudflare Pages のWebサイトの一覧
できたもの

デプロイしたサイト blog.goshida.net に実際にアクセスしてざっと眺めて、問題なさそうなら切り替え先の準備も完了。

リダイレクト設定

ここまでで、 GitHub Pages にデプロイした旧ドメインのサイト blog.shida-ws.net と、 Cloudflare Pages にデプロイした新ドメインのサイト blog.goshida.net が両方見える状態になったので、 旧ドメインのサイトへのアクセスがあった場合に新ドメインのサイトにリダイレクトされる様に設定する。

今回の様な場合に使うリダイレクトについて、方法としては大きく分けて2種類ある。

  • サーバサイドリダイレクト
    • HTTP 301, 302 のステータスコードで応答して、クライアントに別リソースの再読込を指示する方法
      • Apache 等 HTTP サーバの設定や PHP 等、サーバサイドで実装される
  • クライアントサイドリダイレクト
    • HTTP 200 で応答したコンテンツの中身をクライアント（Webブラウザ）が解釈して再読込する方法
      • HTML のタグや JavaScript といった、クライアントサイドで動くプログラムとして実装される
    • 200 応答にも関わらず 301, 302 の様な動きをクライアントに要求する形になるので、間違っているわけではないが作法として若干微妙
      • W3C はヘッダしか見ないことも多い bot アクセス等も含めたアクセシビリティや、インターネット全体のリソース効率の観点から 301, 302 リダイレクトを推奨している 1
      • 各種検索エンジンでも、 301, 302 リダイレクトと同じように扱うかは実装次第

ということでサーバサイドリダイレクトの設定ができればその方が良いのだが、 GitHub Pages には 301, 302 リダイレクトを設定する手段が用意されてない。 2 そのため、 HTML の <meta http-equiv="refresh" 〜> や JavaScript の window.location.href() と言ったクライアントサイドでのリダイレクトを使うことになるが、 今回は <meta> タグを埋め込む方法でやった。（今回の様なサイト移転に伴うリダイレクトの場合 JavaScript よりは HTML でやった方が良さそうだったため）

自分の使っているテーマの場合、 HTML の <head> タグの中身を themes/hugo-theme/layouts/partials/head.html というテンプレートファイルにまとめているので、 そこに前述の <meta> タグを埋め込む形にした。 切り替えが済んだら消すこと前提なので、テーマ側のテンプレートを layouts/partials/head.html にコピー（オーバーライド）した上で、 以下の様な感じで1行修正する（ドメインもベタ書き）、という割とアドホックな方法でやった。

--- themes/hugo-theme/layouts/partials/head.html        2023-04-25 13:46:26.349995108 +0900
+++ layouts/partials/head.html  2023-06-16 09:40:31.962072142 +0900
@@ -5,6 +5,8 @@
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=yes">
 
+<meta http-equiv="refresh" content="0; url=https://blog.goshida.net{{ .RelPermalink }}">
+
 <title>{{ block "title" . }}{{ if not .IsHome }}{{ .Title }} - {{ end }}{{ .Site.Title }}{{ end }}</title>
 
 {{ with .Site.Params.author }}

これを切り替え作業用ブランチにプッシュすれば、旧ドメインへのどのパスにアクセスしても新ドメインの同じパスにリダイレクトされるようになる。

その他

その他関連してやったこと。

Google Search Console のアドレス変更ツール

Google Search Console にアドレス変更ツールというものがあり、 これはサイトのドメインを変更した場合もアクセス情報等を新しいドメインのプロパティに引き継がせるための機能になる。

特に引き継ぎたいわけでは無かったが、せっかくなのでこれも一応設定しておいた。

リダイレクト設定のところで HTML の <meta> タグを使ったリダイレクトを 301 リダイレクトと同じ様に扱うかどうかは検索エンジンの実装次第と書いたが、少なくともここでは同じ様に扱うらしい。

GooleSearchConsoleアドレス変更ツールの設定画面
GooleSearchConsoleアドレス変更ツールの検証画面
GooleSearchConsoleアドレス変更ツールの移行中画面

Keybase

前回の記事 で書いた通り自分は Keybase でサイト証明を行っているので、 main ブランチ側で keybase.txt を修正して、Keybase の設定にも追加した。

Keybase でのサイト証明を追加した画面

ちなみに既存のサイト証明の削除はクライアントアプリからでもブラウザからでも出来るが、ブラウザからやる場合は PGP の鍵を登録しておく必要がある。

Keybase でブラウザからサイト証明を削除しようとした場合の警告

GitHub Pages サイトの削除について

新ドメインのサイトへのリダイレクトの設定はしたものの、最初の方に書いた通り練習がてらでやったものなので GitHub Pages サイト blog.shida-ws.net の方はいつ削除しても良いっちゃ良い。 ただ GitHub Pages のサイト自体の維持に金がかかってるわけでも無いし shida-ws.net ドメインも別用途に使う予定なので、残してても良いっちゃ良い。

少し考えた結果、Google Search Console の様子を見ながら 1ヶ月くらいしたら消すことにした。 削除時の作業としては、

  • Hugo リポジトリの切り替え作業用ブランチの削除
  • GitHub 公開用リポジトリの削除
  • Google Search Console のプロパティを削除

くらいのはず。

余談

作業のところには書かなかったが、 Cloudflare の DNS 設定で気になったところについて。

Cloudflare のサイトのカスタムドメインの設定は、Cloudflare の画面上からはこんな感じで CNAME として設定されているように見える。

CloudflareのDNS管理画面

ただ、実際に問い合わせてみると CNAME は返ってこなくて A レコードしか見えない。

❯ dig blog.goshida.net cname +noall +answer

❯ dig blog.goshida.net +noall +answer
blog.goshida.net.       300     IN      A       172.67.196.216
blog.goshida.net.       300     IN      A       104.21.60.131

おそらく CNAME と言いつつ AWS で言うところの ALIAS レコードのようなもので、 画面のプロキシ済みというのがそういうことを意味してるんだろうとは思うが、 この辺はもう少し調べてちゃんと理解しておいた方が良さそう。

感想

作業自体はそれほど手間かかったわけではないが、やったことをちゃんと言語化しようとすると結構手間取った。

Cloudflare は今回 Pages と DNS 周りくらいしか触ってない（その中でも基本的なところだけ）が、 トラフィックの分析やアクセス制御、サーバレスアプリケーションの公開、等色々機能がある。 API も用意されてるっぽいので、この辺は追々触ってみたい。

参考

  1. Core Techniques for Web Content Accessibility Guidelines 1.0 ↩︎

  2. 正確には、 GitHub Pages サイトのカスタムドメイン公開に使われている CNAME ファイルを弄る形で <ユーザ名>.github.io から特定ドメインへの 301 リダイレクトは出来るが、自分の場合もともとカスタムドメインで公開していたのでその方法は使えなかった。 ↩︎