Hacobuneにデータベースを使うPhoenix Chatアプリをデプロイする(Elixir)

はじめに

• Elixirを楽しんでいますか
• さくらインターネット株式会社さんが提供している、PaaS型クラウドサービス「Hacobune（はこぶね）」に、Phoenixを利用してつくったChatアプリをデプロイしてみます
• デプロイ方法は次の3種類があります
  • ① パブリックのDockerイメージを使用
  • ② プライベートのDockerイメージを使用
  • ③ GitHubレポジトリをHacobuneに接続して使用（Dockerfileが必須）
• この記事では自分でビルドしたDockerイメージをDocker HubにPushして、そのイメージを使うことで、① パブリックのDockerイメージを使用 にてデプロイをします
• データベースはHacobuneの中にある「アドオン」機能の中からMySQLを使ってみます¹
• この記事は、Hacobuneへのデプロイを主題としています

できたもの

• https://phx-chat.c1.hacobuneapp.com/rooms
  • テスト用のユーザは、[e-mail] と [e-mail] を登録しています
    • パスワードは123456789012です
  • ご自由にお使いください
• Registerからユーザ登録することもできます

• それぞれ別のユーザでログインしています
• ある人の投稿操作が他の人に即座に反映されている様子を示しています
• 見た目がそっけないのはご容赦ください

ソースコード

• GitHub TORIFUKUKaiou/hacobune_phx
• .devcontainerを用意していますので、Visual Studio CodeとDockerでお手軽に環境構築できます
  • 手前味噌の「Phoenixの開発環境をつくる(Elixir)」をご参照ください

参考にした資料 |> ありがとうございます！！！

• Tracking Users in a Chat App with LiveView, PubSub Presence
  • LiveViewのバージョンが古いですがざっとみておくとよいとおもいます
• Phoenix LiveViewで作る web/mobile チャットアプリ 下準備編
  • @the_haigo さん!
  • モデルをとても参考にさせていただきました
• 作って学ぶPhoenix LiveView、チャットアプリの作成
  • @pojiro さん!
  • 記事中のphx-hook、phx-update="append"、temporary_assigns: [messages: []]にてチャットっぽくなりました
• The Pragmatic Studio Phoenix LiveView
  • ビデオ教材です
• Programming Phoenix LiveView
  • 本です
  • Phx.Gen.Auth まわりで参考にしました
• Deploying with Releases
  • Dockerfileのベースにしました
• さくらインターネットの新PaaSの「Hacobune」で phpMyAdmin と WordPress を動かす
  • アドオンの使い方の感触をつかむことができました
• MySQLでデータベース作成する「CREATE DATABASE」
  • 当初、CREATE DATABASE hacobune_phx;と文字コードを指定せず作ったことでデフォルトのLatin1になって日本語が登録できなかったので、データベースを作り直すことになりました

アプリケーションの仮登録

• ホスト名を決定します
• Hacobune（β版）ドキュメントに従って、アプリケーションの追加とアプリケーションの公開まで仮の値ですすめます
• ここで決定したドメイン名をconfig/prod.exsに設定します
  • 現状はc1.hacobuneapp.comのみ選択可能です
  • 以下は、phx-chat.c1.hacobuneapp.comの例です

config/prod.exs

config :hacobune_phx, HacobunePhxWeb.Endpoint,
  url: [host: "phx-chat.c1.hacobuneapp.com", port: 443],
  cache_static_manifest: "priv/static/cache_manifest.json"

Dockerイメージの作成

• ソースコードはあのレベルまで持っていくにもいろいろとあるにはあるのですが、参考資料によりなんとかかんとかつくりました
  • mix phx.newするときに、--database mysqlを指定しました
• プロジェクトのルートに以下のようなDockerfileをつくりました²
  • Deploying with Releases を参考にしました

Dockerfile

FROM elixir:1.12.2-alpine AS build

# install build dependencies
RUN apk add --no-cache build-base npm git

# prepare build dir
WORKDIR /app

# install hex + rebar
RUN mix local.hex --force && \
    mix local.rebar --force

# set build ENV
ENV MIX_ENV=prod

# install mix dependencies
COPY mix.exs mix.lock ./
COPY config config
RUN mix do deps.get, deps.compile

# build assets
COPY assets/package.json assets/package-lock.json ./assets/
RUN npm --prefix ./assets ci --progress=false --no-audit --loglevel=error

COPY priv priv
COPY assets assets
RUN npm run --prefix ./assets deploy
RUN mix phx.digest

# compile and build release
COPY lib lib
# uncomment COPY if rel/ exists
# COPY rel rel
RUN mix do compile, release

# prepare release image
FROM alpine:3.9 AS app
RUN apk add --no-cache openssl ncurses-libs bash libstdc++

WORKDIR /app

RUN chown nobody:nobody /app

USER nobody:nobody

COPY --from=build --chown=nobody:nobody /app/_build/prod/rel/hacobune_phx ./
COPY entrypoint.sh .

ENV HOME=/app

CMD ["bash", "/app/entrypoint.sh"]

entrypoint.sh

bin="/app/bin/hacobune_phx"
# start the elixir application
eval "$bin eval \"HacobunePhx.Release.migrate\""
exec "$bin" "start"

• 以下のようにしてDockerイメージをDocker HubにPushしました
• Docker Hubにアカウントを登録しておいてください

$ docker build -t hacobune_phx .
$ docker tag hacobune_phx torifukukaiou/hacobune_phx:0.2.0
$ docker login
$ docker push torifukukaiou/hacobune_phx:0.2.0

• とりあえず初回は手動でPushしましたが、GitHubのドキュメント「Dockerイメージの公開」に従うことでGitHub Actionsで自動で、Docker HubにPushできるようにしました
  • https://github.com/TORIFUKUKaiou/hacobune_phx/blob/ad51f8bf67349c992760a41cd91a5fb5f5f8b6d4/.github/workflows/push.yaml

アドオン(MySQL)の作成

• こんな感じでMySQLを選びます
• (ディスクサイズは1GBを選んでいたような気がしますがβ版だからなのか表示上は0GBになっています)

データベースの作成

• アドオンの外部接続を参考に、MySQLサーバに手元のPCからログインします

$ mysql -uroot -h <IPアドレス> -P <ポート番号> -p

mysql> CREATE DATABASE hacobune_phx DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci;

mysql> quit

アプリケーションの登録

• Dockerイメージ名には、torifukukaiou/hacobune_phx:0.2.0のような感じで指定します
• ポートは4000番にしておきます
• 環境変数は以下の2つを設定しておきます
  • DATABASE_URL
    • ecto://root:<password>@mysql:3306/hacobune_phx
      • ecto://<user>:<password>@HOST:PORT/database_name
      • アドオン名をmysqlとつけたのでHOSTは、mysqlとなっています
      • <password>はMySQLのアドオンを作成するときに指定したパスワードです
  • SECRET_KEY_BASE
    • 開発マシンでプロジェクトのルートにてmix phx.gen.secretをして出力された長い文字列を指定します

Run

• 以上でChatアプリがイゴくようになりました³
• もう一度、WebアプリのURLを書いておきます
• https://phx-chat.c1.hacobuneapp.com/rooms
  • テスト用のユーザは、[e-mail] と [e-mail] を登録しています
    • パスワードは123456789012です
  • ご自由にお使いください

Wrapping Up

• Hacobune（はこぶね）に、Phoenixアプリを簡単にデプロイすることができました
• PhoenixにてChatアプリを作るのはとてもいい勉強になりました
  • Chatアプリの作り方については、Phoenix 1.6.0の正式リリース後に改めて書きたいとおもっています⁴
• Enjoy Elixir

1. PhoenixといえばPostgreSQLですが、2021/08/22現在のHacobune β版では、MySQLとRedisの2つが提供されています ↩

2. 前の節でホスト名を直打ちして固定しているのでこのDockerイメージは私以外に使いみちがありません ↩

3. 記事では一本道でできるように書きましたが、実際には一歩進んで二歩下がるみたいなことを繰り返しました ↩

4. おもっています⁵ ↩

5. あくまでもおもっています ↩