🐑

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

2021/10/31に公開

VS Code

前提

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

使用したもの

場所	入れたもの	説明など
ホストPC内	docker
	Visual Studio Code
	Visual Studio Code Remote-Container（Visual 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」を作成

以下のファイルを作成

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の場所

volumes

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

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

ports

ポート設定

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

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

├─docker
│      Dockerfile

プロジェクトのルートディレクトリに「docker」ディレクトリを作成
「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プロジェクト

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

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

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

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

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

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

├─.devcontainer
│      devcontainer.json

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

「.devcontainer」ディレクトリを作成
「.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」にしています

6. dockerで開く

左下にある緑色の「＞＜」を押下
「Reopen in Container」を押下

7. 待つ

少し時間がかかります。

8. 完成

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

elm-formatを動かす設定（構想）

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

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

使用するもの

場所	入れたもの	説明など
docker内	elm-format	フォーマッター
	Elm（Visual 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までのパスを指定しています