dockerでsvelte開発環境を構築する

前提

最近、人気のwebフレームワークsvelte（スベルト）を使ってみようと思い、開発環境を作りました。

ホストOSにdockerとdocker-composeをインストール。
動作実行環境はmacOS Big Sur 11.4。

ファイル構成

projectディレクトリにソースコードを配置して、ホストOSとコンテナで共有します。

.
├── Dockerfile
├── docker-compose.yml
└── project

dockerファイルの作成

svelteはnodeで動きます。gitはsvelteのプロジェクト作成で使用。

FROM node:lts-alpine3.16

WORKDIR /project

RUN apk add git

docker-compose.ymlの作成

version: "3"
services:
  web:
    build: .
    tty: true
    volumes:
      - ./project:/project
    ports:
      - "8080:8080"

作業ディレクトリの作成

% mkdir project

docker起動

% docker-compose up -d

svelteインストール

コンテナ側で作業します。

% docker-compose exec web sh

プロジェクトを作成します。（公式ページ「Svelte の一番簡単な始め方」参考）
https://svelte.jp/blog/the-easiest-way-to-get-started

# npx degit sveltejs/template my-svelte-project
# cd my-svelte-project
# npm install

上述のnpxコマンドで警告が出たので、npmをバージョンアップ。

# npx degit sveltejs/template my-svelte-project
Need to install the following packages:
  degit
Ok to proceed? (y) y
> cloned sveltejs/template#HEAD to my-svelte-project
npm notice
npm notice New minor version of npm available! 8.11.0 -> 8.17.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.17.0
npm notice Run npm install -g npm@8.17.0 to update!
npm notice

# npm install -g npm@8.17.0

package.json編集
scriptsのstartを書き換えます。この設定でホスト側からwebアクセスできるようになる。

  "scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w",
-    "start": "sirv public --no-clear"
+    "start": "sirv public --no-clear --host 0.0.0.0"
  },

サーバ起動

起動後はcontrol+P+control+Qでdockerから抜けられる。

npm run dev

動作確認

webブラウザからhttp://localhost:8080にアクセス。
以下の画面が表示されれば成功。