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

【本コラムは、3分で読めて、10分くらいでお試しいただけます】
[piacere](https://twitter.com/piacere_ex)です、ご覧いただいてありがとございます :bow:

[前回](https://qiita.com/piacerex/items/3f8ee18c9443d63955bf)作った「LiveView SPA」を、「Heroku」とほぼ同じ操作感のElixir／Phoenix向けPaaS「Gigalixir」にリリースします

なお、[「Phoenix」](https://qiita.com/piacerex/items/b7787580fce5f148242f#phoenix%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB)は、ElixirのWebフレームワークで、[「Gigalixir」](https://qiita.com/piacerex/items/1a9cbcc740ca3707eaec)は、Herokuに似たPhoenixが動くクラウド（PaaS）です

**■「ExcelからElixir入門」シリーズの目次**
[**①データ並替え／絞り込み**](https://qiita.com/piacere_ex/items/6714e1440e3f25fb46a1)
|> [**②データ列抽出、Web表示**](https://qiita.com/piacere_ex/items/b7787580fce5f148242f)
|> [<b>③WebにDBデータ表示</b>](https://qiita.com/piacere_ex/items/a7558adc6856e3577dc6)
|> [<b>④Webに外部APIデータ表示</b>](https://qiita.com/piacere_ex/items/4c212615a4eb699dd109)
|> [<b>⑤Webにグラフ表示</b>](https://qiita.com/piacere_ex/items/290b76b76d5ff8e019bf)
|> [**⑥SPAからPhoenix製APIを呼び出す（表示編）【LiveView版】**](https://qiita.com/piacerex/items/64e77b85bfb4c6832662)
|> [**⑦SPAからPhoenix製APIを呼び出す（更新編）【LiveView版】**](https://qiita.com/piacerex/items/78ee0d2ad8cca0927980)
|> [<b>⑧Gigalixirに本番リリース</b>](https://qiita.com/piacerex/items/1a9cbcc740ca3707eaec)
|> [**⑨ElixirサーバサイドのみでReactと同じSPA／リアルタイムUIが作れる「LiveView」**](https://qiita.com/piacerex/items/3f8ee18c9443d63955bf)
|> [**⑩ElixirサーバサイドSPAをスマホで見るためにGigalixirリリース**](https://qiita.com/piacerex/items/583174d72e6fc0cd289e)
|> [**⑪Gigalixir上のLiveViewアプリに独自ドメイン名を付与して正式なアプリ公開**](https://qiita.com/piacerex/items/b61348c282395167fd8c)
|> [**⑫Elixir／PhoenixのCRUD Webアプリをリリース**](https://qiita.com/piacerex/items/511f24888c7350639d0b)

# 本コラムの検証環境

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

- Windows 10
- Elixir 1.13.0 on WSL2 Ubuntu　※<b>[最新版のインストール手順はコチラ](https://qiita.com/piacerex/items/6b64dfe70f48c89d8385)</b>
- Phoenix 1.6.6　　　　　　　　※<b>[最新版のインストール手順はコチラ](https://qiita.com/piacere_ex/items/b7787580fce5f148242f#phoenix%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB)</b>
- PostgreSQL 10.17　　　　　　※<b>[最新版のインストール手順はコチラ](https://qiita.com/piacere_ex/items/a7558adc6856e3577dc6#postgresql%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB)</b>
- gigalixir 1.2.3 　 　 　　　　　 ※<b>[最新版のインストール手順はコチラ](https://qiita.com/piacerex/items/511f24888c7350639d0b#gigalixir%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E3%82%92%E4%BD%BF%E3%81%88%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB%E3%81%99%E3%82%8B)</b>
- git 2.24.1.windows.2 　 　 　　※<b>[最新版のインストール手順はコチラ](https://qiita.com/piacerex/items/1a9cbcc740ca3707eaec#%E3%83%AD%E3%83%BC%E3%82%AB%E3%83%ABpc%E3%81%A7git%E3%82%92%E4%BD%BF%E3%81%88%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB%E3%81%99%E3%82%8B)</b>

なお、このコラムから見た方への案内として、[LiveView SPA](https://qiita.com/piacere_ex/items/3f8ee18c9443d63955bf)を、そのまま既存のGigalixirのAppに上書きリリースするので、[Gigalixir環境の構築](https://qiita.com/piacere_ex/items/1a9cbcc740ca3707eaec)と、[LiveView Phoenix PJのローカルPCでの動作確認](https://qiita.com/piacere_ex/items/3f8ee18c9443d63955bf)を事前に実施しておいてください

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

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

```
cd basic
```

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

[GigalixirのElixirバージョンは、特に指定しない限り、1.5系が動作する](https://gigalixir.readthedocs.io/en/latest/main.html#specify-versions)ため、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に不要な設定を削除

<font color="red">【2022/02/17追記】<br>下記はPhoenix 1.5以降、標準装備され、不要となりました</font>

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

```elixir:config/prod.exs
use Mix.Config
…
# import_config "prod.secret.exs"
```

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

<font color="red">【2022/02/17 本章を追加】</font>

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

```elixir: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で動かすために必要な設定

<font color="red">【2022/02/17 本章を追加】</font>

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

```json: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リモートレポジトリ設定をしている場合](https://qiita.com/piacere_ex/items/1a9cbcc740ca3707eaec#pj%E3%83%95%E3%82%A9%E3%83%AB%E3%83%80%E3%82%92gigalixir%E3%83%AA%E3%83%A2%E3%83%BC%E3%83%88%E3%83%AC%E3%83%9D%E3%82%B8%E3%83%88%E3%83%AA%E3%81%AB%E8%A8%AD%E5%AE%9A)、設定を削除する必要があるため、以下コマンドでリモートレポジトリ設定を削除します

```
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で動くようになりました
![image.png](https://qiita-image-store.s3.amazonaws.com/0/155423/412c4de5-50bc-e1fa-4078-053400245113.png)

# 終わり

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

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

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

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

[次回は、このアプリを正式にリリースする最後の一歩である、**「独自ドメイン」を設定** します](https://qiita.com/piacerex/items/b61348c282395167fd8c)