svelteKit(TypeScript) & fastAPI(Python) & Dockerで開発環境構築　~svelteKit編~

Last updated at 2024-08-01Posted at 2024-07-31

今回はローカルの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を作成します。

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と連携できるようにしていこうと思います。
※よりわかりやすくこの記事は更新していけたらと思いますので、
よろしければ、いいねと保存おねがいします！

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

svelteKit(TypeScript) & fastAPI(Python) & Dockerで開発環境構築 ~svelteKit編~

前提

目標