🖥️

SvelteKit を Node.js 環境(GAE や Heroku)で動かす方法

2022/05/16に公開約2,000字

はじめに

今回は, 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

を設定してください.

image

これで render.com 上でも動くようになります.

https://render.com/docs/deploy-sveltekit

おわりに

netlify や vercel であればデフォルトの adapter-auto のままでもデプロイするだけで動くんですが Node.js の場合はちょっとひと手間必要ですね.

SvelteKit は adapter という仕組みが良くできていて, うまく活用することで様々な環境で手軽に動かせるようになっています!
今後も色々と触ってみて参考になりそうなことあがれば Tips として記事にしていこうと思います.

Discussion

ログインするとコメントできます