前回の記事で作ったHydrogenアプリですが、Netlifyなどにデプロイしても動かないようです。

デプロイの方法は、HydrogenがまだDeveloper preview段階のため、今後も変わりうるようですが、こちらにかかれています。今回は、Cloudflare Workersへのデプロイを試みます。こちらに記載の内容を捕捉した内容になります。

Cloudflare Workersとは？

https://workers.cloudflare.com/ です。

「サーバーレスアプリケーションを構築し、世界中に即座に展開することで、卓越したパフォーマンス、信頼性、拡張性を実現します。」と書いています。Netelify Functionsに近いサービスだと思います。

Cloudflare Workersのアカウント作成

上記URLから[Sing up]ボタンをクリックしてアカウントを作成します。

Eメールアドレスやパスワードを入力します。

サブドメイン名を入力します。これは後からでも変更できます。

送られてきたEメールで認証をおこないます。

KV asset handlerのインストール

「kv-asset-handler は、Cloudflare Workers の関数内で Workers KV からの静的アセットの取得を管理するオープンソースライブラリです。kv-asset-handler は Workers プロジェクトのデプロイ用コマンドラインツール Wrangler に含まれる機能である Workersサイト で使うために設計されています。」と説明されています。

$ npm insall @cloudflare/kv-asset-handler

又は

$ yarn add @cloudflare/kv-asset-handler

wrangler.tomlファイルの作成

ルートフォルダに以下の内容の wrangler.tomlファイルを作成します。

nameは、半角小文字で設定します。

name = "hydrogen-app"
type = "javascript"
account_id = ""
workers_dev = true
route = ""
zone_id = ""

[site]
bucket = "dist/client"
entry-point = "."

[build]
upload.format = "service-worker"
command = "yarn && yarn build"

worker.jsの変更

worker.jsを次のように変更します。assetHandler関数が追加され、それに関連した変更となっています。

import handleEvent from '@shopify/hydrogen/worker';
import entrypoint from './src/entry-server.jsx';
// eslint-disable-next-line node/no-missing-import
import indexHtml from './dist/client/index.html?raw';
import {getAssetFromKV} from '@cloudflare/kv-asset-handler';

async function assetHandler(event, url) {
  const response = await getAssetFromKV(event, {});

  if (response.status < 400) {
    const filename = url.pathname.split('/').pop();

    const maxAge =
      filename.split('.').length > 2
        ? 31536000 // hashed asset, will never be updated
        : 86400; // favico and other public assets

    response.headers.append('cache-control', `public, max-age=${maxAge}`);
  }

  return response;
}

addEventListener('fetch', (event) => {
  try {
    event.respondWith(
      handleEvent(event, {
        entrypoint,
        indexTemplate: indexHtml,
        assetHandler,
        cache: caches.default,
      })
    );
  } catch (error) {
    event.respondWith(
      new Response(error.message || error.toString(), {
        status: 500,
      })
    );
  }
});

package.jsonの変更

mainを追加します。

{
  "main": "dist/worker/worker.js",
:
:

wranglerのインストール

Cloudlare WorkersのCLIツールであるwranglerをインストールします。

$ npm i @cloudflare/wrangler -g

プロジェクトのデプロイ

次のコマンドでデプロイできます。

$ wrangler publish

https://hydrogen-app.pitang1965.workers.dev/