LoginSignup
5

More than 3 years have passed since last update.

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

Last updated at Posted at 2019-06-17

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とローカルで合わせるため、以下の設定をプロジェクトのルートディレクトリに作成する。

elixir_buildpack.conf
elixir_version=1.8.2

Gigalixirのアプリケーション作成とリモートブランチの設定はgigalixir create -n $APP_NAMEで同時にできる。ドキュメントによればリージョンなどもここで設定できる。

トラブル発生

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

問題1.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のバージョンが合わないようだ。というわけでバージョンの指定方法を公式ドキュメントから調べたところ、ここによれば、次のような設定ファイルをルートディレクトリに置けば良いようだ。nodejs/npm/yarnのバージョンは適当に調整すること。

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

問題2.デプロイ先を見たら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をまともに設定していなかったことに気付く。以下のように修正した。

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はまだ新しいサービスなので、仕様が変わる可能性もある。使うときは一度ドキュメントに目を通したほうが良さそう。

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

参考資料

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
5