VA-11 Hall-A:東方算術騎士団【令和版】

Posted on Aug 2, 2019 • Edited on Dec 17, 2019

Windows10でDockerで起動したPhoenixとMySQLと開発環境となやみ

#elixir #docker

caution！！！

この記事は重大なミスを犯しています。
コード書き換えが済んでおらず、今一度時間をつくって作り直します。

Windows１０でdockerとElmとPhoenix

フロントエンドをelm バックエンドのAPIをElixir
データベースをMysqlとして起動したいというなんか自分でやってみた感のあるものです。
これいっぱつで環境できまっせみたいなのが出来ないかなぁと試行錯誤しております。

課題として

ShellScriptでまとめたい
Elm は別にコンテナなのはとっ散らかるけどこれでいいの？
セキュリティ的に怖いので .env のようなファイルが必要か

何か良い方法あったら教えてくださるとありがたいです。

docker compose ファイル

MySQL8.0以降はまだ対応していない？そのため5.7にしています。

mariaex error #222

https://github.com/xerions/mariaex/issues/222

version: '3'
services:
  db:
    image: mysql:5.7
    container_name: "dev_db"
    ports:
      - "3306:3306"
    volumes:
      - ./mysql/volumes:/var/lib/mysql
    environment:
      MYSQL_ROOT_PASSWORD: 'password'      
  api:
    build: ./
    container_name: "api_app"
    working_dir: /opt/app
    command: mix phx.server
    volumes:
      - .:/opt/app
    environment:
      MYSQL_ROOT_USERNAME: 'root'
      MYSQL_ROOT_PASSWORD: 'password'
      MYSQL_HOSTNAME: 'db'
      MYSQL_PORT: '3306'
    ports:
      - '4000:4000'
    depends_on:
      - db
  web:
    build: ./
    container_name: "web_app"
    ports:
      - "8000:8000"
    volumes:
      - ./web/volumes:/opt/app/web
    tty: true

Dockerのビルド

バックグラウンドのAPIを作成するため、Phoenixを立ち上げます。

docker-compose build api

MySQLコンテナ起動

DBを起動させます
-dを入れてバックグランドで動かします。

docker-compose up -d db

PhoenixProject作成

デフォルトはpostgreSQLであるためここではMySQLで起動します。
（特に理由はないですがポスグレの場合はDocker-Compose.ymlをポスグレに修正してください）

docker-compose run --rm api mix phx.new . --database mysql --no-html

ライブラリ追加

dapter の{:plug_cowboy, "~> 1.0"},を追加　

config/mix.exs内へ追加

[中略]
  defp deps do
    [
      {:phoenix, "~> 1.3.4"},
      {:phoenix_pubsub, "~> 1.0"},
      {:phoenix_ecto, "~> 3.2"},
      {:mariaex, ">= 0.0.0"},
      {:phoenix_html, "~> 2.10"},
      {:phoenix_live_reload, "~> 1.0", only: :dev},
      {:gettext, "~> 0.11"},
      {:plug_cowboy, "~> 1.0"},　#ココ
      {:cowboy, "~> 1.0"}
    ]
  end

[中略]

ライブラリインストール

Elixirライブラリをインストールします。

docker-compose run --rm api mix deps.get

開発環境のDB接続準備

\config\dev.exs の書き換え

[中略]
# Configure your database
config :app, App.Repo,
  adapter: Ecto.Adapters.MySQL,
  username: "root",
  password: "password",
  database: "app_dev",
  hostname: "db",
  pool_size: 10
[中略]

DB Migrate

DB情報を更新

docker-compose run --rm api mix ecto.create

起動する。

アプリを起動します。

docker-compose up -d

http://localhost:4000 でPhoenixの画面が
Welcome to Phoenix!
A productive web framework that
does not compromise speed and maintainability.

出ればOKです。

Elixirバージョン確認

docker-compose run --rm app elixir -v

Phoenix バージョン確認

docker-compose run --rm app mix phx.new --version

Dockerコンテナ内へ入る場合

注意：一応docker ps などで確認してくんさい
docker-compose ファイルで設定したcontainer_name: "web_app"を指定していますので container name でDocker内に入ります。

docker exec -it web_app //bin/sh

これでDockerのコンテナ内に入れました。

elm の設定

cd web/
にてElm用のディレクトリに移動します。

/opt/app/ #  cd web/

/opt/app/web # elm reactor
すると
Go to http://localhost:8000 to see your project dashboard.
ダッシュボードが http://localhost:8000 に表示されます。

作業終了時

docker-compose down

これでElmとElixir Phoenix の環境ができました。
Linuxなどでファイル編集をする際の権限などまだまだ課題もあり
そのあたり皆さんどうされているのでしょうか。

参考にしたページ

Docker の設定

Elixir/Phoenix+MySQL5.7環境をDocker/Docker Composeで整え開発する。 https://qiita.com/studio23c/items/510a12abd53f3651b5b2
Elixir1.6 / Phoenix1.3の環境をDockerで整えてCRUDアプリを動かすまで https://qiita.com/dd511805/items/13f3ea4255dc4d1a3fbb ## Elixir Phoenix Phoenix 公式 https://hexdocs.pm/phoenix/overview.html

elm

Create Elm App https://github.com/halfzebra/create-elm-app#getting-started
Elmで非同期Http通信を含んだSPAを試してみる https://qiita.com/sand/items/849c919b0d957ee99b9d
elm 0.19 で JSONを使ってjsと通信したメモ https://qiita.com/hibohiboo/items/33a8dcf462bd8e4a55e0
elm-lang examples https://elm-lang.org/examples

DEV Community