Windows10でDockerで起動したPhoenixとMySQLと開発環境となやみ
Tags: elixir, docker
Published: 2019-08-02 08:53:06

# 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