Cloudflare workersでsvelteをデプロイする手順

Cloudflare workersでsvelteをデプロイする手順のメモ。

Cloudflareのアカウント作成と設定

Cloudflareにアクセスしてアカウント作成。

Cloudflareから割り振られるサブドメインで運用したい場合、ドメインに登録したメールアドレスが含まれるので下記手順で変更。

ダッシュボード左メニューの「Workers&Page」→サブドメインの「変更」をクリックし、リンク先から変更する。

また、同じページにアカウントIDも書かれているので後で使う。

Svelteの設定

アダプタの追加と設定

SvelteKitの開発環境が整っている状態で、コマンドプロンプトでプロジェクトのルートに移動し、Cloudflare workers用のアダプタを追加。

npm i -D @sveltejs/adapter-cloudflare-workers

svelte.config.jsのadapterを「adapter-auto」から「adapter-cloudflare-workers」に変更。

import adapter from '@sveltejs/adapter-cloudflare-workers';

export default {
    kit: {
        adapter: adapter()
    }
};

wrangler.tomlの設定

プロジェクトのルートに「wrangler.toml」という名前でファイルを作成。

下記内容を書く。

name = ""
account_id = ""

main = "./.cloudflare/worker.js"
site.bucket = "./.cloudflare/public"

build.command = "npm run build"

compatibility_date = "2021-11-12"
workers_dev = true

にアプリの名前で何でもOK。ここで設定した名前に、先程変更したサブドメインがくっついたURLがアプリのURLになる。

は、先程ダッシュボードに書かれていたアカウントIDを書く。

Node.js五感を有効にする場合は、下記も追加。

compatibility_flags = [ "nodejs_compat" ]

.gitignoreに追加

CloudflareのCLIツールを使ってデプロイすると、「.cloudflare」というフォルダが作成されるので.gitignoreに下記を追加。一応「wrangler.toml」も。

.cloudflare
wrangler.toml

wranglerのインストール

Cloudflare用のCLIツール「wrangler」を導入していない場合はインストール。

npm i -g wrangler

Cloudflareにログイン

wrangler login

ウェブブラウザが立ち上がるので、Cloudflateにログインし、「Allow」をクリック。

Cloudflareにデプロイ

下記コマンドでSvelteのbuild（wrangler.tomlのbuild.commandを実行してくれる）とCloudflareへのデプロイが完了する。

wrangler deploy

デプロイ完了後のログにアクセスできるURLが表示されるので、それにアクセスすると表示される。