こんにちは。よっしーです(^^)
今日は、ローカルに作成したSvelteKitのプロジェクトをDokcerに移行する方法について解説しています。
背景
ローカルに作成したSvelteKitのプロジェクトをDokcerに移行する方法について調査する機会がありましたので、その時の内容を備忘として記事に残しました。
プロジェクトの作成については下記をご覧ください。
手順
下記の手順でDocker環境に移行しました。
mkdir svelte
mv SvelteKit svelte/app
rm -rf svelte/app/node_modules
touch svelte/app/Dockerfile
touch svelte/compose.yml
svelte/app/Dockerfile
FROM node:22.8.0-alpine3.19
WORKDIR /app
svelte/compose.yml
services:
svelte:
build: ./app
container_name: svelte
command: 'npm run dev -- --host'
ports:
- "5173:5173"
volumes:
- './app:/app'
tty: true
動作確認
下記のコマンドで動作確認をしました。
cd svelte
docker compose build
docker compose run --rm -it svelte npm install
docker compose up -d
ブラウザで「http://localhost:5173/」にアクセスして下図のようになれば成功です。
解説
svelte/app/Dockerfile
このDockerfileの一部分を解説させていただきます。
FROM node:22.8.0-alpine3.19
WORKDIR /app
FROM node:22.8.0-alpine3.19
:
- この行は、Dockerイメージのベースとして使用するイメージを指定しています。
node
は、Node.jsの公式イメージを使用することを意味します。22.8.0
は指定されたNode.jsのバージョンです。alpine3.19
は、軽量なAlpine Linuxの特定バージョン(3.19)をベースにしていることを示します。
WORKDIR /app
:
- この行は、Dockerコンテナ内の作業ディレクトリを
/app
に設定します。 - 以降のコマンド(COPYやRUNなど)は、このディレクトリを基準に実行されます。
ただし、指定されているNode.jsのバージョン(22.8.0)に関して一点注意が必要です。現在の最新の安定版Node.jsは20.x系列で、22.x系列はまだリリースされていません。したがって、実際の使用時には、存在するバージョン(例えば20.8.0など)に変更する必要があるかもしれません。
svelte/compose.yml
はい、このYAMLコードはDocker Composeファイルの一部です。特にSvelteアプリケーションのサービス定義を記述しています。各部分を詳しく解説します:
services:
svelte:
build: ./app
container_name: svelte
command: 'npm run dev -- --host'
ports:
- "5173:5173"
volumes:
- './app:/app'
tty: true
services:
: Docker Composeファイル内でサービス定義の開始を示します。svelte:
: このサービスの名前を「svelte」と定義しています。build: ./app
:
- Dockerイメージをビルドする際に使用するDockerfileの場所を指定します。
- この場合、カレントディレクトリの
app
フォルダにDockerfileがあることを示しています。
container_name: svelte
:
- 起動するコンテナの名前を「svelte」に設定します。
command: 'npm run dev -- --host'
:
- コンテナ起動時に実行されるコマンドを指定します。
- この場合、Svelteの開発サーバーを起動するコマンドです。
--host
オプションは、コンテナ外からのアクセスを許可するためのものです。
ports:
:
- ポートマッピングを定義します。
- "5173:5173"
: ホストの5173ポートをコンテナの5173ポートにマッピングします。
volumes:
:
- ボリュームマウントを定義します。
- './app:/app'
: ホストの./app
ディレクトリをコンテナ内の/app
ディレクトリにマウントします。- これにより、ホスト側でコードを編集すると、即座にコンテナ内に反映されます。
tty: true
:
- TTY(擬似ターミナル)を割り当てます。
- これにより、コンテナが終了せずに実行し続けることができます。
このDocker Compose設定は、Svelteアプリケーションの開発環境をコンテナ化し、ホストマシンとコンテナ間でのコードの同期、ポートフォワーディングなどを設定しています。開発者はホストマシンでコードを編集しながら、コンテナ化された環境でアプリケーションを実行できるようになっています。
おわりに
今日は、 SvelteKitのプロジェクトについて解説しました。
何か質問や相談があれば、コメントをお願いします。また、エンジニア案件の相談にも随時対応していますので、お気軽にお問い合わせください。
それでは、また明日お会いしましょう(^^)
コメント