PhoenixをGigalixirにデプロイするときの備忘録

Phoenix 1.4 のアプリケーションをGigalixirにデプロイしたが、push中の `yarn install` で弾かれたり、URL開くと503になっていたりとスムーズに行かない部分があったため、対処法を記録として残しておく。

# 想定環境
* Elixir 1.8.2
* Phoenix Framework 1.4.6
* Node.js 10.16.0 (2019/06/17現在の最新LTS版)

# プロジェクト作成と設定
事前にPhoenixプロジェクトの作成や、GigalixirのCLI環境などを準備しておく。Elixir/PhoenixのバージョンをGigalixirとローカルで合わせるため、以下の設定をプロジェクトのルートディレクトリに作成する。

```config:elixir_buildpack.conf
elixir_version=1.8.2
```

Gigalixirのアプリケーション作成とリモートブランチの設定は`gigalixir create -n $APP_NAME`で同時にできる。[ドキュメント](https://gigalixir.readthedocs.io/en/latest/main.html#how-to-create-an-app)によればリージョンなどもここで設定できる。

# トラブル発生
Vue.jsやStylusなどを設定したり、Phoenixの実装を進めて、いざデプロイ…しようとしたところいろいろ躓いたので以下対処法になる。

## 問題１．git pushで弾かれる
`git push gigalixir master`でデプロイしたが、webpackのインストール中にエラーで弾き返された。以下ログ。

```
-----> Building dependencies
       Installing and caching node modules
       yarn install v0.27.5
       [1/4] Resolving packages...
       [2/4] Fetching packages...
       error webpack@4.4.0: The engine "node" is incompatible with this module. Expected version ">=6.11.5".
       error Found incompatible module
       info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
remote: Command '[u'docker', u'run', u'--memory-reservation=512m', u'--rm', u'-e', u'GIGALIXIR_SHOULD_CLEAN_CACHE=False', u'-v', u'/tmp/tmpRmegRg/inst-playground:/tmp/app', u'-v', u'/tmp/gigalixir/cache/inst-playground/:/tmp/cache', u'-v', u'/tmp/tmpRmegRg/env:/tmp/env', u'--env=USER=www-data', u'us.gcr.io/gigalixir-152404/herokuish:latest']' returned non-zero exit status 1
To https://git.gigalixir.com/your-app-name.git/
 ! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to 'https://git.gigalixir.com/your-app-name.git/'
```

どうやらNode.jsのバージョンが合わないようだ。というわけでバージョンの指定方法を公式ドキュメントから調べたところ、[ここ](https://gigalixir.readthedocs.io/en/latest/main.html#how-do-i-specify-my-elixir-erlang-node-npm-etc-versions)によれば、次のような設定ファイルをルートディレクトリに置けば良いようだ。nodejs/npm/yarnのバージョンは適当に調整すること。

```config:phoenix_static_buildpack.config
# Clean out cache contents from previous deploys
clean_cache=false

# We can change the filename for the compile script with this option
compile="compile"

# We can set the version of Node to use for the app here
node_version=10.16.0

# We can set the version of NPM to use for the app here
npm_version=6.9.0

# We can set the version of Yarn to use for the app here
yarn_version=1.16.0

# We can set the path to phoenix app. E.g. apps/phoenix_app when in umbrella.
phoenix_relative_path=.

# Remove node and node_modules directory to keep slug size down if it is not needed.
remove_node=false

# We can change path that npm dependencies are in relation to phoenix app. E.g. assets for phoenix 1.3 support.
assets_path=.

# We can change phoenix mix namespace tasks. E.g. `phoenix` for phoenix < 1.3 support.
phoenix_ex=phx
```

## 問題２．デプロイ先を見たら503でアクセスできない
デプロイはできたが、ページにアクセスしても503ばかり返ってくる。少し待ったりしたが、明らかに動いてないので`gigalixir logs -a $APP_NAME`でログ調査してみた。以下はそのログ。

```
2019-06-16T06:53:49+00:00 your-app-name[gigalixir]: Readiness probe failed: dial tcp 10.56.8.104:4000: connect: connection refused
2019-06-16T06:58:49+00:00 your-app-name[gigalixir]: Readiness probe failed: dial tcp 10.56.8.104:4000: connect: connection refused
2019-06-16T07:03:49+00:00 your-app-name[gigalixir]: Readiness probe failed: dial tcp 10.56.8.104:4000: connect: connection refused
2019-06-16T07:08:49+00:00 your-app-name[gigalixir]: Readiness probe failed: dial tcp 10.56.8.104:4000: connect: connection refused
2019-06-16T07:13:49+00:00 your-app-name[gigalixir]: Readiness probe failed: dial tcp 10.56.8.104:4000: connect: connection refused
...
```

アプリサーバーに繋がってない…というわけで、Phoenixアプリケーション側に問題があると見てconfig見てたらprod.exsをまともに設定していなかったことに気付く。以下のように修正した。

```elixir:config/prod.exs
use Mix.Config

config :projectname, PROJECTNAME_WEB.Endpoint,
  # url: [host: "example.com", port: 80], #<== 削除
  http: [port: 4000],  #<== 追加
  check_origin: ["//your-app-name.gigalixirapp.com"],  #<== 追加
  cache_static_manifest: "priv/static/cache_manifest.json"
```

# 最後に
ここまで来てやっとデプロイできた。Gigalixirはまだ新しいサービスなので、仕様が変わる可能性もある。使うときは一度ドキュメントに目を通したほうが良さそう。

近々、現在開発中のプロジェクトをソースも含めて公開（予定）

# 参考資料
* [Gigalixir 公式ドキュメント](https://gigalixir.readthedocs.io/en/latest/)
* [【本番構築Gigalixir編①】Elixir／Phoenixの初期PJリリースまでの手順](https://qiita.com/piacere_ex/items/1a9cbcc740ca3707eaec)