42
16

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Last updated at Posted at 2018-11-04

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

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

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

なお、「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でも動作する想定です)

あと、前回インストールしたgitも使います

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

なお、前回、構築したGigalixirのAppを、今回用の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」直下に追記します

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

「New Whats new」リンクをクリックすると、入力画面が表示され、「Submit」ボタンクリックでデータ投入できます
image.png

「Back」リンクをクリックします
image.png

一覧に、先ほど投入したデータが表示されます
image.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をインストールしてください

pip
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

終わり

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

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

42
16
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
42
16

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?