【本コラムは、3分で読めて、10分くらいでお試しいただけます】
piacereです、ご覧いただいてありがとございます 
前回作った「LiveView SPA」を、「Heroku」とほぼ同じ操作感のElixir／Phoenix向けPaaS「Gigalixir」にリリースします
なお、「Phoenix」は、ElixirのWebフレームワークで、「Gigalixir」は、Herokuに似たPhoenixが動くクラウド（PaaS）です
■「ExcelからElixir入門」シリーズの目次
①データ並替え／絞り込み
|> ②データ列抽出、Web表示
|> ③WebにDBデータ表示
|> ④Webに外部APIデータ表示
|> ⑤Webにグラフ表示
|> ⑥SPAからPhoenix製APIを呼び出す（表示編）【LiveView版】
|> ⑦SPAからPhoenix製APIを呼び出す（更新編）【LiveView版】
|> ⑧Gigalixirに本番リリース
|> ⑨ElixirサーバサイドのみでReactと同じSPA／リアルタイムUIが作れる「LiveView」
|> ⑩ElixirサーバサイドSPAをスマホで見るためにGigalixirリリース
|> ⑪Gigalixir上のLiveViewアプリに独自ドメイン名を付与して正式なアプリ公開
|> ⑫Elixir／PhoenixのCRUD Webアプリをリリース
本コラムの検証環境
本コラムは、以下環境で検証しています（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がバージョンアップするたびに変えてください）
erlang_version=24.0
elixir_version=1.13.0
あと、下記2ファイルも追加します
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"」をコメントアウトします
use Mix.Config
…
# import_config "prod.secret.exs"
LiveViewをGigalixirで動かすために必要な設定
【2022/02/17 本章を追加】
下記の通り、URL設定とcheck_originが必要で、check_originを付けないとLiveViewが上手く動きません
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がビルドされません
{
"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で書いたアプリが、スマホアプリとしてリリースできる」ということを意味します
サーバサイドだけで書いたアプリが、スマホアプリとして、高速に動作する…この世界観を、ぜひ、お試しください