Phoenixの開発環境をつくる(Elixir)

はじめに

• Elixir 楽しんでいますか
• Phoenixとは、ElixirでWebアプリをつくっていけるフレームワークです
• devcontainerとは、Developing inside a Containerのことを私は指しています
• **Visual Studio Code**とDockerでお手軽にPhoenixの開発環境を整えてしまいましょう という内容です
• 「夏の大納涼 Visual Studio / Visual Studio Code / GitHub Codespaces ♥ Azure 祭り」というイベントの参加記事です
• 以下の環境で試しました

macOS 10.15.7

	バージョン
Docker Desktop	3.5.2
Visual Studio Code	1.59.0

Windows 11 Home (22000.132)

	バージョン
Docker Desktop	3.5.1
Visual Studio Code	1.57.1

devcontainer

• 今回は、とあるフォルダ内に.devcontainerというフォルダを用意して以下3ファイルをつくります

.devcontainer/devcontainer.json

{
    "name": "Elixir & Node.js & PostgresSQL",
    "dockerComposeFile": "docker-compose.yml",
    "service": "web",
    "workspaceFolder": "/workspace",
    "settings": {
        "terminal.integrated.profiles.linux": {
            "bash": {
                "path": "/bin/bash",
            }
        }
    },
    "extensions": [
        "jakebecker.elixir-ls",
        "ms-azuretools.vscode-docker"
    ]
}

.devcontainer/Dockerfile

FROM elixir:1.12

ENV DEBIAN_FRONTEND=noninteractive

# Install debian packages
RUN apt-get update
RUN apt-get install --yes build-essential inotify-tools postgresql-client

# Install Phoenix packages
RUN mix local.hex --force
RUN mix local.rebar --force
RUN mix archive.install hex phx_new 1.5.10 --force

# Install node
RUN curl -sL https://deb.nodesource.com/setup_14.x -o nodesource_setup.sh
RUN bash nodesource_setup.sh
RUN apt-get install -y nodejs

ENV DEBIAN_FRONTEND=dialog

WORKDIR /app
EXPOSE 4000

.devcontainer/docker-compose.yml

version: "3"
services:
  web:
    # Uncomment the next line to use a non-root user for all processes. You can also
    # simply use the "remoteUser" property in devcontainer.json if you just want VS Code
    # and its sub-processes (terminals, tasks, debugging) to execute as the user. On Linux,
    # you may need to update USER_UID and USER_GID in .devcontainer/Dockerfile to match your
    # user if not 1000. See https://aka.ms/vscode-remote/containers/non-root for details.
    # user: node
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - ..:/workspace:cached
    # Overrides default command so things don't shut down after the process ends.
    command: sleep infinity
    links:
      - db
  db:
    image: postgres
    restart: unless-stopped
    ports:
      - 5432:5432
    environment:
      POSTGRES_PASSWORD: postgres
      POSTGRES_USER: postgres
    volumes:
      - ./../data/db:/var/lib/postgresql/data

使い方

• @takasehideki 先生の「ElixirでIoT#4.1.2：[使い方篇] Docker(とVS Code)だけ！でNerves開発環境を整備する #導入手順」を参考に、インストールを進めます
  • Visual Studio Code
    • 拡張機能Remote - Containers
  • Docker Desktop
• あとはVisual Studio Codeで、Remote-Containers: Open Folder in Container... から.devcontainerがあるフォルダを選べばいいです
  • 具体的には、これも@takasehideki 先生の「ElixirでIoT#4.1.2：[使い方篇] Docker(とVS Code)だけ！でNerves開発環境を整備する #2. VS Codeをdev-container機能で開く」をご参照ください
    • コーヒーを淹れるが一番重要だと個人的にはおもっています
    • 気長に待つ必要があります
    • コーヒーを淹れるは、@takasehideki 先生の記事中での表現です

左下が>< Dev Container: Elixir & Node.js & PostgreSQLな感じになっていたら成功です

helloプロジェクト作成

• Phoenixのプロジェクトを作っていきましょう
• Visual Studio Code付属のターミナルで操作します
• もし表示されていない場合は、Terminal > New Terminalを選んでください
• プロジェクト名をhelloにした理由は公式のガイドにならいました
  • https://hexdocs.pm/phoenix/up_and_running.html#content ¹

/workspace# mix phx.new hello

• Fetch and install dependencies? [Yn]にはとりあえず、nを答えておきます
• Visual Studio Codeで編集できますので、hello/config/dev.exsを以下のように変更します
  • hostnameをlocalhostからdbに変更しています
• hello/config/test.exsも同様に変更しておきます

hello/config/dev.exs

config :hello, Hello.Repo,
  username: "postgres",
  password: "postgres",
  database: "hello_dev",
  hostname: "db", # localhost => dbへ変更
  show_sensitive_data_on_connection_error: true,
  pool_size: 10

• データベースの設定を変更したら、各種ライブラリのインストールを行います

/workspace# cd hello
/workspace/hello# mix setup

• setup taskの内容は、hello/mix.exsに書いてあります

mix.exs

  defp aliases do
    [
      setup: ["deps.get", "ecto.setup", "cmd npm install --prefix assets"],

Run

/workspace/hello# mix phx.server

• Visit: http://localhost:4000

Wrapping Up

• うまくいったかな
  • もしうまくいかなかったら、elixir.jp Slackにお越しください
  • 私はautoracexというチャネルに入り浸っておりますのでお気軽にお声掛けください
  • サポートします
• ありがとナイス
• Enjoy Elixir

Elixirはじめてだよ〜 という方へ

• もしまだElixirを楽しんだことがない方はぜひこの記事を参考に環境構築をしていただいたら、下記のようなhello.exs(たとえば/workspace配下)を作ってみてください
• 実行は、elixir hello.exsです
• そうすると、Azureタグのついた最新記事を20件取得して、そのタイトルの一覧を表示してくれます²

hello.exs

Mix.install([
  {:httpoison, "~> 1.8"},
  {:jason, "~> 1.2"}
])

"https://qiita.com/api/v2/items?query=tag:Azure"
|> HTTPoison.get!()
|> Map.get(:body)
|> Jason.decode!()
|> Enum.map(& &1["title"])
|> IO.inspect()

• こんな感じで、パイプ演算子と呼ばれる|>を使う書き方がよくでてきます
• Elixirにハマるとこれがとても気持ちよくなります
  • |>が心地よいから、Elixirにハマっていくのかもしれません

1. 日本語では、@koga1020 さんの https://zenn.dev/koga1020/books/phoenix-guide-ja-1-5 で読めます。Thanks! ↩

2. 1回目は依存ライブラリのダウンロードとコンパイルが行われるため、結果がでるまでちょっと時間がかかります。 ↩