Svelte入門：ローカルに作成したSvelteKitのプロジェクトをDokcerに移行する

今日は、ローカルに作成した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

1. FROM node:22.8.0-alpine3.19:

• この行は、Dockerイメージのベースとして使用するイメージを指定しています。
• nodeは、Node.jsの公式イメージを使用することを意味します。
• 22.8.0は指定されたNode.jsのバージョンです。
• alpine3.19は、軽量なAlpine Linuxの特定バージョン（3.19）をベースにしていることを示します。

1. 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

1. services:: Docker Composeファイル内でサービス定義の開始を示します。
2. svelte:: このサービスの名前を「svelte」と定義しています。
3. build: ./app:

• Dockerイメージをビルドする際に使用するDockerfileの場所を指定します。
• この場合、カレントディレクトリの app フォルダにDockerfileがあることを示しています。

1. container_name: svelte:

• 起動するコンテナの名前を「svelte」に設定します。

1. command: 'npm run dev -- --host':

• コンテナ起動時に実行されるコマンドを指定します。
• この場合、Svelteの開発サーバーを起動するコマンドです。
• --host オプションは、コンテナ外からのアクセスを許可するためのものです。

1. ports::

• ポートマッピングを定義します。
• - "5173:5173": ホストの5173ポートをコンテナの5173ポートにマッピングします。

1. volumes::

• ボリュームマウントを定義します。
• - './app:/app': ホストの ./app ディレクトリをコンテナ内の /app ディレクトリにマウントします。
• これにより、ホスト側でコードを編集すると、即座にコンテナ内に反映されます。

1. tty: true:

• TTY（擬似ターミナル）を割り当てます。
• これにより、コンテナが終了せずに実行し続けることができます。

このDocker Compose設定は、Svelteアプリケーションの開発環境をコンテナ化し、ホストマシンとコンテナ間でのコードの同期、ポートフォワーディングなどを設定しています。開発者はホストマシンでコードを編集しながら、コンテナ化された環境でアプリケーションを実行できるようになっています。

おわりに

今日は、 SvelteKitのプロジェクトについて解説しました。