Elixir/Phoenixの依存関係調査 : 目次編

アドベントカレンダー: 1日目
https://qiita.com/advent-calendar/2024/frick-elixir-learning-record

# 環境構築
OSに合わせたElixirのインストール (https://elixir-lang.jp/install.html)
```
elixir -v
Erlang/OTP 27 [erts-15.0] [source] [64-bit] [smp:32:32] [ds:32:32:10] [async-threads:1] [jit:ns]

Elixir 1.16.3 (compiled with Erlang/OTP 26)
```
Phoenixフレームワークのインストール
```
mix archive.install hex phx_new
mix archive
* hex-2.1.1
* phx_new-1.7.12
Archives installed at: /home/frick/.asdf/installs/elixir/1.16.3-otp-26/.mix/archives
```
Docker Desktop のインストール (https://www.docker.com/ja-jp/products/docker-desktop/)
```
docker -v
Docker version 27.2.0, build 3ab4256
```
# Phoenixプロジェクトを作成
```
mix phx.new hello
```
```
* creating hello/lib/hello/application.ex
* creating hello/lib/hello.ex
* creating hello/lib/hello_web/controllers/error_json.ex
* creating hello/lib/hello_web/endpoint.ex
* creating hello/lib/hello_web/router.ex
* creating hello/lib/hello_web/telemetry.ex
* creating hello/lib/hello_web.ex
* creating hello/mix.exs
* creating hello/README.md
* creating hello/.formatter.exs
* creating hello/.gitignore
* creating hello/test/support/conn_case.ex
* creating hello/test/test_helper.exs
* creating hello/test/hello_web/controllers/error_json_test.exs
* creating hello/lib/hello/repo.ex
* creating hello/priv/repo/migrations/.formatter.exs
* creating hello/priv/repo/seeds.exs
* creating hello/test/support/data_case.ex
* creating hello/lib/hello_web/controllers/error_html.ex
* creating hello/test/hello_web/controllers/error_html_test.exs
* creating hello/lib/hello_web/components/core_components.ex
* creating hello/lib/hello_web/controllers/page_controller.ex
* creating hello/lib/hello_web/controllers/page_html.ex
* creating hello/lib/hello_web/controllers/page_html/home.html.heex
* creating hello/test/hello_web/controllers/page_controller_test.exs
* creating hello/lib/hello_web/components/layouts/root.html.heex
* creating hello/lib/hello_web/components/layouts/app.html.heex
* creating hello/lib/hello_web/components/layouts.ex
* creating hello/priv/static/images/logo.svg
* creating hello/lib/hello/mailer.ex
* creating hello/lib/hello_web/gettext.ex
* creating hello/priv/gettext/en/LC_MESSAGES/errors.po
* creating hello/priv/gettext/errors.pot
* creating hello/priv/static/robots.txt
* creating hello/priv/static/favicon.ico
* creating hello/assets/js/app.js
* creating hello/assets/vendor/topbar.js
* creating hello/assets/css/app.css
* creating hello/assets/tailwind.config.js
```
* Phoenix関連のファイルが作成されている
```
Fetch and install dependencies? [Yn] y
* running mix deps.get
* running mix assets.setup
* running mix deps.compile

We are almost there! The following steps are missing:

    $ cd hello

Then configure your database in config/dev.exs and run:

    $ mix ecto.create

Start your Phoenix app with:

    $ mix phx.server

You can also run your app inside IEx (Interactive Elixir) as:

    $ iex -S mix phx.server
```
* `mix deps.get`: `/mix.exs`の`deps`で定義された依存関係をダウンロードしてインストール
* `mix assets.setup`: `/assets/*`(JavaScriptやCSS等)に関する依存関係をセットアップ
* `mix deps.compile`: 依存関係をコンパイルし、成果物は`/_build`に保存される
# Docker上で起動させる設定
```
# ディレクトリ移動
cd hello
# Dockerfileファイルの作成
touch Dockerfile
# docker-composeファイルの作成
touch docker-compose.yml
```
```
# Dockerfile (※本番運用の際は精査してください)
FROM elixir:1.15.0-alpine AS builder
RUN apk add --no-cache build-base git inotify-tools
RUN apk add --no-cache nodejs npm
WORKDIR /app
RUN mix local.hex --force && \
    mix local.rebar --force
COPY . .
RUN mix deps.get && \
    mix assets.deploy
CMD ["mix", "phx.server"]
```
```docker-compose.yml
version: '3.9'
services:
  phoenix:
    build:
      context: .
      dockerfile: Dockerfile
    container_name: phoenix_app
    ports:
      - "4000:4000"
    environment:
      MIX_ENV: dev
      DATABASE_URL: "ecto://postgres:postgres@db:5432/hello_dev"
    depends_on:
      - db
    volumes:
      - .:/app
    stdin_open: true
    tty: true
    
  db:
    image: postgres:15
    container_name: postgres_db
    ports:
      - "5432:5432"
    environment:
      POSTGRES_USER: postgres
      POSTGRES_PASSWORD: postgres
      POSTGRES_DB: hello_dev
    volumes:
      - postgres_data:/var/lib/postgresql/data

volumes:
  postgres_data:
```
`config/dev.exs`に`PostgreSQL`(データベース)のホスト設定を変更します。
```config/dev.exs
config :hello, Hello.Repo,
  username: "postgres",
  password: "password",
  database: "hello_dev",
  # hostname: "localhost",
  hostname: "db",
  pool_size: 10
```
ロードバランサ入ってないので、以下も更新
```config/dev.exs
config :hello, HelloWeb.Endpoint,
  # Binding to loopback ipv4 address prevents access from other machines.
  # Change to `ip: {0, 0, 0, 0}` to allow access from other machines.
  # http: [ip: {127.0.0.1}, port: 4000],
  http: [ip: {0, 0, 0, 0}, port: 4000],
  check_origin: false,
  code_reloader: true,
  debug_errors: true,
  secret_key_base: "Tb/XbLiFRpf5TqvrQbUKyC5UtMkrxMU89qISRI3HOp0PG9LJCNsoQLmwCybI16Ja",
  watchers: [
    esbuild: {Esbuild, :install_and_run, [:hello, ~w(--sourcemap=inline --watch)]},
    tailwind: {Tailwind, :install_and_run, [:hello, ~w(--watch)]}
  ]
```
PhoenixとPostgreSQLを起動
```
docker-compose up --build
```
データベースのマイグレーション
```
# コンテナに入る
docker exec -it phoenix_app sh
mix ecto.create
mix ecto.migrate
```
# Phoenixのデフォルトページが表示されることを確認
http://localhost:4000 にアクセス
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556177/0096276a-f127-6462-f9d5-680d151e5fcc.png)

# ここから本題
どんな依存関係があるのかを確認
```
mix deps
```
まとめ
* bandit (Hex package) (mix)
* castore (Hex package) (mix)
* db_connection (Hex package) (mix)
* decimal (Hex package) (mix)
* dns_cluster (Hex package) (mix)
* ecto (Hex package) (mix)
* ecto_sql (Hex package) (mix)
* esbuild (Hex package) (mix)
* expo (Hex package) (mix)
* file_system (Hex package) (mix)
* finch (Hex package) (mix)
* gettext (Hex package) (mix)
* heroicons (https://github.com/tailwindlabs/heroicons.git - v2.1.1)
* hpax (Hex package) (mix)
* jason (Hex package) (mix)
* mime (Hex package) (mix)
* mint (Hex package) (mix)
* nimble_options (Hex package) (mix)
* nimble_pool (Hex package) (mix)
* phoenix (Hex package) (mix)
* phoenix_ecto (Hex package) (mix)
* phoenix_html (Hex package) (mix)
* phoenix_live_dashboard (Hex package) (mix)
* phoenix_live_reload (Hex package) (mix)
* phoenix_live_view (Hex package) (mix)
* phoenix_pubsub (Hex package) (mix)
* phoenix_template (Hex package) (mix)
* plug (Hex package) (mix)
* plug_crypto (Hex package) (mix)
* postgrex (Hex package) (mix)
* swoosh (Hex package) (mix)
* tailwind (Hex package) (mix)
* telemetry 1.3.0 (Hex package) (rebar3)
* telemetry_metrics (Hex package) (mix)
* telemetry_poller 1.1.0 (Hex package) (rebar3)
* thousand_island (Hex package) (mix)
* websock (Hex package) (mix)
* websock_adapter (Hex package) (mix)

今回のアドベントカレンダーは
hex.pmやGitHubから上記の依存関係のパッケージが何をしているかを
確認していこうかなと思います。

# 参考
https://hexdocs.pm/phoenix/overview.html