フロントエンド開発で人気(だと思う)の
Svelte を使ってWebアプリを開発したい方へ。
この記事では
- Svelteプロジェクト作成
- Docker環境構築
- 開発サーバー起動
までを一気に解説します。
今回の構成
SvelteKit + Docker
動作環境
Node.js 20系
Docker
Docker Compose
1 Svelteプロジェクト作成
まずはプロジェクトを作成します。
npm create svelte@latest my-app
質問が出るので
Skeleton project
TypeScript（任意）
ESLint（推奨）
ディレクトリ移動
cd my-app
依存関係インストール
npm install
2 ローカルで動作確認
npm run dev
アクセス
http://localhost:5173
localhost
ここで画面が出ればOKです。
3 Docker化する
ここからが本題です。
Dockerfile作成
FROM node:20WORKDIR /appCOPY package*.json ./
RUN npm installCOPY . .EXPOSE 5173CMD ["npm", "run", "dev", "--", "--host"]
docker-compose.yml作成
version: "3.9"services:
svelte:
build: .
ports:
- "5173:5173"
volumes:
- .:/app
- /app/node_modules
command: npm run dev -- --host
4 Dockerで起動
docker compose up --build
アクセス
http://localhost:5173
localhost
5 よくあるエラー
ポートにアクセスできない
--host
をつけないと外部アクセスできません。
node_modules問題
/app/node_modules
をボリューム除外しないとエラーになることがあります。
6 本番ビルド
npm run build
プレビュー
npm run preview
まとめ
Svelteの開発環境構築は
1 プロジェクト作成
2 npm install
3 Docker化
4 docker compose up
で完了します。
コメント