Cloudflare Pagesで公開する

ここでは、作ったサイトをCloudflare Pagesにデプロイする方法を見ていきます。GitHub Pagesで公開してしまった場合はこれをする必要はありません。GitHub Pagesからこちらに移転する場合は、特に特別な操作を行わなくても公開自体はできると思います。このページは、Svelteの公式サイトの内容を元に書かれているので、そちらも参考にしてみてください。

0.はじめに

まずは、Cloudflareのアカウントを作成してください。ブラウザでCloudflareと検索すれば、上の方に出てくると思うのでそこから作成できます。

1.adapter-cloudflareの使用

まずは、以下のコマンドを実行してadapter-cloudflareをインストールしてください。

npm i -D @sveltejs/adapter-cloudflare

できたら、プロジェクトのルートにあるsvelte.config.jsの内容を以下のものに書き換えます。

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

/** @type {import('@sveltejs/kit').Config} */
const config = {
	kit: {
		adapter: adapter({
			// See below for an explanation of these options
			config: undefined,
			platformProxy: {
				configPath: undefined,
				environment: undefined,
				persist: undefined
			},
			fallback: 'plaintext',
			routes: {
				include: ['/*'],
				exclude: ['<all>']
			}
		})
	}
};

export default config;

ここまでできたら、変更をリモートに反映しておきましょう。次のコマンドを順番に実行してください。

git add --all

git commit -m "何らかのコミットメッセージ"

git push origin HEAD

2.Cloudflare Pagesにデプロイする

アカウントを作った後、この画面が表示されている人は、赤丸をつけた始めるの部分を押してください。

そうでない人は、トップページの右上にある追加のボタンから、Pagesを選択してください。

そうしたら、既存のGitリポジトリをインポートするを選んでください。

この画面から、デプロイするリポジトリを選択してください。

そしたら、次の画面で下の画像のように入力して、保存してデプロイするを押してください。プロジェクト名はそのままで大丈夫だと思います。フレームワークプリセットでSvelteKitを選べば、下の2つは勝手に入力されます。

うまく行けば、https://(プロジェクト名).pages.dev/で作ったサイトが公開されていると思います。

※自分でやってみたら、Error: Failed to publish your Function. Got error: Unknown internal error occurred.と言われてしまいました、デプロイを再試行してみたら治りました。

3.Cloudflare Pagesの設定

このままでも大丈夫ではありますが、大人数で開発するときに月500回のビルド制限に引っかかるのが心配な人は、mainブランチ以外にpushしたときにプレビューがデプロイされるのを止めておきましょう。

プロジェクトの設定画面を開いて、ブランチコントロールの鉛筆ボタンを押しましょう。

プレビューブランチをなしにすれば、main以外のブランチにpushしたときにデプロイされなくなります。