Phoenixのdevcontainer (Elixir)

はじめに

• Elixir 楽しんでいますか
• この記事は、私のNervesアプリが書きました
  • Nervesとは、
  • NervesはElixirのIoTでナウでヤングなcoolなすごいヤツです
• Phoenixとは、ElixirでWebアプリをつくっていけるフレームワークです
• devcontainerとは、Developing inside a Containerのことを私は指していて
  • Visual Studio CodeとDockerでお手軽に開発環境を整えてしまいましょう というものです
  • 具体例は、 @takasehideki 先生の「ElixirでIoT#4.1.2：[使い方篇] Docker(とVS Code)だけ！でNerves開発環境を整備する」があります
• で、私は今回、のPhoenix版を作ってみたわけです

2021/1/9(土) NervesJP #14 新年LT回

• の
• $\huge{出し物}$
• です
• どういうことかというと、 @kentaro さんのkentaro/mix_tasks_upload_hotswapデモとして、Nervesアプリからこの記事をアップロードしてみたいとおもっていますですよ

devcontainer

• 今回は、とあるフォルダ内に.devcontainerというフォルダを用意して以下3ファイルをつくります
• bolte-17/Phoenix-Devcontainerをベースにしました
  • 少し変えた部分はプルリクを送ってみましたです
  • Install latest phx.new #1
  • mount data/ on project root. #2

.devcontainer/devcontainer.json

// For format details, see https://aka.ms/vscode-remote/devcontainer.json or this file's README at:
// https://github.com/microsoft/vscode-dev-containers/tree/v0.106.0/containers/elm
{
  "name": "Elixir & Node.js 12 & PostgresSQL",
  "dockerComposeFile": "docker-compose.yml",
  "service": "web",
  "workspaceFolder": "/workspace",

  // Set *default* container specific settings.json values on container create.
  "settings": {
    "terminal.integrated.shell.linux": "/bin/bash"
  },

  // Add the IDs of extensions you want installed when the container is created.
  "extensions": [
    "elixir-lsp.elixir-ls",
  ]

  // Uncomment the next line if you want start specific services in your Docker Compose config.
  // "runServices": [],

  // Uncomment the line below if you want to keep your containers running after VS Code shuts down.
  // "shutdownAction": "none",

  // Use 'postCreateCommand' to run commands after the container is created.
  // "postCreateCommand": "yarn install",

  // Uncomment to connect as a non-root user. See https://aka.ms/vscode-remote/containers/non-root.
  // "remoteUser": "node"
}

.devcontainer/Dockerfile

# Elixir + Phoenix

FROM elixir:1.9

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 --force

# Install node
RUN curl -sL https://deb.nodesource.com/setup_12.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 12 & PostgreSQLな感じになっていたら成功です

helloプロジェクト作成

• Visual Studio Code付属のターミナルで操作します
• もし表示されていない場合は、Terminal > New Terminalを選んでください

/workspace# mix phx.new hello
/workspace/hello# cd hello

• mix phx.new helloでFetch and install dependencies? [Yn]を聞かれたら、Noと言える日本人でありたいとおもいます
• Visual Studio Codeで編集できますので

hello/config/dev.exs

config :hello, Hello.Repo,
  username: "postgres",
  password: "postgres",
  database: "hello_dev",
  hostname: "db",
  show_sensitive_data_on_connection_error: true,
  pool_size: 10

• hostname: "db"と変更いたしましたですよ、

/workspace/hello# mix setup
/workspace/hello# mix phx.server

• Visit: http://localhost:4000

Wrapping Up 🎍🎍🎍🎍🎍

• うまくいったかな
• ありがとナイス
• とにかくElixirに関係あることはQiitaにアウトプットしていくスタイル
  • ありがとうございます！！！！
• Enjoy Elixir