4
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?

astroで作成したサイトをCloudflare PagesからCloudflare Workersに移行する

Posted at

現在Cloudflare Pagesを使用することは推奨しておらず、Cloudflare Workersへの移行をするようにCloudflareが案内を出しています。

私はastroを使用して、Cloudflare Pagesにサイトをホスティングしていたのですが、Wokersでも同等以上の機能を使うことができるということで移行してみました。

移行ガイド
Cloudflareが移行ガイドを作成してくれていますので、これを参考にastroの場合はどのように移行するか見ていきます。

1.Wrangler設定ファイルの作成

Wrangler設定ファイルがない場合は作成します。

wrangler.jsonc

{
  "name": "portfolio-blog",
  "compatibility_date": "2025-06-23"
}

dist出力先の追加
Cloudflareダッシュボードでビルド構成を確認し、ビルド出力先をwrangler.jsoncに記載する。

{
  "name": "portfolio-blog",
  "compatibility_date": "2025-06-23",
  "assets": {
    "directory": "./dist"
  }
}

このファイルをリポジトリにPUSHしましょう。

2.Cloudflareコンソール上の設定

アプリケーションの作成

Wokersのアプリケーションを作成しましょう。

リポジトリのインポートを行おうとしても、アプリケーションの作成をすることができなかったので、まずGitHubとの連携をする必要があります。

テンプレートからアプリケーションを作成し、Astroテンプレートでアプリケーション作成を進めます。

GitHubアカウントとの連携で、まだ連携が済んでいない場合はGitHub連携を行います。

GitHub連携をすると、リポジトリのインポートをすることができます。

アプリケーション名はwrangler.jsoncのnameを同じ名前にしましょう。

ビルドの設定

Pagesで変数を設定している場合はビルド時に変数が参照できずビルドが失敗するので、ビルド設定に変数を追加しましょう。

私の場合はMicroCMSを使用してコンテンツ管理をしているので、MICROCMSAPIKEYとMICROCMS_SERVICE_DOMAINを変数として追加します。

DNSの設定

カスタムドメインを使用している場合はDNSの設定を行う必要があります。

ドメインのターゲットをWokersのアプリーケーション名にすることで設定ができました。

4
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
4
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?