今回はローカルのDocker環境でsvelteKitとfastAPIを使用し、
Webアプリをデプロイするまでの手順を投稿します。
この方法以外にもやり方は、いろいろあると思いますが、
検証済みの方法なので参考にして下さい。
今回はFE（フロントエンド）のsvelteKit編です。
前提
以下の項目に関しては、インストール済みorある程度の知識があるものとして進めます。
- node.js バージョン(22.2.0) - ローカルにインストール済み
- Docker Desktop - インストール済み
目標
今回、FE部分のみを作成し、BEとの連携部分いついては別記事で投稿することとします。
また、UIライブラリとして『Skelton』を使用してみようと思います。
- svelteKit(Typescript)でプロジェクトを作成
- UIライブラリ『Skeleton』の導入
- Dokcer環境構築
- Docker(Nodeコンテナ)にデプロイ
それでは、環境構築スタート！
1. svelteKit(Typescript)でプロジェクトを作成
この辺の手順は、記事がたくさんあると思うので、簡単にいきたいと思います。
また、svelteは公式サイトの分かりやすさが、私の一番のお気に入りポイントです。
皆さんも迷ったら公式をまず見ることをお勧めします。
公式と同じ手順を実行
npm create svelte@latest my-app
cd my-app
npm install
npm run dev
コマンドを実行したディレクトリ直下に"my-app"というプロジェクトを作成します
npm createを実行するとオプションを聞かれますが、基本的には"y"かEnterを押して、デフォルトで進めて問題ないです。
今回は、以下のように選択しました。
- template - skelton
- type checking - Yes
- additional options
npm run devを実行して、以下のURLでプロジェクトが表示できていたら、成功です。
http://localhost:5173/
UIライブラリ『Skeleton』の導入
続いてSkeltonを導入していきます。
こちらも迷ったら、公式を参照して下さい。
skeletonパッケージと Skeleton Tailwind pluginのインストール
npm i -D @skeletonlabs/skeleton @skeletonlabs/tw-plugin
TailWindのインストール
npx svelte-add@latest tailwindcss
npm install
TailWindとは？
CSSフレームワークで開発者がクラスを使って直接要素のスタイリングを行うことで、迅速かつ効率的にカスタマイズ可能なデザインを構築できます。
https://tailwindcss.com/
tailwindcssをインストールすると、typography pluginを使用するかと聞かれます。
これもどっちでもいいのですが、私はYesにしました。
※Typography pluginは、リッチテキストコンテンツ（ブログ記事、Markdownなどのコンテンツ）のスタイリングを簡単にするためのユーティリティを提供してくれます。今回は特に触れません。
標準ノード型定義をインストール
npm add -D @types/node
Tailwind configurationのセットアップ
tailwind.config.ts
+import { join } from 'path';
import type { Config } from 'tailwindcss';
+import { skeleton } from '@skeletonlabs/tw-plugin';
export default {
+ darkMode: 'class',
content: [
'./src/**/*.{html,js,svelte,ts}',
+ join(require.resolve(
+ '@skeletonlabs/skeleton'),
+ '../**/*.{html,js,svelte,ts}'
)
],
theme: {
extend: {}
},
plugins: [
require('@tailwindcss/typography'),
+ skeleton
]
} as Config;
テーマを追加
先ほど編集したtailwind.config.tsをさらに編集します。
import { join } from 'path';
import type { Config } from 'tailwindcss';
import { skeleton } from '@skeletonlabs/tw-plugin';
export default {
darkMode: 'class',
content: [
'./src/**/*.{html,js,svelte,ts}',
join(require.resolve(
'@skeletonlabs/skeleton'),
'../**/*.{html,js,svelte,ts}'
)
],
theme: {
extend: {}
},
plugins: [
require('@tailwindcss/typography'),
skeleton({
+++ themes: { preset: [ "vintage" ] }
})
]
} as Config;
テーマは公式サイトにある一覧から"vintage" を選択しました。
理由はなんとなくです。後からいくらでも追加変更できます。
app.htmlにテーマを追加
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head%
</head>
+ <body data-sveltekit-preload-data="hover" data-theme="vintage">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>
動作確認
npm run dev
以下のようにテーマが反映されているのが確認出来たらOK！
http://localhost:5174/
１つ簡単にできることをやってみました。
ダークモードの切り替えのボタンを実装してみます。
src/routes/+page.svelte でLightSwitchをインポートします。
<script>
import '../app.css';
+ import { LightSwitch } from '@skeletonlabs/skeleton';
</script>
+<LightSwitch />
<slot></slot>
デフォルトはライトモードです。
ボタンを押すと...
ダークモードの切り替わりました！（...ニヤニヤ）
Dokcer環境構築
いよいよデプロイへ向けたDokcer環境の構築手順です。
こちらの記事を参考に実施しましたのでこちらの記事にもいいねよろしくお願いします。
まずは、nodeコンテナ上で動作するように、nodeアダプターをインストールします。
npm install @sveltejs/adapter-node -D
そして、adapterを変更します。
-import adapter from '@sveltejs/adapter-auto';
+import adapter from '@sveltejs/adapter-node';
npm run devで正しく動作することを確認して下さい。
起動確認後、control + Cで停止しておきます。
Dockerfile作成
プロジェクトのルートにDockerfileを作成して以下のようにします。
# ビルド用
FROM node:22-slim as builder
WORKDIR /app
## パッケージをインストール
COPY package.json ./
COPY package-lock.json ./
COPY tsconfig.json ./
RUN npm ci
COPY . .
RUN npm run build
# 実行用
FROM node:22-slim
WORKDIR /app
## ビルド用のレイヤからコピーする
COPY --from=builder /app/build ./build
COPY --from=builder /app/package.json .
COPY --from=builder /app/node_modules ./node_modules
## Svelteが動く5173ポートを開けておく
EXPOSE 5173
CMD ["node", "./build"]
docker-compose.yml作成
同じく、プロジェクトのルートにdocker-compose.ymlを作成します。
version: '3.8'
services:
my-app:
image: svelte-app
build:
context: .
dockerfile: ./Dockerfile
environment:
- NODE_ENV=development
- PORT=5173
ports:
- 5173:5173
volumes:
- ./src:/app/src
- ./static:/app/static
- ./vite.config.js:/app/vite.config.js
- ./tsconfig.json:/app/tsconfig.json
- ./svelte.config.js:/app/svelte.config.js
Docker(Nodeコンテナ)にデプロイ
いよいよDockerコンテナで動かします！
docker-compose up --build
docker desktopで確認すると正常に動作していることがわかります。
実際にlocalhost:5173に接続してみます。
ダークモードへの切り替えも正常に行えているので良さそうですね！
終わりに
今回はとりあえず、Dockerで動作するところまで行うことができました。
次回はfastAPIをDockerで動作できるようにし、
今回作成した、svelteKitと連携できるようにしていこうと思います。
※よりわかりやすくこの記事は更新していけたらと思いますので、
よろしければ、いいねと保存おねがいします！