Cloudflare

はじめに この記事では、Hugo + PaperModで作成したブログをCloudflare PagesからCloudflare Workers Static Assetsへ移行した手順をまとめます。 今回はCodexに多くの作業を任せましたが、実行したコマンドや設定値を確認しながら進めました。この記事では、その過程で実際に行った作業を記録します。 主に行った作業は以下のとおりです。 wordpressからエクスポートしたxmlを添付して特定のコマンドを実行して記事を変換させること フォルダー名の変換 画像の整理とファイル名の調整 この記事で分かること PagesとWorkersの違い 移行前に確認する項目 Wranglerの設定方法 Hugoサイトのビルドとデプロイ方法 カスタムドメインを接続する方法 移行後に確認する項目 移行した理由 移行した理由としてはcloudflare workersの存在を知ったからです。codexから指示してcloudflare workersを使用してwebサイトの作成をしている動画を拝見しました。 その時私もcloudflare pagesを使用していたのでAIと対話してpageからworkersに移行すべきか聞いてみました。解答が以下ですね。 はい。CloudflareがWorkersへの移行を勧めている一番大きな理由は、PagesとWorkersで分かれていた仕組みを、 Workersという1つのプラットフォームに統合しているからと考えると分かりやすいです。Cloudflare自身も現在、 新規の静的サイト・SPA・フルスタックアプリはWorkers Static Assetsを使うことを推奨。 Pagesは引き続き動作するが、新機能・最適化はWorkersを中心に行う。 と明記しています。 ちなみにこの部分はCloudflareのPagesからWorkersへの移行ガイドを参考にしています。 と言ったわけでworkersに移行したほうが今後SEO対策が必要のないWebサイト(HP, Webアプリなど)を運営するにも便利だと思うので使ってみたいなと思いました。 せっかくなら他のwebサイトも作って試してみたいところですね。 移行前の構成 Gitリポジトリ ↓ Cloudflare Pages ↓ Webサイト 移行後の構成 Gitリポジトリ ↓ Hugoでビルド public/ ↓ Wranglerでデプロイ Cloudflare Workers Static Assets ↓ Webサイト この辺は完全にcodexに任せてたのでふわっとした理解になってますね… ...

Githubのアカウント作成とVScodeの拡張機能 いよいよGithubに自身の成果物をあげてCloudflareで表示させようと思います。まずはGithubのアカウント作成ですね。私は以前作成したので省きますが、もしアカウントを持っていなければアカウントの作成からしましょう。そこまで難しくはないと思います。 アカウントの作成が完了したらVScodeからGithubにアクセスしてログインします。この辺りで入れておくとよいVScodeの拡張機能があります。以前日本語の設定やCodexの導入をしましたが、同様にいくつかの拡張機能を入れておくと後で見やすくなると思います。個人的には以下ですね。 Git Graph (gitの履歴が追いやすくなる) Hugo Language and Syntax Support (Hugo独自の書き方をサポートする) Markdown All in One (Markdownで書く際に見やすくなる) Prettier - Code formatter (見た目がきれいになる、チームでやるときはよりよい) この辺りがあれば今後vscodeで記事を書く際でも管理が楽になります。もし今後他の開発をするのであればまだ入れるものもありますが。 Gitの操作 .gitignoreの作成 まずは.gitignoreというファイルを作成していきます。ここにはリポジトリにコミットする必要がないファイルを記載していきます。例えばこんな感じ。 最低限publicだけ書いていれば問題ありません。もし他に不必要なファイルがあればそれも併せて書いておくと良いと思います。私の場合はvscodeやcodexなどですね。 リポジトリとコミット というわけでまずはローカルでリポジトリの作成をしていきます。左側にあるタブからリポジトリを初期化するをクリックします。 最初のコミットメッセージは大体first commitだったりします。メッセージ自体は何でも大丈夫です。ただ、その前にpublicフォルダーが対象になってないか？だけは確認しておきましょう。不要なうえに大量のファイルがあるので制限に引っかかりやすくなります。 その後はローカルでコミットを行います。チェックマークを押してコミットをするか"・・・“からコミットがるのでそこからコミットしていきます。普通のコミット以外にもいろいろありますが一旦無視で大丈夫です。 ブランチの発行とリポジトリの表示 コミットが終わったらブランチの発行をしていきます。サインインの許可を求められるので許可しましょう。以下のように変更の欄に何もない状態になったらコミット完了です。Branchの発行をクリックします。 特に問題なければアクセス許可を進めていきましょう。 次にprivateかpublicかを確認されます。他の人に見せたくなければPrivate、成果物としてたくさんの人に見せたいものがあればPublicにします。もちろんPrivateにして招待制にしても問題ありません。私は特に気にしないのでPublicにしておきます。 Githubにアクセスして以下のような表示が出ればリモートリポジトリにPushされています。Gitはリモートとローカルの2つの概念があるのでややこしいですが、リモートの方に反映されていれば順調に進んでいることになります。 Cloudflareでデプロイ というわけで最後にCloudflareに接続していきます。まずはログインをしましょう。どのみちアカウント連携を行うので事前に接続しておくと良いと思います。 以下の画面が表示されたらWorkers&Pagesを選択して、Create applicationを選択します。 ここでは下の方にあるLooking to deploy pages? Get startedを選択します。 ここではすでにリモートへpush済みなので上の方を選択します。後はアカウントとリポジトリの設定をします。 その後はプロジェクトの設定ですね。FrameworkをHugoに設定して環境の設定をローカルと合わせます。これはpowershellを開いて"hugo version"を入力した時に出るものですね。 デプロイをしてこの画面が出れば完成です。URLから飛ぶと実際に表示されることがわかりました。 ただ、記事のタイトルで使用している画像が表示されず記事ページはWordpressのままになっています。 ...