ExcelからElixir入門⑧：Gigalixirに本番リリース

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

[前回](https://qiita.com/piacerex/items/7cd1162ce6d66a334a07)は、内部APIにアクセスし、DB操作をするSPAを開発しました

今回は、「Heroku」とほぼ同じ操作感のElixir／Phoenix向けPaaS「Gigalixir」にて、DB無しのカンタンなWebアプリをリリースする方法をお伝えします

**■「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)

# 「Gigalixir」で何ができるか？

「Gigalixir」は、Elixir／Phoenix向けのPaaSです

Herokuと同様、git pushのみで、アプリのリリースが行え、DB（PostgreSQL）も利用できるので、気軽にElixir／Phoenixの本番運用が開始できます

独自ドメイン設定時は、「Let's Encrypt」を使った無料SSL／TLS設定も半自動で行えます

また、本番運用とステージング運用を切り替えることもできれば、動かす筐体をGCPとAWSから選択することも可能です（デフォルトはGCP）

このように、至れり尽くせりなGigalixirですが、日本語ドキュメントがほぼ無いため、そもそも知らない／知っていても利用が不安、といった声をよく聞くので、今回コラム化してみました

なお、英語ではありますが、以下にGigalixirのリファレンスがあります（そこまで難しい内容で書かれてはいないので、英語が苦手な方でも、頑張れば読めるレベルかと思います）
https://gigalixir.readthedocs.io/en/latest/

# ローカルPCでgitを使えるようにする

今回の手順は、gitコマンドが使えることを前提としているので、コマンドプロンプトやシェルで、以下を実行して、バージョン表示されることを確認してください

```
git --version
git version 【バージョン番号】
```

バージョン表示されない場合は、以下等を参考にして、事前にインストールしておいてください

<b>git</b>
Windows：https://qiita.com/KSA10/items/a1ea27c07008b09e9328
mac：https://qiita.com/furusin_oriver/items/974a7b7fb8c56ad88d6e
Linux：https://ctips.slackhack.net/git/811/

# Gigalixirのアカウント作成

以下URLをブラウザで開きます
https://gigalixir.com/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155423/c63f1971-555a-c15a-9b87-260ac2bcc82a.png)

「Get Started For Free」ボタンをクリックすると、ユーザ登録画面が出るので、メールアドレスとパスワードを入力し、アカウント作成します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155423/a17927bb-1ed6-ba33-5654-56a6e7e2743e.png)

確認メールが届くので、メール中の「Confirm」ボタンをクリックします
![image.png](https://qiita-image-store.s3.amazonaws.com/0/155423/3fb2a629-f201-f4ee-6988-338458e65479.png)

アカウント作成はこれで完了です

Gigalixirトップの「Sign In」リンクをクリックすると、ログイン画面が出るので、先程作成したアカウントでログインします

ログインすると、ダッシュボードが表示されます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155423/ee1c7cfd-97be-b725-0675-e6e3d8600eb1.png)

「CREATE」ボタンをクリックすると、App名を求められるので、任意の名前を入力し、「CREATE」ボタンをクリックします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155423/aee0e6e7-6397-79e1-1a3f-a344d232f6c4.png)

App（Gigalixirでのリリース先となる場所）が作成されます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155423/4e1c3ad2-28ee-ef77-0ac4-ae16b3440f90.png)

このキャプチャだと「NAME」に書かれた「triviex」が、App名で、これからの操作で指定します

この後の操作は、Phoenix PJ作成後に続きを行います

# ローカルPCでPhoenix PJを作成

Phoneix PJを作成し、ライブラリ取得も行います

```
mix phx.new gigalixir_nodb --no-ecto
…
Fetch and install dependencies? [Yn] Y
…
```

Phoenixサーバーを起動します

```
iex -S mix phx.server
```

ブラウザで「```http://localhost:4000```」にアクセスすると、Phoenixで作られたWebページが見れます
![image.png](https://qiita-image-store.s3.amazonaws.com/0/155423/818578fd-10b1-ddfa-c32e-71526aa52a9a.png)

# Gigalixirで動かすElixirバージョンを指定する

[GigalixirのElixirバージョンは、特に指定しない限り、1.5系が動作する](https://gigalixir.readthedocs.io/en/latest/main.html#specify-versions)ため、ローカルPCのElixirバージョンに合わせる必要があります

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

```
elixir --version
Erlang/OTP 20 [erts-10.3] [64-bit] [smp:4:4] [ds:4:4:10] [async-threads:1]

Elixir 1.8.1 (compiled with Erlang/OTP 20)
```

次に、PJフォルダ直下に、以下ファイルを新規作成し、上記で調べたErlangとElixirのバージョンを指定します

```elixir_buildpack.config
erlang_version=22.2
elixir_version=1.10.1
```

# Gigalixirで動かすnpm／Node.jsバージョンを指定する

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

```phoenix_static_buildpack.config
clean_cache=true
node_version=12.16.1
npm_version=6.14.4
```

# esbuildのassetsデプロイ設定（Phoenix 1.6以降のみ）

Phoenix 1.6以降のesbuildを利用していれば、assetsのデプロイが必要なので、下記も行ってください

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

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

さきほど作成したPhoenix PJフォルダ直下でgit初期化します（その手前でgitにメールアドレスを設定します）

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

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

```
gigalixir login
```

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

```
gigalixir git:remote 【App名】
```

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

# Gigalixirへのリリース

いよいよ、GigalixirにPhoenix PJをリリースします

まず、リリース対象となる、ローカルフォルダ配下のファイルを追加・コミットします

```
git add .
git commit -m "New"
```

その後、コミットをpushします

```
git push gigalixir master
```

もし、「error: failed to push some refs to '【git URL】'」というようなエラーが出てしまう場合は、以下でpushしてください

```
git push -f gigalixir master
```

それでもエラーが解消しないときは、Elixirバージョンが新し過ぎて、Gigalixirが未対応の可能性あるため、上記でelixir_buildpack.configに設定したバージョンを下げた上で、再度git pushを試してください

さて、このpushが成功すると、Gigalixir側のレポジトリが更新された後、Gigalixir側で、mix deps.getやコンパイルが自動的に走り、リリースが行われ、Phoenixが起動します

```
…
remote: Creating release.
remote: Starting zero-downtime rolling deploy.
remote: Please wait a minute for the new instance(s) to roll out and pass health checks.
remote: For troubleshooting, See http://gigalixir.readthedocs.io/en/latest/main.html#troubleshooting
remote: For help, contact help@gigalixir.com
remote: curl https://trivial-unlawful-insect.gigalixirapp.com/
remote: Updated property [core/account].
To https://git.gigalixir.com/trivial-unlawful-insect.git
 * [new branch]      master -> master
```

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

```
gigalixir open
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/155423/1b16180c-c7a6-b095-360b-0e93ca3e7cfa.png)

表示されるまで時間がかかる場合もありますので、上記コマンドを何回か試してみてください

それでもダメな場合や、以下のようなエラーログが出る場合は、上記リリースログ内の「curl https://～」で始まるURLをブラウザにコピペしてください

```
Running: xdg-open https://【App名】.gigalixirapp.com
[WinError 2] 指定されたファイルが見つかりません。
```

# 終わり

これで、GigalixirにPhoenixアプリをリリースすることができるようになりました

以降は、コミットした内容をgit pushするだけで、GigalixirにWebアプリがリリースできるようになります、素晴らしい！:confetti_ball:

[次回は、**第4回で作成したWeb+APIアプリをLiveView化** したいと思います](https://qiita.com/piacerex/items/3f8ee18c9443d63955bf)