111
74

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入門⑧:Gigalixirに本番リリース

Last updated at Posted at 2018-11-04

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

前回は、内部APIにアクセスし、DB操作をするSPAを開発しました

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

■「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アプリをリリース

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

ローカル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
…

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:

次回は、第4回で作成したWeb+APIアプリをLiveView化 したいと思います

111
74
1

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
111
74

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?