はじめに
今回は, SvelteKit を Node.js 環境で動かす方法について紹介します.
Google App Engine(GAE) や Heroku, render.com といった Node.js 環境のある PaaS 系サービスで SvelteKit を動かす際の参考になるかと思います.
Step 1. adapter-node を追加する
まず, SvelteKit のプロジェクトに adapter-node という Node.js 上で動かせるようにするための adapter を追加します.
以下のコマンドで追加できます.
% npm i -D @sveltejs/adapter-node@next
もしくは
% yarn i @sveltejs/adapter-node@next --dev
Step 2. svelte.config.js で使っている adapter を node に変更する
デフォルトだと adapter-auto を参照していると思うのですが, そこを adapter-node に変更します.
- import adapter from '@sveltejs/adapter-auto';
+ import adapter from '@sveltejs/adapter-node';
これで npm run build すると Node.js で動かせる状態でビルドされた結果が build ディレクトリに出力されるようになります.
Step 3. start コマンドを追加する
package.json に start コマンドを追加します.
"scripts": {
...
"build": "svelte-kit build",
"start": "node build/index.js",
"package": "svelte-kit package",
...
},
これでデプロイ後に Node.js 上で SvelteKit が動くようになります.
Step 4. ローカルで確認してみよう
以下のコマンドで動作確認をしてみましょう!
% npm run build && npm run start
http://localhost:3000 が立ち上がって問題なく動いていれば PaaS の Node.js 環境にデプロイしても問題なく動くようになっています!
Step 5. PaaS にデプロイする
それぞれの環境で少しだけセットアップ方法が違います.
Google App Engine の場合
5 GAE 環境や Heroku 環境にデプロイ
gae.yaml で Node.js 用の環境を設定した上で npm run build したあとに,
gcloud app deploy してデプロイすれば GAE で動くようになります.
Heroku の場合
そのままデプロイするだけで動きます!
render.com の場合
render.com は, ちょっとだけセットアップが必要です!
npm の場合は
- Build Command に
npm install && npm run build - Start Command に
npm start
yarn の場合は
- Build Command に
yarn && yarn build - Start Command に
yarn start
を設定してください.
これで render.com 上でも動くようになります.
おわりに
netlify や vercel であればデフォルトの adapter-auto のままでもデプロイするだけで動くんですが Node.js の場合はちょっとひと手間必要ですね.
SvelteKit は adapter という仕組みが良くできていて, うまく活用することで様々な環境で手軽に動かせるようになっています!
今後も色々と触ってみて参考になりそうなことあがれば Tips として記事にしていこうと思います.
Discussion