シンセイサクシツ ログ > Cloudflare > 自サイトをSSGでの仕様に変更
Posted： Cloudflare Javascript Next.JS

自サイトをSSGでの仕様に変更

NEXT.JS

自サイトのプロジェクトを GitHub リポジトリから Cloudflare Workers に自動デプロイするために、OpenNext 使わないといけないと勘違いしていた。

そのため本体 SSG（静的ページ） の予定だったのに output: ‘export’ にしているとエラーが出たので SSR でデプロイしていた。

でも、GitHub リポジトリから Cloudflare Workers へ SSG でデプロイする方法が分かったので、OpenNext をやめることにした。

そもそもプロジェクトのエントリーポイントや wrangler.jsonc の設定について、理解ができていなかったことが原因だった。

wrangler.jsonc に main と assets 設定

// wrangler.jsonc

{
  "name": "project-name",
  "main": "src/index.ts",
  ...
  "assets": {
    "directory": "out",
    "binding": "ASSETS",
  },
  ...
}

// src/index.ts エントリーポイント

export default {
  async fetch(request: Request, env: Env) {
    const url = new URL(request.url);

    // アセットを取得
    let response = await env.ASSETS.fetch(request);

    return response;
  },
} satisfies ExportedHandler<Env>;

interface Env {
  ASSETS: Fetcher;
}

Fetcher の型宣言がなかったのでエラーが出たが、@cloudflare/workers-types をインストールすることで無事に動くようになった。

Next.js で SSG にすると out ディレクトリに書き出されるので、wrangler.jsonc の assetsで、その out ディレクトリ を設定すると Workers へデプロイされた。

エントリーポイントのことも、あまり分かっていなかったが、URLへのリクエストに対して、ここで最初に処理をすることができるようだ。

この src/index.ts の部分で色々な処理が出来そう。

404ページの表示

404ページも用意していたのだが表示されなかった。wrangler.jsonc で not_found_handling を追加して解決できた。

// src/index.ts エントリーポイント

{
  "name": "project-name",
  "main": "src/index.ts",
  ...
  "assets": {
    "directory": "out",
    "binding": "ASSETS",
    "not_found_handling": "404-page" // ←追加
  },
  ...
}

Cloudflare Workers でつまずいている1番の問題は、ローカルの環境である程度ページが出来ていたので、Cloudflare Workers へのデプロイ部分を AI まかせにし、なるべく手間かけないで済ませようとドキュメントを全然読んでいないことだった。

とはいえ、先にドキュメント読んでても、その時はよく分からないのも事実…

この記事を書いている今だからの考えだけど、OpenNext だと SSG できないわけじゃなく、wrangler.jsonc の設定の理解がなく main と assets の項目が間違っていただけだと思う。

参考URL

ページの先頭へ