elmをdockerでmakeする

codesimple/elm

いつからあったのか分からないが、手持ちの環境にelmをインストールしなくてもdockerで開発できる環境が整うので試してみた。

コマンド

使い方は簡単で自分の開発環境で以下コマンドを実行するだけ。

docker run  --rm -it -v $(pwd):/code -w /code -e "HOME=/tmp" codesimple/elm:0.19 make src/Main.elm --output=main.js

make意外にもinitとかinstall、reactorもelmコマンドがそのまま入っているのでお気軽。

There are a bunch of other commands as well though. Here is a full list:

    elm repl    --help
    elm init    --help
    elm reactor --help
    elm make    --help
    elm install --help
    elm bump    --help
    elm diff    --help
    elm publish --help

Github Actionsでgithub.ioにデプロイ

せっかくなのでこのdocker imageを使って、以前elmで作ったぷよぷよゲームをGithub Actionsで自動デプロイしてみる。

コードはここ

1. masterでmake
2. 生成物とその他もろもろの必要なファイルを/tmp/codeに退避
3. github.io用のブランチにチェックアウト
4. 退避したファイルで色々上書きしてcommit&push

name: Deploy Github.io

on:
  push:
    branches: [master]

jobs:
  deploy:
    runs-on: ubuntu-latest
    container: codesimple/elm:0.19

    steps:
      - uses: actions/checkout@v2

      - name: Install dependencies
        run: elm make --output=main.js src/Main.elm

      - name: saving data
        run: cp -r ./ /tmp/code
      
      - name: install git
        run: apk add git

      - name: git setting
        run: |
          git config --global user.email "email"
          git config --global user.name "name"
      
      - uses: actions/checkout@v2
        with:
          ref: gh-pages

      - name: copy files
        run: |
          cp /tmp/code/main.js ./main.js
          cp /tmp/code/src/main.css ./src/main.css
          cp -r /tmp/code/api ./api
          cp /tmp/code/index.html ./index.html

      - name: Commit files
        run: |
          git add .
          git commit -m "update" -a
          git push origin gh-pages

ちゃんと動き出した。

demo

感想

elmの開発環境はもともと構築が簡単だけど、さらに楽に開発できてとても助かった。
個人的にはdockerでreactor立てておくだけで簡単にローカルお試し環境ができるのが最高。

github actionsはめちゃめちゃ便利。
elm-gamesのdemoとかはgithub.ioを使って公開している人が多かったので一度やってみたかった。