はじめに

この記事は「Elixir Advent Calendar 2022」の21日目です。
昨日は@mnishiguchiさんの「OptionParserでElixirスクリプトの引数を解析」でした。

Liveviewチャットアプリのチャットルーム管理をAgonesでをやってみます。

環境

OS(host)	Windows11
OS(gest)	ubuntu20.04
Memory	32GB
VitrualBox	6.1
vagrant	2.3.4
docker	20.10.22
minikube	1.28.0
elixir	1.14
phoenix	1.6

下記手順で環境構築を行います。

vagrantでvirtualbox上にubuntu環境を作成します。
docker、minikube、agonesをインストールします。
asdfでelixir,erlangをインストールします。
phoenixをインストールします。

Liveviewチャットアプリ作成

1 プロジェクト作成

mix phx.new phoenix-chat

2 チャット機能

チャット機能を追加します。

router.exにchatへのルーティングを設定します。

lib/phoenix-chat/router.ex

scope "/", PhoenixChatWeb do
    pipe_through :browser

    get "/", PageController, :index

    live "/chat", Chat.Index
end

/lib/phoenix_chatWeb/live/chat.exにchat処理を新規追加します。

/lib/phoenix_chatWeb/live/chat.ex

defmodule PhoenixChatWeb.Chat.Index do
  #use Phoenix.LiveView
  use PhoenixChatWeb, :live_view
  def mount(_params, _session, socket) do
    if connected?(socket) do
      PhoenixChatWeb.Endpoint.subscribe(topic)
    end
    {:ok, assign(socket, username: username, messages: [])}
  end

  def handle_info(%{event: "message", payload: message}, socket) do
    {:noreply, assign(socket, messages: socket.assigns.messages ++ [message])}
  end

  def handle_event("send", %{"text" => text}, socket) do
    PhoenixChatWeb.Endpoint.broadcast(topic, "message", %{text: text, name: socket.assigns.username})
    {:noreply, socket}
  end

  defp username do
    "User #{:rand.uniform(100)}"
  end

  defp topic do
    "chat"
  end

  def render(assigns) do
    ~L"""
    <div>
      <h1>ChatLive</h1>
      <div class="messages" style="border: 1px solid #eee; height: 400px; overflow: scroll; margin-bottom: 8px;">
        <%= for m <- @messages do %>
          <p style="margin: 2px;"><b><%= m.name %></b>: <%= m.text %></p>
        <% end %>
      </div>
      <form phx-submit="send">
        <input type="text" name="text" />
        <button type="submit">Send</button>
      </form>
    </div>
    """
  end
end

3 動作確認

mix phx.server

4 コンテナ化

phoenixチャットアプリのコンテナを作成します。

docker build -t phoenix-chat:minikube .

Agones上でPhoenixチャットアプリを動かす

phornixチャットアプリをAgones上にデプロイするマニフェストを作成します。

gameserver.yaml

apiVersion: "agones.dev/v1"
kind: GameServer
metadata:
  generateName: "simple-game-server"
spec:
  ports:
  - name: default
    portPolicy: Dynamic
    containerPort: 4000
    protocol: TCP
  health:    
    initialDelaySeconds: 30
    seconds buffer
    periodSeconds: 25
  template:
    spec:
      containers:
      - name: simple-game-server
        image: phoenix-chat:minikube
        imagePullPolicy: Never
        ports:
        - containerPort: 4000
        resources:
          requests:
            memory: "640Mi"
            cpu: "500m"
          limits:
            memory: "640Mi"
            cpu: "500m"

Agonesにチャットアプリをデプロイします。

kubectl create -f gameserver.yaml

gameserverの状態がReadyになっているのを確認します。

kubectl get gs
NAME                      STATE       ADDRESS        PORT   NODE     AGE
simple-game-serversbxhc   Ready   XXX.XXX.XXX.XXX   YYYY   agones   7s

ローカル端末からvirtualbox上のubuntuにポートフォワードします。

ssh vagrant-agones -L YYYY:XXX.XXX.XXX.XXX:YYYY

チャットアプリにアクセスできるのを確認します。

まとめ

ローカル環境でAgonesの開発環境を構築しました。
phoenixで簡易チャットアプリを作成し、Agones上で動かしました。
次回はgameserver fleetを追加予定です。

PhoenixアプリをAgonesで管理する