{"id":18033978,"url":"https://github.com/miolab/phoenix_dev_containers","last_synced_at":"2025-08-22T15:04:05.763Z","repository":{"id":54564800,"uuid":"292256317","full_name":"miolab/phoenix_dev_containers","owner":"miolab","description":"Phoenix v1.5系 + DB（PostgreSQL）のDocker開発用リポジトリ","archived":false,"fork":false,"pushed_at":"2021-03-04T04:30:00.000Z","size":329,"stargazers_count":1,"open_issues_count":11,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-04T22:41:30.634Z","etag":null,"topics":["circleci","docker","elixir","phoenix","postgres"],"latest_commit_sha":null,"homepage":"","language":"Elixir","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/miolab.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-09-02T10:49:03.000Z","updated_at":"2021-11-04T00:45:41.000Z","dependencies_parsed_at":"2022-08-13T19:50:46.085Z","dependency_job_id":null,"html_url":"https://github.com/miolab/phoenix_dev_containers","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/miolab/phoenix_dev_containers","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miolab%2Fphoenix_dev_containers","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miolab%2Fphoenix_dev_containers/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miolab%2Fphoenix_dev_containers/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miolab%2Fphoenix_dev_containers/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/miolab","download_url":"https://codeload.github.com/miolab/phoenix_dev_containers/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miolab%2Fphoenix_dev_containers/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271657464,"owners_count":24797933,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-22T02:00:08.480Z","response_time":65,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["circleci","docker","elixir","phoenix","postgres"],"created_at":"2024-10-30T11:09:11.609Z","updated_at":"2025-08-22T15:04:05.725Z","avatar_url":"https://github.com/miolab.png","language":"Elixir","readme":"# Phoenix Dev experiment containers\n\n[![miolab](https://circleci.com/gh/miolab/phoenix_dev_containers.svg?style=svg)](https://github.com/miolab/phoenix_dev_containers)\n\nElixir 製 Web フレームワーク **Phoenix** の **Docker** 開発環境を構築します\n\n---\n\n## 実行環境（バージョン）・初期ディレクトリ構成\n\n- Elixir\n\n  ```\n  $ docker-compose run --rm app elixir --version\n  Elixir 1.11.3 (compiled with Erlang/OTP 23)\n  ```\n\n- Phoenix\n\n  ```\n  $ docker-compose run --rm app mix archive\n  * hex-0.21.1\n  * phx_new-1.5.7\n  ```\n\n- Node \u0026 npm\n\n  ```\n  $ docker-compose run --rm app bash -c \"node --version \u0026\u0026 npm --version\"\n  v14.15.4\n  6.14.10\n  ```\n\n- PostgreSQL\n\n  ```\n  $ docker-compose run --rm db psql --version\n  psql (PostgreSQL) 12.4\n  ```\n\n### **初期ディレクトリ構成**\n\n```bash\n$ tree -L 2 -a\n.\n├── .circleci\n│   └── config.yml\n├── .env.sample\n├── README.md\n├── app\n│   └── Dockerfile\n├── db\n│   └── Dockerfile\n└── docker-compose.yml\n```\n\n---\n\n## 使い方\n\n### **ビルド 〜 Phoenix コンテナ立ち上げ**\n\n- プロジェクト準備\n\n  ```bash\n  $ git clone https://github.com/miolab/phoenix_dev_containers.git\n\n  $ rm -rf app/\n\n  $ curl https://raw.githubusercontent.com/miolab/phoenix_dev_containers/master/app/Dockerfile \u003e\u003e app/Dockerfile\n\n  $ cp .env.sample .env\n  ```\n\n  上記コマンドで、あらかじめ入っている `app/` は削除しておいてください\n\n- ビルド〜プロジェクト作成\n\n  ```bash\n  $ docker-compose build\n\n      .\n      .\n  ```\n\n  ```bash\n  $ docker-compose run --rm app mix phx.new . --app my_app\n\n      .\n      .\n    (途中に出てくる `Fetch and install dependencies? [Yn]` は、`Y` で進める)\n\n      .\n      .\n  We are almost there! The following steps are missing:\n\n      $ cd app\n\n  Then configure your database in config/dev.exs and run:\n\n      $ mix ecto.create\n\n  Start your Phoenix app with:\n\n      $ mix phx.server\n\n  You can also run your app inside IEx (Interactive Elixir) as:\n\n      $ iex -S mix phx.server\n\n  ```\n\n- 生成されたファイルの中身を書き換える\n\n  `app/config/dev.exs`\n\n  ```elixir\n  # Configure your database\n  config :my_app, MyApp.Repo,\n    username: \"postgres\",  # \u003c-- update\n    password: \"password\",  # \u003c-- update\n    database: \"testdb\",    # \u003c-- update\n    hostname: \"db\",        # \u003c-- update\n  ```\n\n  - `.env` で設定してある環境変数をつかう\n\n- コンテナ起動\n\n  ```bash\n  $ docker-compose up -d\n  ```\n\n  ```bash\n  $ docker-compose ps\n\n            Name                       Command            State           Ports\n  ---------------------------------------------------------------------------------------\n  phoenix_dev_containers_app   sh -c mix phx.server        Up      0.0.0.0:4000-\u003e4000/tcp\n  _1                           --no-halt\n  phoenix_dev_containers_db_   docker-entrypoint.sh        Up      0.0.0.0:5432-\u003e5432/tcp\n  1                            postgres\n  ```\n\n- データベース作成\n\n  ```bash\n  $ docker-compose exec app mix ecto.create\n\n  The database for MyApp.Repo has been created\n  ```\n\n- コンテナを再起動\n\n  ```bash\n  $ docker-compose restart app\n  ```\n\n- ブラウザ確認\n\n  [`localhost:4000`](http://localhost:4000)\n\n    \u003cimg width=\"687\" alt=\"phx_init_page\" src=\"https://user-images.githubusercontent.com/33124627/100324924-3c566300-300b-11eb-9f84-e5ff80c11a07.png\"\u003e\n\n  - `docker-compose logs` 叩いて、ログ中にエラーぽいのが出てないか念のため確認しておく\n\n---\n\n### **新規ページを追加してみる**（任意）\n\n- 現在のルーティングを確認\n\n  ```bash\n  $ docker-compose exec app mix phx.routes\n\n  Creating phoenix_dev_containers_app_run ... done\n            page_path  GET  /                          MyAppWeb.PageController :index\n  live_dashboard_path  GET  /dashboard                 Phoenix.LiveView.Plug :home\n  live_dashboard_path  GET  /dashboard/:page           Phoenix.LiveView.Plug :page\n  live_dashboard_path  GET  /dashboard/:node/:page     Phoenix.LiveView.Plug :page\n            websocket  WS   /live/websocket            Phoenix.LiveView.Socket\n            longpoll  GET  /live/longpoll              Phoenix.LiveView.Socket\n            longpoll  POST  /live/longpoll             Phoenix.LiveView.Socket\n            websocket  WS   /socket/websocket          MyAppWeb.UserSocket\n  ```\n\n以下の手順で、新規ページ `/aboutme` を追加します\n\n- ルーティング設定（アップデート）\n\n  `app/lib/my_app_web/router.ex`\n\n  ```elixir\n  scope \"/\", MyAppWeb do\n    pipe_through :browser\n\n    get \"/\", PageController, :index\n    get \"/aboutme\", AboutmeController, :index    # --\u003e add\n  end\n  ```\n\n- コントローラー追加（新規作成）\n\n  `app/lib/my_app_web/controllers/aboutme_controller.ex`\n\n  ```elixir\n  defmodule MyAppWeb.AboutmeController do\n    use MyAppWeb, :controller\n\n    def index(conn, _params) do\n      render(conn, \"index.html\")\n    end\n  end\n  ```\n\n- ビュー追加（新規作成）\n\n  `app/lib/my_app_web/views/aboutme_view.ex`\n\n  ```elixir\n  defmodule MyAppWeb.AboutmeView do\n    use MyAppWeb, :view\n  end\n  ```\n\n- テンプレート追加（新規作成）\n\n  `app/lib/my_app_web/templates/aboutme/index.html.eex`\n\n  ```html\n  \u003csection class=\"phx-hero\"\u003e\n    \u003ch1\u003eオレオレコンテナをぜひ見てくれ\u003c/h1\u003e\n  \u003c/section\u003e\n  \u003csection class=\"row\"\u003e\n    \u003cp\u003e\n      メリークリスマス！ 2020！\u003cbr /\u003e\n      プレゼンテッド・バイ im（あいえむ）\n    \u003c/p\u003e\n  \u003c/section\u003e\n  ```\n\n- コンテナを再起動して、ルーティングを確認\n\n  ```bash\n  $ docker-compose restart app\n  ```\n\n  ```bash\n  $ docker-compose exec app mix phx.routes\n\n  Creating phoenix_dev_containers_app_run ... done\n            page_path  GET     /                          MyAppWeb.PageController :index\n        aboutme_path  GET     /aboutme                    MyAppWeb.AboutmeController :index\n  live_dashboard_path  GET     /dashboard                 Phoenix.LiveView.Plug :home\n  live_dashboard_path  GET     /dashboard/:page           Phoenix.LiveView.Plug :page\n  live_dashboard_path  GET     /dashboard/:node/:page     Phoenix.LiveView.Plug :page\n            websocket  WS      /live/websocket            Phoenix.LiveView.Socket\n            longpoll  GET     /live/longpoll              Phoenix.LiveView.Socket\n            longpoll  POST    /live/longpoll              Phoenix.LiveView.Socket\n            websocket  WS      /socket/websocket          MyAppWeb.UserSocket\n  ```\n\n  - `aboutme_path GET /aboutme MyAppWeb.AboutmeController :index` が追加できたことを確認しました\n\n  - ブラウザ確認 [`localhost:4000/aboutme`](http://localhost:4000/aboutme)\n\n    \u003cimg src=\"https://user-images.githubusercontent.com/33124627/99958502-d2507a80-2dcc-11eb-8ba3-b89612fb1f60.png\" width=\"455px\"\u003e\n\n---\n\n### **CRUD 設定**\n\n- ざっと設計\n\n  | 実装要件   |                                     |\n  | :--------- | :---------------------------------- |\n  | Context 名 | Accounts                            |\n  | スキーマ名 | User                                |\n  | テーブル名 | users                               |\n  | カラムと型 | name:string email:string bio:string |\n\n- WebUI を作成\n\n  上記設計にしたがって、生成コマンド `mix phx.gen.html` を実行します\n\n  ```bash\n  $ docker-compose exec app bash -c \"mix phx.gen.html Accounts User users name:string email:string bio:string\"\n\n  * creating lib/my_app_web/controllers/user_controller.ex\n  * creating lib/my_app_web/templates/user/edit.html.eex\n  * creating lib/my_app_web/templates/user/form.html.eex\n  * creating lib/my_app_web/templates/user/index.html.eex\n  * creating lib/my_app_web/templates/user/new.html.eex\n  * creating lib/my_app_web/templates/user/show.html.eex\n  * creating lib/my_app_web/views/user_view.ex\n  * creating test/my_app_web/controllers/user_controller_test.exs\n  * creating lib/my_app/accounts/user.ex\n  * creating priv/repo/migrations/20210206060235_create_users.exs\n  * creating lib/my_app/accounts.ex\n  * injecting lib/my_app/accounts.ex\n  * creating test/my_app/accounts_test.exs\n  * injecting test/my_app/accounts_test.exs\n\n  Add the resource to your browser scope in lib/my_app_web/router.ex:\n\n      resources \"/users\", UserController\n\n\n  Remember to update your repository by running migrations:\n\n      $ mix ecto.migrate\n  ```\n\n- ルーティング設定（アップデート）\n\n  - 上記の結果表示にある\n\n    ```bash\n    Add the resource to your browser scope in lib/my_app_web/router.ex:\n\n        resources \"/users\", UserController\n    ```\n\n    にしたがい、ルーティング設定を行います\n\n  `app/lib/my_app_web/router.ex`\n\n  ```elixir\n  scope \"/\", MyAppWeb do\n    pipe_through(:browser)\n\n    get(\"/\", PageController, :index)\n    resources \"/users\", UserController    # --\u003e add\n    get(\"/aboutme\", AboutmeController, :index)\n  end\n  ```\n\n- マイグレーション実行\n\n  ```bash\n  $ docker-compose exec app mix ecto.migrate\n\n  06:08:17.081 [info]  == Running 20210206060235 MyApp.Repo.Migrations.CreateUsers.change/0 forward\n\n  06:08:17.173 [info]  create table users\n\n  06:08:17.300 [info]  == Migrated 20210206060235 in 0.0s\n\n  ```\n\n  マイグレーションを実行したら、コンテナを再起動しておきます\n\n  ```bash\n  $ docker-compose restart app\n  ```\n\n  ブラウザ確認\n\n  - [`localhost:4000/users/new`](http://localhost:4000/users/new)\n\n    \u003cimg width=\"455px\" alt=\"webui1\" src=\"https://user-images.githubusercontent.com/33124627/100085123-00968e80-2e8f-11eb-9d2a-63a9f0ca14d6.png\"\u003e\n\n    \u003cimg width=\"455px\" alt=\"webui2\" src=\"https://user-images.githubusercontent.com/33124627/100085143-07250600-2e8f-11eb-8bab-376015a398d6.png\"\u003e\n\n    CRUD ページを作成できていることを確認できました\n\n### **テスト**\n\n- テスト側の DB 接続情報設定（アップデート）\n\n  `app/config/test.exs`\n\n  ```bash\n  config :my_app, MyApp.Repo,\n    username: \"postgres\",    # --\u003e update\n    password: \"password\",    # --\u003e update\n    database: \"my_app_test#{System.get_env(\"MIX_TEST_PARTITION\")}\",\n    hostname: \"db\",    # --\u003e update\n    pool: Ecto.Adapters.SQL.Sandbox\n  ```\n\n- テスト実行\n\n  ```bash\n  $ docker-compose exec app bash -c \"MIX_ENV=test mix test\"\n\n    .\n    .\n  Finished in 0.9 seconds\n  19 tests, 0 failures\n  ```\n\n  All Green でパスしていることを確認できました\n\n### **mix format**\n\nコードをフォーマットします\n\n- フォーマットされているかチェック （`mix format --check-formatted`）\n\n  ```bash\n  $ docker-compose exec app bash -c \"mix format --check-formatted\"\n  Creating phoenix_dev_containers_app_run ... done\n  ** (Mix) mix format failed due to --check-formatted.\n  The following files are not formatted:\n\n    * test/my_app/accounts_test.exs\n    * test/my_app_web/controllers/user_controller_test.exs\n    * priv/repo/migrations/20210206060235_create_users.exs\n  ```\n\n  フォーマットされていない場合は、上記のように警告表示されます\n\n- フォーマットをかける （`mix format`）\n\n  ```terminal\n  $ docker-compose exec app mix format\n  Creating phoenix_dev_containers_app_run ... done\n  ```\n\n- 結果確認\n\n  ```terminal\n  $ docker-compose exec app bash -c \"mix format --check-formatted\"\n  Creating phoenix_dev_containers_app_run ... done\n  ```\n\n  ぶじにフォーマットされました\n\n---\n\n## 参考\n\n- [Elixir](https://elixir-lang.org/)\n\n  - [Documentation](https://elixir-lang.org/docs.html)\n\n- [Phoenix](https://www.phoenixframework.org/)\n\n- Docker\n\n  - [Docker Official Image / Elixir image](https://hub.docker.com/_/elixir)\n\n  - [Docker Official Image / Postgres image](https://hub.docker.com/_/postgres)\n\n  - [Dockerfile のベストプラクティス](https://docs.docker.jp/engine/articles/dockerfile_best-practice.html)\n\n- CircleCI\n\n  - [公式 / 言語ガイド: Elixir](https://circleci.com/docs/ja/2.0/language-elixir/)\n\n  - [GitHub (CircleCI-Public / circleci-demo-elixir-phoenix)](https://github.com/CircleCI-Public/circleci-demo-elixir-phoenix/blob/master/.circleci/config.yml)\n\n  - [Linux Machine Executor Images - October (Q4) Update](https://discuss.circleci.com/t/linux-machine-executor-images-october-q4-update/37847)\n\n    - [日本語版](https://circleci.com/docs/ja/2.0/executor-types/#machine-%E3%81%AE%E4%BD%BF%E7%94%A8)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmiolab%2Fphoenix_dev_containers","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmiolab%2Fphoenix_dev_containers","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmiolab%2Fphoenix_dev_containers/lists"}