ExcelからElixir入門⑫：Elixir／PhoenixのCRUD Webアプリをリリース

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

今回は、Elixir／Phoenix向けPaaS「Gigalixir」にて、DB構築をして、Web+DBアプリをリリースする、実践的な内容です

Railsで言うScaffoldに相当するPhoenix機能を使い、カンタンなCRUD Webアプリをリリースする方法をお伝えします

なお、[「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.8.1　　　　※<b>[最新版のインストール手順はコチラ](https://qiita.com/piacere_ex/items/6714e1440e3f25fb46a1#%E4%BA%8B%E5%89%8D%E6%BA%96%E5%82%99elixir%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB)</b>
- Phoenix 1.4.2 　　 ※<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.1 　※<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.0.9 　　 ※<b>最新版のインストール手順は本コラム中にあります</b>

あと、[前回インストールしたgit](https://qiita.com/piacere_ex/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)も使います

また、以下コマンドで今回用のPhoenix PJを構築し、GigalixirのAppにリリースし直します

なお、[前回、構築したGigalixirのApp](https://qiita.com/piacere_ex/items/1a9cbcc740ca3707eaec#ggalixir%E3%81%AE%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88%E4%BD%9C%E6%88%90)を、今回用のPhoenix PJにて上書きリリースするので、Gigalixir環境を未構築の場合は、前回の内容を事前に実施しておいてください

```
mix phx.new gigalixir_db
…
Fetch and install dependencies? [Yn] Y
…
cd gigalixir_db
（elixir_buildpack.configを追加して、elixir_version=1.8.1と記載）
（config/prod.exsの最終行をコメントアウト）
git init
git remote add gigalixir https://【Gigalixirログイン情報】@git.gigalixir.com/【App名】.git
```

# CRUD Webアプリをローカルで作成

まず、DBを作成します

```
mix ecto.create
```

PhoenixでCRUD Webアプリを作成するには、mix phx.gen.htmlを使います

```
mix phx.gen.html Cms WhatsNew whatsnews title:string body:string url:string image:string
```

以下ログと、実行後の作業指示が示されます

```
…
Add the resource to your :api scope in lib/gigalixir_db_web/router.ex:

    resources "/whatsnews", WhatsNewController

Remember to update your repository by running migrations:

    $ mix ecto.migrate
```

ルーティングにWeb用エントリーとして、上記「resources "/whatsnews", WhatsNewController」を、「get "/", PageController, :index」直下に追記します

```elixir:lib/gigalixir_db_web/router.ex
defmodule GigalixirDbWeb.Router do
  …
  scope "/", GigalixirDbWeb do
    pipe_through :browser # Use the default browser stack

    get "/", PageController, :index
    resources "/whatsnews", WhatsNewController  # <---add here
  end
  …
```

マイグレートします

```
mix ecto.migrate
```

Phoenixを起動してください

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

ブラウザで「``http://localhost:4000/whatsnews``」にアクセスすると、CRUD Webページが見れます
![image.png](https://qiita-image-store.s3.amazonaws.com/0/155423/78a4cd4f-9c86-c2c3-fb55-eee73a11a0ae.png)

「New Whats new」リンクをクリックすると、入力画面が表示され、「Submit」ボタンクリックでデータ投入できます
![image.png](https://qiita-image-store.s3.amazonaws.com/0/155423/e807183c-df6c-abc7-c346-72fbc1807e05.png)

「Back」リンクをクリックします
![image.png](https://qiita-image-store.s3.amazonaws.com/0/155423/01c71136-371f-068b-26d5-eb2084b4ce1a.png)

一覧に、先ほど投入したデータが表示されます
![image.png](https://qiita-image-store.s3.amazonaws.com/0/155423/b62ed70c-0be6-6aae-01c9-03c41010baba.png)

たった、これだけの手順で、CRUD Webアプリが構築できて、便利ですね

# gigalixirコマンドを使えるようにする

さて、ローカルで動作したCRUD Webアプリを、Gigalixir上で動かすためには、ローカルPCへのgigalixirコマンドのインストールが必要ですが、そのためには、pipが利用可能である必要があります

## pipコマンドが利用可能か確認（不可ならインストール）

gigalixirコマンドのインストールには、pipコマンド（Pythonパッケージ管理ツール）を使うため、まずpipが使える状態かを確認します

コマンドプロンプトやシェルで、以下を実行した際に、バージョン表示されれば、pipはインストール済みです

```
pip --version

pip 【バージョン番号】 from 【pipインストール先パス】/pip (python 【Pythonバージョン】)
```

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

<b>pip</b>
https://qiita.com/suzuki_y/items/3261ffa9b67410803443

## gigalixirコマンドのインストール

以下コマンドでインストールします

```
pip install gigalixir --ignore-installed six
```

## gigalixirコマンドのログイン

gigalixirコマンドを使うには、ログインが必要なので、以下コマンドを入力し、Gigalixirにアカウント登録した際のメールアドレス／パスワードでログインしてください

```
gigalixir login

Email:    【メールアドレス】
Password: 【パスワード】
Would you like us to save your api key to your ~/.netrc file? [Y/n]: Y
Logged in as 【メールアドレス】
```

.netrcファイルに、Gigalixirにログインするための設定が追加しないと、この後のコマンドが効かなくなるので、上記質問は、必ずYで答えてください

作成された、.netrcファイルは、以下で内容確認できます

```
cat ~/.netrc
machine git.gigalixir.com
        login 【メールアドレス】
        password 【パスワード】
machine api.gigalixir.com
        login 【メールアドレス】
        password 【パスワード】
```

## ssh公開鍵の設定

gigalixirコマンドでのマイグレートを行うためには、ssh公開鍵の設定が必要です

ssh公開鍵を利用するのが初めてなら、以下コマンドで、公開鍵／秘密鍵のペアを発行します

```
ssh-keygen -t rsa
```

設定されたssh公開鍵文字列を、この後の設定で使うので、以下コマンドで表示します

```
cat ~/.ssh/id_rsa.pub
```

Windowsの場合は、以下コマンドで、ssh公開鍵文字列を表示します

```
type %HOMEDRIVE%%HOMEPATH%\.ssh\id_rsa.pub
```

gigalixirコマンドに、上記で表示したssh公開鍵文字列を指定して、ssh公開鍵を設定します

```
gigalixir account:ssh_keys:add "【ssh公開鍵文字列】"
```

設定したssh公開鍵は、以下コマンドで確認できます

```
gigalixir account:ssh_keys
```

設定したssh公開鍵が表示されます

```
[
  {
    "id": xxx,
    "key": "ssh-rsa AAA…KNw== xxxxx@DESKTOP-XXXXXXX"
  }
]
```

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

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

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

# GigalixirにPostgreSQL DBを作成

gigalixirコマンドが使えるようになったので、Gigalixir上のPostgreSQL DBを以下のコマンドで作成します（これは、ローカルでのmix ecto.createに相当します）

```
gigalixir pg:create --free
A word of caution: Free tier databases are not suitable for production and migrating from a free db to a standard db is not trivial. Do you wish to continue? [y/N]: y
```

以下のようなログが出たら、DB作成完了です

```
{
  "app_name": "【App名】",
  "database": "xxxxxxxx-d8ef-45d1-8492-5a929242ca15",
  "host": "postgres-free-tier-1.gigalixir.com",
  "id": "xxxxxxxx-d8ef-45d1-8492-5a929242ca15",
  "password": "xxxxxxxxxxxxxxxxxxxxxxxxxx",
  "port": 5432,
  "state": "AVAILABLE",
  "tier": "FREE",
  "url": "postgresql://xxxxxxxx-d8ef-45d1-8492-5a929242ca15-user:xxxxxxxxxxxxxxxxxxxxxxxxxx@postgres-free-tier-1.gigalixir.com:5432/xxxxxxxx-d8ef-45d1-8492-5a929242ca15",
  "username": "xxxxxxxx-d8ef-45d1-8492-5a929242ca15-user"
}
```

# GigalixirにCRUD Webアプリをリリース

作成したCRUD Webアプリをコミットします

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

コミットをpushすると、GigalixirにCRUD Webアプリがリリースされます

```
git push gigalixir master -ff
```

途中でエラーが出たときは、下記で不要ファイルを削除して、再度、pushを行ってください

```
rm assets/package-lock.json
```

# gigalixirコマンドでのマイグレート

以下コマンドで、Gigalixir側でマイグレートを行います（ローカルでのmix ecto.migrateに相当します）

```
gigalixir run mix ecto.migrate
The authenticity of host '[xxxxx.gcp.ssh.gigalixir.com]:xxxxx ([xxx.xxx.xxx.xxx]:xxxxx)' can't be established.
ECDSA key fingerprint is SHA256:+LJIv+/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.
Are you sure you want to continue connecting (yes/no)? 【yesを入力】
Warning: Permanently added '[xxxxx.gcp.ssh.gigalixir.com]:xxxxx,[xxx.xxx.xxx.xxx]:xxxxx' (ECDSA) to the list of known hosts.
Enter passphrase for key 'xxxx/.ssh/id_rsa': 【パスフレーズを入力】
```

# Gigalixir上でCRUD Webアプリを動かす

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

```
gigalixir open
```

以下のようなエラーログが出る場合は、ログ内のURLをブラウザにコピペしてください

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

ブラウザのURLの末尾に「/whatsnews」を追加すると、Gigalixir上で、CRUD Webページが見れます

ローカルPC同様、CRUD操作ができますので、お試しください
![image.png](https://qiita-image-store.s3.amazonaws.com/0/155423/cded97be-836c-ca9d-d6e1-5104ab51a6df.png)

# 終わり

これで、GigalixirにCRUD Webアプリをリリースできました

Elixir／PhoenixとGigalixirの凄まじい威力を実感いただけたでしょうか？