Docker 上で Svelte 開発環境を構築する

Docker を使って建てた仮想コンテナ内で Svelte の開発環境を構築する方法をご紹介します。

Docker の導入は済んでいるものとします。

Docker とは

「コンテナ」と呼ばれる仮想環境を作成したり編集したりすることができるものです。

仮想環境を作ることで、物理的な制約とは無関係な仮想的な環境で作業をすることができます。

「イメージ」と呼ばれるものを元にしてコンテナを作成します。

  関連記事【Docker】Windows 10 Home で Docker をセットアップ

Svelte とは

JavaScript のフレームワークです。

初版が 2016 年と、React や Vue と比べても比較的新しいものです。

HTML、JavaScript とほぼ同じコード形態で書けるために学習コストが少なく、

シンプルに書けることが特徴です。

その名前の表す通り、ミニマムな印象です。

関係ないですが、読み方は英語読みだと「スヴェルト」。

私はラテン語風に「スウェルテ」と読むのが好きです。

  関連記事ライブラリとフレームワークの違い

戦略

目的は「Docker コンテナ内で Svelte 関連ファイルを編集して、コンテナ内で立ち上げた localhost に接続したら変更が反映されている」ことです。

つまり、コンテナ内で vi エディタなどを使ってファイルを編集し、

npm run devコマンドで localhost 立ち上げをし、ブラウザでそこに接続します。

そうすることでホストOS内のファイルを編集することなく、Svelte をいじれます。

手順

コンテナ外部の操作

まずは Svelte を導入します。

プロジェクトのディレクトリ名（最後の引数）は任意です。

$ npx degit sveltejs/template svelte-docker-test

$ cd svelte-docker-test

コンテナ内でnpx degitしようとするとdegitがエラーになってしまったので、

いったんローカルに初期ファイルを置いて、それを Docker コンテナ内に移すことにしています。

次にプロジェクトのディレクトリ以下で、イメージ作成のための Dockerfile を作成します。

Dockerfile
1
# Node.js のイメージを元にする
2
FROM node:14-alpine
3

4
# コンテナ内の作業ディレクトリ
5
WORKDIR /usr/src/app
6

7
# ローカルのファイルをコンテナ内にコピー
8
COPY rollup.config.js ./
9
COPY package*.json ./
10

11
# 必要なパッケージをインストール
12
RUN npm install
13

14
# ローカルのファイルをコンテナ内にコピー
15
COPY ./src ./src
16
COPY ./public ./public
17

18
# コンテナ内でポートを公開
19
EXPOSE 5000
20

21
# 環境変数でホストアドレスを指定
22
ENV HOST=0.0.0.0

参考：How to put a Svelte app in a docker container?

このファイルを元にイメージを作成します。

svelte-imageの部分はイメージ名で、任意です。

$ docker build -t svelte-image .

docker imagesコマンドでイメージが作成されたことを確認します。

続いて、このイメージを元にコンテナを作成します。

$ docker run -p 5000:5000 --name svelte-container svelte-image

--nameオプションでコンテナに名前（svelte-container）をつけています。

-pオプションではホストOSのポートとコンテナ内部のポートを接続しています。

docker psでコンテナが起動していることを確認してください。

コンテナ内部の操作

続いて、コンテナ内部に入ります。

$ winpty docker exec -it svelte-container sh
/usr/src/app # 

私は Git Bash を使っているので、先頭にwinptyをつけました。

最後の引数は使用するシェルで、bash だとエラーになるので sh を指定しました。

localhost を立ち上げます。

/usr/src/app # npm run dev

> svelte-app@1.0.0 dev /usr/src/app
> rollup -c -w

rollup v2.26.6
bundles src/main.js → public/build/bundle.js...
LiveReload enabled
created public/build/bundle.js in 833ms

[2020-08-28 12:00:00] waiting for changes...

> svelte-app@1.0.0 start /usr/src/app
> sirv public "--dev"

  Your application is ready~! �

  - Local:      http://0.0.0.0:5000
  - Network:    http://172.17.0.2:5000

────────────────── LOGS ──────────────────

ブラウザからlocalhost:5000に接続すると、スタート画面が表示されます。

（表示されている２つの URL ではいずれもうまく接続できませんでした。）

ファイルの編集

ファイルの編集もコンテナ内から行います。

ターミナルをもう一つ立ち上げてコンテナ内に入るか、サーバを停止します。

試しにmain.jsを編集してみます。

/usr/src/app # ls
node_modules       package.json       rollup.config.js
package-lock.json  public             src
/usr/src/app # cd src
/usr/src/app/src # ls
App.svelte  main.js
/usr/src/app/src # vi main.js

エディタは vi/vim になると思います。

vim が入っていなかったらapk add vimコマンドなどでインストールできます。

main.js を編集します。

main.js
1
import App from './App.svelte';
2

3
const app = new App({
4
        target: document.body,
5
        props: {
6
                name: 'world'
7
                name: 'svelte'
8
        }
9
});
10

11
export default app;

このように編集して再度npm run devコマンドを打つ（別のターミナルで編集した場合はページをリロードする）と、変更が反映されます。

これでコンテナ内のコードをいじりまくっても、ローカルにはまったく影響なく開発できるようになります！

お役に立てれば幸いです。

では