ホーム>プログラミング関連>その他のソースコード
ダウンロード

デモエリクサーフェニックス

エリクサー+フェニックス

Elixir Phoenix のデモンストレーション、立ち上げて実行する方法、および Gigalixir 経由で展開する方法。

Erlang、Elixir、Node、Postgres をインストールする

導入手順:

  • http://elixir-lang.org
  • http://exponential.io/blog/2015/02/21/

インストールにはさまざまな方法があります。

  • asdf 経由でインストール - クロスプラットフォーム開発者向け
  • brew 経由でインストール - brew を好む macOS 開発者向け
  • kerl - wip 経由でインストールする
  • ソース経由でインストール - ウィップ

バージョンが少なくとも次のものであることを確認します。 

erl --version
Erlang/OTP 27 …

elixir --version
Elixir 1.17.3 …

psql --version
psql (PostgreSQL) 16.4

node --version
v22.9.0

PostgresSQLデータベースを構成する

ローカル PostgreSQL セットアップの機能をさらに高め、このデモに特化したものにするには、新しいロールを作成します。

  • このプロジェクト名と一致するため、ロール名は「demo_elixir_phoenix」になります。

  • セキュリティ対策としては、ロールのパスワードを強力なパスワードにすることができます。

32 桁の 16 進数などの強力なパスワードを生成します。 

 printf " %sn " $( LC_ALL=C < /dev/urandom tr -dc ' 0-9a-f ' | head -c32 )

出力例: 

a9ed78cd8e4aa2bd2a37ad7319899106

ローカル PostgreSQL セットアップの機能をさらに高め、このデモに特化したものにするには、新しいロールを作成します。

  • このプロジェクト名と一致するため、ロール名は「demo_elixir_phoenix」になります。

  • セキュリティ対策としては、ロールのパスワードを強力なパスワードにすることができます。

32 桁の 16 進数などの強力なパスワードを生成します。 

 printf " %sn " $( LC_ALL=C < /dev/urandom tr -dc ' 0-9a-f ' | head -c32 )

出力例: 

a9ed78cd8e4aa2bd2a37ad7319899106

一般的な PostgreSQL オプションを使用して接続します。 

 psql --username postgres postgres

macOS brew PostgreSQL オプション経由で接続します。 

psql --username " $USER " postgres

psql を使用してロールを作成します。 

 postgres=# CREATE ROLE demo_elixir_phoenix WITH CREATEDB LOGIN ENCRYPTED PASSWORD 'a9ed78cd8e4aa2bd2a37ad7319899106';

確認する： 

 postgres=# du demo_elixir_phoenix
                List of roles
      Role name      | Attributes
---------------------+------------
 demo_elixir_phoenix | Create DB

アップデートミックス

Elixir パッケージ マネージャーであるアップデートmix : 

mix local.hex --force

出力： 

 * creating …/.mix/archives/hex-2.1.1

Phoenix フレームワークを入手する

Phoenix の新しいプロジェクト ジェネレーターをインストールします。 

mix archive.install hex phx_new

出力： 

 * creating ~/.mix/archives/phx_new-1.7.14

確認する： 

mix phx.new -v​

出力： 

Phoenix installer v1.7.14

新しいアプリを作成する

Phoenix の新しいディレクトリとアプリを組み合わせる

新しい： 

mix phx.new demo-elixir-phoenix --app demo_elixir_phoenix
cd demo-elixir-phoenix

データベースを作成する

ファイルconfig/dev.exs内のデータベース構成を変更します。

デフォルトのユーザー名とパスワードから: 

 username : "postgres" ,
password: "postgres" ,

カスタムのユーザー名とパスワードを入力します。 

 username : "demo_elixir_phoenix" ,
password: "a9ed78cd8e4aa2bd2a37ad7319899106" ,

走る： 

mix ecto.create
The database for DemoElixirPhoenix.Repo has been created

ファイルconfig/test.exsに対してもユーザー名とパスワードを同様に変更します。

修正

このエラーが発生した場合: 

 ** (Mix) The task " ecto.create " could not be found

その場合、間違ったディレクトリでコマンドを実行している可能性があります。アプリのベース ディレクトリ内でコマンドを実行していることを確認してください。

このエラーが発生した場合: 

 ** (Mix) The database for DemoElixirPhoenix.Repo couldn ' t be created: an exception was raised:
** (DBConnection.ConnectionError) tcp connect (localhost:5432): connection refused - :econnrefused

次に、ここでトラブルシューティングを実行します。

  • https://github.com/sixarm/sixarm-postgresql-help

テスト

走る： 

 mix test

出力： 

…
Finished in 0.03 seconds (0.01s async, 0.02s sync)
5 tests, 0 failures

Phoenixサーバーを実行する

走る： 

mix phx.server

[info] Running DemoElixirPhoenixWeb.Endpoint with Bandit 1.5.5 at 127.0.0.1:4000 (http)
[info] Access DemoElixirPhoenixWeb.Endpoint at http://localhost:4000
[watch] build finished, watching for changes...

Rebuilding...

Done in 166ms.

ブラウズ：

  • http://ローカルホスト:4000

ようこそページが表示されるはずです。

修正

このエラーが発生した場合: 

Error: Brunch 2+ requires node.js v4 or higher …
Upgrade node or use older brunch for old node.js: npm i -g brunch@1

次に、ノード、NPM、およびブランチを更新します。 

brew update
brew uninstall node
sudo rm -rf /usr/local/lib/node_modules
brew install node --with-full-icu
npm install -g npm
npm install -g brunch

アプリで作業する

ルートの一覧表示

サーバールートをリストすることもできます。 

mix phx.routes

出力： 

  GET   /                                      DemoElixirPhoenixWeb.PageController :home
  GET   /dev/dashboard/css-:md5                Phoenix.LiveDashboard.Assets :css
  GET   /dev/dashboard/js-:md5                 Phoenix.LiveDashboard.Assets :js
  GET   /dev/dashboard                         Phoenix.LiveDashboard.PageLive :home
  GET   /dev/dashboard/:page                   Phoenix.LiveDashboard.PageLive :page
  GET   /dev/dashboard/:node/:page             Phoenix.LiveDashboard.PageLive :page
  *     /dev/mailbox                           Plug.Swoosh.MailboxPreview []
  WS    /live/websocket                        Phoenix.LiveView.Socket
  GET   /live/longpoll                         Phoenix.LiveView.Socket
  POST  /live/longpoll                         Phoenix.LiveView.Socket

リソースを生成する

完全な HTML リソースのすべてのコード (ecto 移行、ecto モデル、コントローラー、ビュー、テンプレート) を生成します。 

mix phx.gen.html Account User users 
    name:string 
    email:string

出力： 

 * creating lib/demo_elixir_phoenix_web/controllers/user_controller.ex
* creating lib/demo_elixir_phoenix_web/controllers/user_html/edit.html.heex
* creating lib/demo_elixir_phoenix_web/controllers/user_html/index.html.heex
* creating lib/demo_elixir_phoenix_web/controllers/user_html/new.html.heex
* creating lib/demo_elixir_phoenix_web/controllers/user_html/show.html.heex
* creating lib/demo_elixir_phoenix_web/controllers/user_html/user_form.html.heex
* creating lib/demo_elixir_phoenix_web/controllers/user_html.ex
* creating test/demo_elixir_phoenix_web/controllers/user_controller_test.exs
* creating lib/demo_elixir_phoenix/account/user.ex
* creating priv/repo/migrations/20240625211751_create_users.exs
* creating lib/demo_elixir_phoenix/account.ex
* injecting lib/demo_elixir_phoenix/account.ex
* creating test/demo_elixir_phoenix/account_test.exs
* injecting test/demo_elixir_phoenix/account_test.exs
* creating test/support/fixtures/account_fixtures.ex
* injecting test/support/fixtures/account_fixtures.ex

タイムスタンプを並べ替える

移行タイムスタンプが残りのフィールドより前に来るようにするため、移行を編集します。 

edit priv/repo/migrations/ * _create_users.exs

結果は次のようになります。 

 defmodule DemoElixirPhoenix.Repo.Migrations.CreateUsers do
  use Ecto.Migration

  def change do
    create table ( :users ) do
      timestamps ( type: :utc_datetime )
      add :name , :string
      add :email , :string
    end
  end
end

ルートを追加する

ルーターファイルlib/demo_elixir_phoenix_web/router.exを参照してください。

デフォルトは次のとおりです。 

  scope "/" , DemoElixirPhoenixWeb do
    pipe_through :browser

    get "/" , PageController , :home
  end

ルーターを編集します。 

edit lib/demo_elixir_phoenix_web/router.ex `

ユーザー リソースをブラウザ スコープに追加します。 

  scope "/" , DemoElixirPhoenixWeb do
    pipe_through :browser
    
    resources "/users" , UserController

    get "/" , PageController , :home
  end

移行する

移行: 

mix ecto.migrate

出力： 

Generated demo_elixir_phoenix app

[info]  == Running … DemoElixirPhoenix.Repo.Migrations.CreateUsers.change/0 forward

[info]  create table users

[info]  == Migrated … in 0.0s

ルートを確認する

ユーザー ルートが存在することを確認します。 

mix phx.routes | grep users

出力： 

  GET     /users                                 DemoElixirPhoenixWeb.UserController :index
  GET     /users/:id/edit                        DemoElixirPhoenixWeb.UserController :edit
  GET     /users/new                             DemoElixirPhoenixWeb.UserController :new
  GET     /users/:id                             DemoElixirPhoenixWeb.UserController :show
  POST    /users                                 DemoElixirPhoenixWeb.UserController :create
  PATCH   /users/:id                             DemoElixirPhoenixWeb.UserController :update
  PUT     /users/:id                             DemoElixirPhoenixWeb.UserController :update
  DELETE  /users/:id                             DemoElixirPhoenixWeb.UserController :delete

走る

サーバーを実行します。 

mix phx.server
…
[info] Running DemoElixirPhoenixWeb.Endpoint with Bandit 1.5.5 at 127.0.0.1:4000 (http)
[info] Access DemoElixirPhoenixWeb.Endpoint at http://localhost:4000
[watch] build finished, watching for changes...

Rebuilding...

Done in 152ms.

ブラウズ：

  • http://localhost:4000/users

「ユーザーのリスト」、「名前」、「電子メール」などのテキストを含むユーザーのランディング ページが表示されます。

サーバーコンソールからの出力: 

[info] GET /users
[debug] Processing with DemoElixirPhoenixWeb.UserController.index/2
  Parameters: %{}
  Pipelines: [:browser]
[debug] QUERY OK source="users" db=0.4ms queue=0.5ms idle=974.7ms
SELECT u0."id", u0."name", u0."email", u0."inserted_at", u0."updated_at" FROM "users" AS u0 []
↳ DemoElixirPhoenixWeb.UserController.index/2, at: lib/demo_elixir_phoenix_web/controllers/user_controller.ex:8
[info] Sent 200 in 48ms
拡大する
追加情報
関連アプリ
おすすめ
関連情報 すべて