Elm でフーリエ級数展開やライフゲームを制作したので CI/CD を試してみました。 この記事では Elm で作ったものを GitLab CI/CD を使って GitLab Pages に deploy する方法を紹介します。

コードを書く

$ elm init
$ vim src/Main.elm

今回はsrc/Main.elmを変換して公開します。

git 管理する

GitLab のアカウントを持ってない人はアカウントを作ってください。

$ git init
$ gibo dump elm > .gitignore
$ git add elm.json src/Main.elm .gitignore
$ git commit -m "first commit"
$ git remote add origin git@gitlab.com:<username>/<reponame>.git
$ git push --set-upstream origin master
  • gibo は.gitignore を自動生成するコマンドです。(参考)

.gitlab-ci.yml を作成

$ vim .gitlab-ci.yml

以下を.gitlab-ci.yml にコピペする

image: node:alpine

pages:
  cache:
    paths:
      - node_modules/
  stage: deploy
  script:
    - npm install -g --unsafe-perm elm
    - elm make src/Main.elm --optimize --output=public/index.html
  artifacts:
    paths:
      - public
  only:
    - master

あとは

$ git add .gitlab-ci.yml
$ git commit -m "add .gitlab-ci.yml"
$ git push

src/Main.elmの内容がindex.htmlに変換され、

https://<username>.gitlab.com/<reponame>/

に公開されます。

  • 公開されるまで少し時間がかかります。(10 分ぐらい？)

以降は master に commit して push するだけで自動で GitLab Pages に deploy されます。

感想

  • シェルスクリプト書いてやってたことがサーバー側のコンテナでできるのは便利。
  • テストを書きながら開発するのも Elm で試したい。
  • Elm はアーキテクチャが決まってるから経験がなくても書きやすい。
  • Haskell から難しさを取り除きつつ、Haskell の書きやすさを残したいい感じの言語だと思った。

参考サイト