やってみよう！Elixir / Phoenix 関数型プログラミングの基礎②

WEBアプリを作成する

WEBアプリの骨格を生成し、サーバーとして起動して、デフォルトのPhoenixスタート画面をブラウザで表示するところまで進みます。

Phoenixアプリケーションジェネレーターのインストール

コンテナを起動して、コンテナの中に入ってください。

docker compose up -d

docker compose exec app bash

そして次のコマンドを実行してください。

mix archive.install hex phx_new 1.7.16 --force

これでmix phx.newコマンドが使えるようになります。このコマンドはPhoenixアプリケーションジェネレーターと呼ばれています。Phoenixアプリケーションのソースコードの骨格を生成するコマンドです。

mix phx.newコマンドの実行

次のコマンドを実行してください。

mix phx.new phx_sample

fetch and install dependencies? [Yn] という質問はYを選択してください。

ls -lコマンドでphx_sampleディレクトリができていることを確認してください。

ls -l

ソースコードの移動

以下のコマンドを順に実行して、phx_sampleの中身を作業ディレクトリに移動します。

mv -n phx_sample/* .

mv -n phx_sample/.* .

rm -rf phx_sample

サーバーの起動

それでは、作成されたphx_sampleのソースコードをvs codeを使ってみてみましょう。

config/dev.exsを書き換えます。

hostname: "localhost"を"db"に書き換えてください

続けて

http: [ip: {127, 0, 0, 1}, port: 4000],を
http: [ip: {0, 0, 0, 0}, port: 4000],にしてください

localhost:4000番でPhoenixのスタート画面が確認できます。

mix phx.serverの後にwaringがでるとkの対処法

mix phx.serverすると以下の内容が出ます。

warning: defining a Gettext backend by calling

    use Gettext, otp_app: ...

is deprecated. To define a backend, call:

    use Gettext.Backend, otp_app: :my_app

Then, instead of importing your backend, call this in your module:

    use Gettext, backend: MyApp.Gettext

  lib/phx_sample_web/gettext.ex:23: PhxSampleWeb.Gettext (module)

lib/phx_sample_web/gettext.exの23行目を以下に変更してください。

 use Gettext.Backend, otp_app: :phx_sample

続いて、lib/phx_sample_web/components/core_components.ex の先頭に  use Gettext, backend: PhxSampleWeb.Gettextを追加して、import YorozzzWeb.Gettextを削除してください。

defmodule PhxSampleWeb.CoreComponents do
  use Phoenix.Component
  
  #追加
  use Gettext, backend: PhxSampleWeb.Gettext
  
  alias Phoenix.LiveView.JS
  
  #削除
  import YorozzzWeb.Gettext
  
end

これで開発環境の構築はできました。