🐑

dockerのElm開発環境構築(開発サーバの動作のみ)

10 min read

前提

  • ホストPCにdockerVisual Studio Codeが入っている
  • Elmプロジェクトがすでにある
  • 各構成物についての細かい説明は書いていないです

使用したもの

場所 入れたもの 説明など
ホストPC内 docker
Visual Studio Code
Visual Studio Code Remote-ContainerVisual Studio Code拡張機能) docker環境内でVSCodeが使用できる
docker内 node17.0.1の公式イメージ 公式イメージリンク
Elm 0.19.1
elm-live 開発用サーバ

最終的な構成

リポジトリ

│  docker-compose.yml
│
├─.devcontainer
│      devcontainer.json
│
├─docker
│      Dockerfile
│
└─work
    └─Elmプロジェクト

ざっくり手順

1.「docker-compose.yml」を作成

  1. 以下のファイルを作成
version: '3.9'
services:
  app:
    build:
      context: .
      dockerfile: ./docker/Dockerfile
    
    volumes:
      - ./work:/work
      - /work/node_modules

    ports: 
      - "8000:8000"

普通のdocker-compose.ymlファイルです

build

context + dockerfileで指定

設定 説明
context docker-compose.ymlファイルがあるディレクトリを指定
dockerfile contextで指定したディレクトリから見たDockerfileの場所

https://matsuand.github.io/docs.docker.jp.onthefly/compose/compose-file/compose-file-v3/#build

volumes

appコンテナとホストのマウント設定

設定 説明
../work:/work ローカルの「/workディレクトリ」とappコンテナ内の「/workディレクトリ」
/work/node_modules 「node_moduleディレクトリ」が空にならないようにマウントする
https://castaneai.hatenablog.com/entry/2019/01/29/151257

https://matsuand.github.io/docs.docker.jp.onthefly/compose/compose-file/compose-file-v3/#volumes

ports

ポート設定

設定 説明
8000:8000 elm-liveが8000ポートにアクセスするとページを見られるようにしてくれるので、コンテナ側の8000ポートとホスト側の8000ポートをつなぐ

https://matsuand.github.io/docs.docker.jp.onthefly/compose/compose-file/compose-file-v3/#ports

2. dockerディレクトリを作成

├─docker
│      Dockerfile
  1. プロジェクトのルートディレクトリに「docker」ディレクトリを作成
  2. 「docker」ディレクトリ以下に「Dockerfile」を作成
FROM node:17.0.1-buster-slim

WORKDIR /work

RUN apt update && \
apt-get install sudo && \
yes | sudo apt install curl && \
curl -L -o elm.gz https://github.com/elm/compiler/releases/download/0.19.1/binary-for-linux-64-bit.gz && \
gunzip elm.gz && \
chmod +x elm && \
sudo mv elm /usr/local/bin/ && \
npm install --save elm elm-live && \
sed -i -e "s/\(ignoreInitial: true,\)/\1\n    usePolling: true, /g" /work/node_modules/elm-live/lib/src/watch.js

ENV PATH $PATH:/usr/local/bin

CMD /work/node_modules/.bin/elm-live /work/portfolio/src/Main.elm --start-page=index.html --host=0.0.0.0 -- --output=elm.js
設定 説明
RUN curl -L -o elm.gz https.. &&
gunzip elm.gz &&
chmod +x elm &&
sudo mv elm /usr/local/bin/
elmのインストール
https://github.com/elm/compiler/blob/master/installers/linux/README.md
npmではなく直接入れてますが特に意味はないです
RUN npm install --save elm elm-live elm-liveのインストール
RUN
sed -i -e
"s/(ignoreInitial: true,)/\1\n usePolling: true, /g"
/work/node_modules/elm-live/lib/src/watch.js
elmファイル変更時に自動更新させるため、一部ファイルを書き換え
https://github.com/wking-io/elm-live/issues/247
https://qiita.com/hibohiboo/items/c408649941019ac3d3b5#part1
ENV PATH $PATH:/usr/local/bin Elmのパスを通す
CMD /work/node_modules/.bin/elm-live
/work/portfolio/src/Main.elm --start-page=index.html
--host=0.0.0.0 -- --output=elm.js
起動時にelm-liveを動かす
「--host=0.0.0.0」はホストから「localhost:8000」に接続してページを見るために必要です
https://github.com/wking-io/elm-live/issues/224
Main.elmとindex.htmlは状況に合わせて変更してください

3. workディレクトリを作成

└─work
    └─Elmプロジェクト
  1. ルートディレクトリに「work」ディレクトリを作成
  2. 「work」ディレクトリにElmプロジェクトを入れる

5. VSCodeで今回作成したディレクトリを開く

  1. 「File」を押下
  2. 「Open Folder」を押下
  3. 今回作成したディレクトリを選択

4. Visual Studio CodeVisual Studio Code Remote-Containerを入れる

  1. Extensionsボタンを押下
  2. 検索窓に「remote-container」と入れる
  3. 「Remote-Container」を選択
  4. 上の図の矢印の場所あたりに「Install」ボタンをがあるので押下

5. 「.devcontainer」ディレクトリを作成

├─.devcontainer
│      devcontainer.json

「.devcontainer」ディレクトリはVisual Studio Code Remote-Containerの使用に必要です。

  1. 「.devcontainer」ディレクトリを作成
  2. 「.devcontainer」ディレクトリ以下に「devcontainer.json」を作成
{
	"name": "Existing Docker Compose (Extend)",
	"dockerComposeFile": [
		"../docker-compose.yml"
	],
	"service": "app",
	"workspaceFolder": "/work"
}
設定 説明
name 任意の名前
dockerComposeFile docker-compose.ymlファイルの場所
service どのコンテナをVSCodeで開くか
ここではdocker-compose.ymlで「app」コンテナを作成したので「app」にしています
workspaceFolder どのディレクトリをVSCodeで開くか
作業フォルダを開きたいのでElmプロジェクトのある「work」にしています

https://code.visualstudio.com/docs/remote/devcontainerjson-reference

6. dockerで開く

  1. 左下にある緑色の「><」を押下
  2. 「Reopen in Container」を押下

7. 待つ

少し時間がかかります。

8. 完成

  • 起動後localhost:8000に接続すると開発中のページが見られます
  • Main.elmファイルを変更すると自動でページを更新してくれます

elm-formatを動かす設定(構想)

動きませんが、動く予定だった設定を記載します

動く修正方法がわかったら追記する予定です

使用するもの

場所 入れたもの 説明など
docker内 elm-format フォーマッター
ElmVisual Studio Code拡張機能)

手順

1. docker-compose.ymlファイルに以下を追加

RUN npm install -save elm-format

elm-formatのインストールです

2. devcontainer.jsonファイルに以下を追加

	"extensions": [
		"Elmtooling.elm-ls-vscode"
	],
	"settings": {
		"[elm]": {
			"editor.formatOnSave": true
		},
		"elmLS.elmFormatPath": "/work/node_modules/elm-format/bin/"
	}
設定 説明
extensions ここに拡張機能のユニークIDを入れるとインストールしてくれます
Elmの拡張機能を指定しています
settings ここにsettings.jsonの項目を書いておくと設定してくれます
elmファイルを保存したときに自動でフォーマッターが走る設定elm-formatまでのパスを指定しています

参考

Discussion

ログインするとコメントできます