Edited at
ElixirDay 4

【本番構築Gigalixir編①】Elixir/Phoenixの初期PJリリースまでの手順

fukuoka.ex代表のpiacereです

ご覧いただいて、ありがとうございます:bow:

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

なお、「Phoenix」は、ElixirのWebフレームワークです

内容が、面白かったり、役に立ったら、「いいね」よろしくお願いします :wink:


「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/


本コラムの検証環境、事前構築のコマンド

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


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

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

git --version

git version 【バージョン番号】

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

git

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

「GET STARTED FOR FREE」ボタンをクリックすると、ユーザ登録画面が出るので、メールアドレスとパスワードを入力し、アカウント作成します

image.png

確認メールが届くので、メール中の「Confirm」ボタンをクリックします

image.png

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

image.png

ログインすると、ダッシュボードが表示されます

image.png

「Create App」ボタンをクリックすると、App(Gigalixirでのリリース先となる場所)が作成されます

image.png

このキャプチャだと「NAME」に書かれた「trivial-unlawful-insect」が、App名で、これからの操作で指定します(App作成時に振られる名前なので、お手元では各自、異なる名前になっていると思います)

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


ローカルPCでPhoenix PJを作成

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

mix phx.new gigalixir_nodb --no-ecto


Fetch and install dependencies? [Yn] Y
* running mix deps.get
* running mix deps.compile
* running cd assets && npm install && node node_modules/webpack/bin/webpack.js --mode development

Phoenixサーバーを起動します

iex -S mix phx.server

ブラウザで「http://localhost:4000」にアクセスすると、Phoenixで作られたWebページが見れます

image.png


Gigalixirに不要なコンフィグを削除

prod.exsのEndpoint設定の「load_from_system_env: true,」の上に「server」を追加し、末尾の「import_config "prod.secret.exs"」をコメントアウトします



【2019/3/26追記】load_from_system_envはPhoenix 1.4から無くなってました


config/prod.exs

use Mix.Config


# import_config "prod.secret.exs"


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

さきほど作成したPhoenix PJフォルダ直下でgit初期化します

git init

次に、GigalixirダッシュボードのApp名の右にある「Setup」ボタンをクリックすると、Appにリリースするためのgit設定・操作と、gigalixirコマンドの導入方法が表示されるので、「Deploy」の1行目に書かれているコマンドをコピペして、実行します

このコマンドで、GigalixirのAppにあるリモートレポジトリが、Phoenix PJフォルダに設定され、git pushした際、Gigalixirリモートレポジトリにpushされるようになります

image.png

git remote add gigalixir https://【Gigalixirログイン情報】@git.gigalixir.com/【App名】.git

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


Gigalixirへのリリース

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

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

git add .

git commit -m "New"

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

git push gigalixir master

この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

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

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

Running: xdg-open https://【App名】.gigalixirapp.com

[WinError 2] 指定されたファイルが見つかりません。


終わり

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

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

次回は、「CRUD WebアプリをGigalixirにリリース」したいと思います


p.s.「いいね」よろしくお願いします

ページ左上の image.pngimage.png のクリックを、どうぞよろしくお願いします:bow:

ここの数字が増えると、書き手としては「ウケている」という感覚が得られ、連載を更に進化させていくモチベーションになりますので、もっとElixirネタを見たいというあなた、私達と一緒に盛り上げてください!:tada: