npm i
envのファイル名を.envに変更して、各種の値を設定してください。
npm run dev
下記の変更により、src/routes/[category]/[article]/+page.svelteにある、comments.svelteが表示されます。
comments.svelteはコメントの投稿フォームや一覧を表示するコンポーネントです。
# .env
- PUBLIC_IS_USE_COMMENT="false"
+ PUBLIC_IS_USE_COMMENT="true"npm i -g wrangler
下記の<DATABASE_NAME>は任意の名前に置き換えてください。
wrangler d1 create <DATABASE_NAME>
上記のコマンドを実行すると、ローカルと本番環境でデータベースが作成されます。
また、ターミナルに以下のようなテキストが表示されるので、コピーしてください。
[[d1_databases]]
binding = "DB" # i.e. available in your Worker on env.DB
database_name = "<DATABASE_NAME>"
database_id = "ランダムな文字列"
_wrangler.tomlのファイル名をwrangler.tomlに変更して、手順3.でコピーしたテキストをペーストしてください。
下記の<DATABASE_NAME>は手順3.で設定した値と同様の値に置き換えてください。
wrangler d1 execute <DATABASE_NAME> --local --file=./schema.sql
npm run build
npm run d1
ターミナルに下記が表示された後にキーボードのbを押すことで、ローカルにデプロイされたアプリケーションをブラウザに表示できます。
[b] open a browser, [d] open Devtools, [c] clear console, [x] to exit
上記で開いたアプリケーションで、各記事に対するコメントの読み書きが確認できます。
手順7.でローカルにデプロイされたアプリケーションはホットリロードが効きません。 コードの変更を画面に反映させたい場合は、手順6.と手順7.の実行が必要です。
ターミナルで下記のコマンドを入力すると、ファイルの変更を監視できます。
npx vite build -w
ファイルの変更を監視した状態でファイルを変更して保存をすると、自動でビルドが実行されます。
下記のドキュメントを参照してください。
Cloudflare Pages • Docs • SvelteKit
Deploy a Svelte site · Cloudflare Pages docs
上の画像にあるビルドコマンドとビルド出力ディレクトリは、フレームワーク プリセットでSvelteKitを選択すると自動で設定される値で問題ありません。
併せてローカルの.envファイルで設定した各種の変数名と値を、環境変数（アドバンスド）にひとつずつ設定してください。
前述の記事に対するコメントの読み書き機能をローカルで有効にする手順の手順3. データベースを作成でデータベースを作成していない場合は、以下のコマンドを実行する前にデータベースを作成してください。
wrangler d1 execute <DATABASE_NAME> --file=./schema.sql
Cloudflare Pagesのアプリケーションごとの設定→Functionsのページに、D1 データベース バインディングという項目があります。
プロダクションタブに切り替えた状態で変数名をDB、D1 データベースは作成したデータベースを選択してください。
再デプロイが完了すると、本番環境でコメントの読み書きが可能になります。
以下のパスにパラメータを渡すと、下書き状態の記事のプレビューができます。
/preview?id={CONTENT_ID}&key={DRAFT_KEY}