Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
75
Help us understand the problem. What is going on with this article?
@piacerex

Excelから関数型言語マスター8回目:Gigalixirにお試しリリース

fukuoka.ex代表のpiacereです
ご覧いただいて、ありがとうございます:bow:

前回までは、Vue.jsから内部APIにアクセスし、DB操作をするアプリを開発してきましたが、今回は、「Heroku」とほぼ同じ操作感のElixir/Phoenix向けPaaS「Gigalixir」にて、DB無しのカンタンなWebアプリをリリースする方法をお伝えします

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

このシリーズの、前回までの記事は、以下になります
 |> Excelから関数型言語マスター1回目:データ行の”並べ替え”と”絞り込み”
 |> Excelから関数型言語マスター2回目:データ列の”抽出”、”Web表示”
 |> Excelから関数型言語マスター3回目:WebにDBデータ表示
 |> Excelから関数型言語マスター4回目:Webに外部APIデータ表示
 |> Excelから関数型言語マスター5回目:Webにグラフ表示
 |> Excelから関数型言語マスター6回目:Vue.js+内部API(表示編)
 |> Excelから関数型言語マスター7回目:Vue.js+内部API(更新編)

「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から無くなってました

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

GigalixirのElixirバージョンは、特に指定しない限り、1.5系が動作するため、ローカル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フォルダ直下に、以下ファイルを新規作成し、上記で調べたElixirバージョンを指定します(なおバージョン番号は、ローカルPCのElixirがバージョンアップするたびに変えてください)

elixir_buildpack.config
elixir_version=1.8.1

※Erlangは、このElixirバージョンに合わせたものが勝手に入るので、指定不要です

【2020/2/18追記】新しいElixirバージョン(恐らく1.9.4以上)を利用する場合は、下記のようにErlangのバージョンも指定しないといけません

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

【2021/4/1追記】prod.exsのポート番号を4000番に変更

Gigalixirはprodで起動されるものの、80番や443番では無く、4000番で起動したPhoenixに接続しており、以前はprod.exsの設定に関わらず4000番で起動してくれていましたが、最近のGigalixirは、prod.exsを見るように変わったため、指定の変更が必要です

use Mix.Config

config :basic, BasicWeb.Endpoint,
  url: [host: "example.com", port: 4000],  
                                 # ^-- modify here

ここを変更しないと、下記エラーを出します

 Your app is failing health checks, which means it isn't listening on port 4000 yet.
 Readiness probe failed: dial tcp 10.56.20.124:4000: connect: connection refused

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

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

git config --global user.email "【Gigalixir登録したメールアドレス】"
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

もし、「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

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

それでもダメな場合や、以下のようなエラーログが出る場合は、上記リリースログ内の「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:

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
75
Help us understand the problem. What is going on with this article?