loading...

Docker-compose Elixir Phoenix && Elm && Nginx && Redis Development environment

problemaresolt profile image VA-11 Hall-A:東方算術騎士団【令和版】 Updated on ・2 min read

Docker Phoenix 開発環境構築

  • バックエンドはElixir Phoenix
  • フロントエンドはElm
  • WebサーバはNginxで生成されます。

ものすごくざっくり説明なのでご容赦を

Git Clone

ProbremaResolt Github
https://github.com/ProblemaResolt/Problema

git clone https://github.com/ProblemaResolt/Problema

Docker Build

docker-compose -f "docker-compose.yml" up -d --build

Phoenix 構築

内部に入る
docker-compose exec api sh

Phoenix 立ち上げ

option などは公式を参考にしてください。

https://hexdocs.pm/phoenix/Mix.Tasks.Phx.New.html#content

mix phx.new . --no-html --no-brunch

Local は以下のフォルダが生成されます。

/web/

色々聞かれるのですが基本Yesで大丈夫です。

ライブラリインストール

mix deps.get

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

config/mix.exs内へ追加

[中略]
  defp deps do
    [
      ~
      {:plug_cowboy, "~> 1.0"}, #追加
      ~
    ]
  end

[中略]

DevDB 接続

\config\dev.exs の書き換え

[中略]
config :web, Web.Repo,
  adapter: Ecto.Adapters.Postgres,
  username: "postgres",
  password: "postgres",
  database: "api_dev",
  hostname: "db",
  pool_size: 10
[中略]

DB Migrate

DB情報を更新

mix ecto.create

Phoenix 起動

Phoenix server を起動します。
mix phx.server

※ docker-compose.yml command に仕込んでおけば dockr-compose up -d の際に起動してくれるようになります。

Env 設定

ちょっとまって...

Elm 構築

docker-compose exec assets sh

elm project 作成します 聞かれたらYで応答してあげてください。

/opt/app/assets # elm init
Hello! Elm projects always start with an elm.json file. I can create them!

Now you may be wondering, what will be in this file? How do I add Elm files to
my project? How do I see it in the browser? How will my code grow? Do I need
more directories? What about tests? Etc.

Check out <https://elm-lang.org/0.19.1/init> for all the answers!

Knowing all that, would you like me to create an elm.json file now? [Y/n]: y
Okay, I created it. Now read that link!
/opt/app/assets # elm reactor
Go to <http://localhost:8000> to see your project dashboard.

するとブラウザに表示されます!

/assets/src に elm file を作成して設置すると表示してくれます。

とりあえずここまで

参考資料

API

Assets

Docker 関連

Discussion

pic
Editor guide