【本コラムは、3分で読めて、10分くらいでお試しいただけます】
piacereです、ご覧いただいてありがとございます

前回作った「LiveView SPA」を、「Heroku」とほぼ同じ操作感のElixir／Phoenix向けPaaS「Gigalixir」にリリースします

なお、「Phoenix」は、ElixirのWebフレームワークで、「Gigalixir」は、Herokuに似たPhoenixが動くクラウド（PaaS）です

本コラムの検証環境

本コラムは、以下環境で検証しています（Windowsで検証してますがLinuxやmacでも動作する想定です）

Windows 10
Elixir 1.13.0 on WSL2 Ubuntu　※最新版のインストール手順はコチラ
Phoenix 1.6.6　　　　　　　　※最新版のインストール手順はコチラ
PostgreSQL 10.17　　　　　　※最新版のインストール手順はコチラ
gigalixir 1.2.3 　　　　　　　 ※最新版のインストール手順はコチラ
git 2.24.1.windows.2 　　　　※最新版のインストール手順はコチラ

なお、このコラムから見た方への案内として、LiveView SPAを、そのまま既存のGigalixirのAppに上書きリリースするので、Gigalixir環境の構築と、LiveView Phoenix PJのローカルPCでの動作確認を事前に実施しておいてください

LiveViewアプリのPhoenix PJフォルダに移動

前回、作成済みのローカルPCのPhoenix PJフォルダに移動します

cd basic

Gigalixirで動かすElixir等のバージョン指定

GigalixirのElixirバージョンは、特に指定しない限り、1.5系が動作するため、Elixir 1.7以上で無ければ動かないLiveViewを使用する場合は、Elixirバージョンを上げる必要があります

まず、ローカルPCのElixirバージョンを確認します

elixir --version
Erlang/OTP 24 [erts-12.1.5] [source] [64-bit] [smp:16:16] [ds:16:16:10] [async-threads:1] [jit]

Elixir 1.13.0 (compiled with Erlang/OTP 24)

次に、PJフォルダ直下に、以下ファイルを新規作成し、上記で調べたElixirバージョンを指定します（なおバージョン番号は、ローカルPCのElixirがバージョンアップするたびに変えてください）

elixir_buildpack.config

erlang_version=24.0
elixir_version=1.13.0

あと、下記2ファイルも追加します

phoenix_static_buildpack.config

clean_cache=true
node_version=12.16.1
npm_version=6.14.4

Gigalixirに不要な設定を削除

【2022/02/17追記】
下記はPhoenix 1.5以降、標準装備され、不要となりました

~~prod.exs末尾の「import_config "prod.secret.exs"」をコメントアウトします~~

config/prod.exs

use Mix.Config
…
# import_config "prod.secret.exs"

LiveViewをGigalixirで動かすために必要な設定

【2022/02/17 本章を追加】

下記の通り、URL設定とcheck_originが必要で、check_originを付けないとLiveViewが上手く動きません

config/prod.exs

use Mix.Config
…
config :basic, BasicWeb.Endpoint,
  url: [host: System.get_env("APP_NAME") <> ".gigalixirapp.com", port: 443],  # <-- add here
  check_origin: ["//" <> System.get_env("APP_NAME") <> ".gigalixirapp.com"],  # <-- add here
  cache_static_manifest: "priv/static/cache_manifest.json"
…

Phoenix 1.6をGigalixirで動かすために必要な設定

【2022/02/17 本章を追加】

esbuildが標準になったことで、下記を追加しないとassetsがビルドされません

assets/package.json

{
  "scripts": {
    "deploy": "cd .. && mix assets.deploy && rm -f _build/esbuild*"
  }
}

PJフォルダをGigalixirリモートレポジトリに設定

LiveViewのPhoenix PJフォルダ直下でgit初期化します

git config --global user.email "【Gigalixir登録したメールアドレス】"
git init

一度、Gigalixirリモートレポジトリ設定をしている場合、設定を削除する必要があるため、以下コマンドでリモートレポジトリ設定を削除します

git remote remove gigalixir

Gigalixirへのデプロイをするために、先ほど作成したアカウントでログインします

gigalixir login

以下コマンドで、現在のPhoenix PJフォルダをGigalixirのAppリモートレポジトリに紐付け、git pushした際、Gigalixirリモートレポジトリにpushされるようにします

gigalixir git:remote 【App名】

※コミット対象のgit add／commitが済んでいないため、ここでは未だgit pushは行いません

LiveViewアプリをGigalixirにリリース

GigalixirにLiveViewアプリをリリースします

まず、リリース対象ファイルを追加・コミットします

git add .
git commit -m "Replace by LiveView app"

その後、コミットをpushします（一度、コミットしていると、git pullしないと怒られますが、上書きでOKなので、-ffで矯正的にpushします）

git push gigalixir master -ff

以下コマンドで、リリースされたPhoenixのWebページをブラウザで表示します

gigalixir open

LiveViewアプリケーションがGigalixirで動くようになりました

終わり

今回は、GigalixirにLiveViewアプリをリリースしました

このGigalixirのURLを、スマホ上で閲覧すれば、LiveViewをスマホで見ることもできます

つまり、「Elixir／Phoenixで書いたアプリが、スマホアプリとしてリリースできる」ということを意味します

サーバサイドだけで書いたアプリが、スマホアプリとして、高速に動作する…この世界観を、ぜひ、お試しください

次回は、このアプリを正式にリリースする最後の一歩である、「独自ドメイン」を設定 します

ExcelからElixir入門⑩：ElixirサーバサイドSPAをスマホで見るためにGigalixirリリース