74
Help us understand the problem. What are the problem?

posted at

updated at

Organization

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

EDI/fukuoka.ex/kokura.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

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

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

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

「CREATE」ボタンをクリックすると、App名を求められるので、任意の名前を入力し、「CREATE」ボタンをクリックします
image.png

App(Gigalixirでのリリース先となる場所)が作成されます
image.png

このキャプチャだと「NAME」に書かれた「triviex」が、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で動かす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フォルダ直下に、以下ファイルを新規作成し、上記で調べた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のデプロイが必要なので、下記も行ってください

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

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

それでもダメな場合や、以下のようなエラーログが出る場合は、上記リリースログ内の「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
Sign upLogin
74
Help us understand the problem. What are the problem?