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

スポンサーリンク
Svelte入門:ローカルに作成したSvelteKitのプロジェクトをDokcerに移行する 環境構築
Svelte入門:ローカルに作成したSvelteKitのプロジェクトをDokcerに移行する
この記事は約5分で読めます。
よっしー
よっしー

こんにちは。よっしーです(^^)

今日は、ローカルに作成した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のプロジェクトについて解説しました。

よっしー
よっしー

何か質問や相談があれば、コメントをお願いします。また、エンジニア案件の相談にも随時対応していますので、お気軽にお問い合わせください。

それでは、また明日お会いしましょう(^^)

コメント

タイトルとURLをコピーしました