【2023年版】Cloudflare PagesにSveltekitをデプロイする方法
はじめに
こんにちは。私たちの開発するアプリケーションは現在Sveltekitで作成されており、Cloudflare Pagesにデプロイする形で開発しているのですが、そうするときに少し面倒なところだったり、手間取ったところがあったので記事にできたらなと思いました。
SveltekitやCloudflare Pagesについてはみなさんご存知かと思いますので、割愛します。
ちなみにWrangler CLIは利用しないのでインストールしなくても結構です。
Sveltekitでプロジェクト作成
まずはプロジェクトを作成していきましょう。
npm init svelte@latest [PROJECT_NAME]
[PROJECT_NAME]にはあなたのプロジェクト名を入力してください。
もちろんディレクトリ名になるので、英小文字で入力するのが良いと思います。
そうするといくつか質問されますので、自分なりに答えてください。
また、テストをしたいのでSkeletonとかではなくDEMO Appにしておいてください。
そうするとプロジェクトディレクトリが作成されますのでcdしておいてください。
次にCloudflare Pages用のアダプタをインストールしましょう。
npm uninstall @svelte/adapter-auto
npm install @svelte/adapter-cloudflare
そして、svelte.config.jsの1行目を以下のように編集しましょう。
import adapter from '@sveltejs/adapter-cloudflare'
これでプロジェクトのセットアップは完了です。
一回テストで見て見たい方は
npm run dev
で開発サーバを立ち上げてみてみましょう。
2. GitHubでリポジトリ作成
適当にリポジトリを作成しましょう。
作成できたら、ディレクトリのGitをinit&pushしときましょう。
git init
git remote add origin https://github.com/[username]/[repository]
git commit --allow-empty -m "Initial commit!"
git add .
git commit -m "はじめの一歩"
git push origin
3. Cloudflare Pagesの作成
pushできたら、Pagesを作成しましょう。
ダッシュボードに移動し、Pagesに飛びます。
そうしたらGitに接続を押して、
アカウントとリポジトリを紐づけて設定しましょう。
そうしたらビルド設定を以下のように埋めてください。
できたら、プロジェクトを作成しましょう。
初回ビルドが完了したら成功です。
ビルド終了後、少しページが表示されるまでに時間がかかるので、表示がされなければ待ちましょう。
おわりに
今回はSveltekitのセットアップ方法を紹介しました。
Cloudflare PagesはSveltekit以外にも、ほとんどのフレームワークをデフォルトでサポートしているので、とてもおすすめです。
NODE_VERSION環境変数を設定しないとデプロイされないのが注意です。
Discussion