PhoenixアプリをFly.ioへデプロイする際のトラブルシューティング(2022年)

[`check_origin`]: https://hexdocs.pm/phoenix/Phoenix.Endpoint.html#module-runtime-configuration
[`fly launch`]: https://fly.io/docs/flyctl/launch/
[`fly logs`]: https://fly.io/docs/flyctl/logs/
[`fly secrets list`]: https://fly.io/docs/flyctl/secrets-list/
[`fly secrets set`]: https://fly.io/docs/flyctl/secrets-set/
[`fly status`]: https://fly.io/docs/flyctl/status/
[`npm`]: https://docs.npmjs.com/cli/v6/commands/npm
[`SECRET_KEY_BASE`]: https://hexdocs.pm/phoenix/deployment.html#handling-of-your-application-secrets
[DaisyUI]: https://daisyui.com/
[Fly.io]: https://fly.io/
[mnishiguchi/hello_phx_daisyui_flyio]: https://github.com/mnishiguchi/hello_phx_daisyui_flyio
[Node.js]: https://nodejs.org/en/about/
[Phoenix]: https://phoenixframework.org/
[Tailwind plugins]: https://tailwindcss.com/docs/plugins
[Tailwind]: https://tailwindcss.com/
[`mix phx.gen.release --ecto`]: https://hexdocs.pm/phoenix/Mix.Tasks.Phx.Gen.Release.html
[`mix phx.gen.release`]: https://hexdocs.pm/phoenix/Mix.Tasks.Phx.Gen.Release.html

## まずは
- 落ち着いてエラーメッセージを読んで魚拓も取っておく
- [`fly status`]を見てみる
- [`fly logs`]を見てみる
- もう一回デプロイしてみる

## [`SECRET_KEY_BASE`] is missing

<img width="1062" alt="CleanShot 2022-05-08 at 11 08 44@2x" src="https://user-images.githubusercontent.com/7563926/167302620-4380391e-7ad2-4fc4-b971-3930a97459b0.png">

- [`SECRET_KEY_BASE`]がセットされていない。
- 通常[`fly launch`]コマンドを打った時に[`SECRET_KEY_BASE`]は自動でセットされるはずなのですが、何らかの原因でその処理がスキップされた可能性があります。
- [`fly launch`]コマンドの実行中に`Dockerfile`が検知されると必要なファイルが自動生成されないので要注意。
- [`fly secrets list`]コマンドにより現時点でセットされている環境変数を確認できます。
- 手動で環境変数をセットしたい場合は[`fly secrets set`]コマンドが使えます。

```
fly secrets set SECRET_KEY_BASE=$(mix phx.gen.secret)
```

![CleanShot 2022-05-08 at 16 22 26](https://user-images.githubusercontent.com/7563926/167314425-a525bc89-9ee2-44fd-a099-1a89a3cc441b.png)

## `npm: not found`

<img width="1249" alt="CleanShot 2022-05-08 at 10 37 51@2x" src="https://user-images.githubusercontent.com/7563926/167301388-3ce27ac7-a9e0-4cf4-9a9c-19cf10ba25e7.png">

- `Dockerfile`で[Node.js]が 正しくインストールされているか確認。
- [`npm`]コマンドがなくても良い場合、アプリの中で[`npm`]コマンドを使用している部分を修正。
- [DockerfileにNode.jsを追加する例](https://github.com/mnishiguchi/hello_phx_daisyui_flyio/commit/2b4072f7f105e8dc2c2ec95702cf59b34cac82d0)

## `Command: /app/bin/migrate`でエラー

- 何らかの原因で`lib/app_name/release.ex`が生成されなかった可能性あり。
- [`fly launch`]コマンドの実行中に`Dockerfile`が検知されると必要なファイルが自動生成されないので要注意。
- [`mix phx.gen.release --ecto`]コマンドを打ったら解決する場合あり。

![No such file or directory](https://user-images.githubusercontent.com/7563926/164714101-1d77a9fa-f0d0-4617-94f2-fa8f26061f09.png)

## `mix assets.deploy`でエラー

- [Tailwind]等が正しくインストールされているか確認。
- [`npm`]コマンドを使うために[Node.js]が必要となるようです。
- [tailwind Hexパッケージ](https://hex.pm/packages/tailwind)を使用したら[`npm`]コマンドが不要になると思われますが、[DaisyUI]等の[Tailwindプラグイン][Tailwind plugins]を使用するためには[Tailwind]をNPMでインストールする必要があると理解しています :thinking:

> [Note: The stand-alone Tailwind client bundles first-class tailwind packages within the precompiled executable. For third-party Tailwind plugin support, the node package must be used. See the tailwind nodejs installation instructions if you require third-party plugin support.](https://hexdocs.pm/tailwind/Tailwind.html)

<img width="1435" alt="CleanShot 2022-04-23 at 12 20 53@2x" src="https://user-images.githubusercontent.com/7563926/164914898-c31b907e-c96d-49fb-8a5c-edbca9ddf6e5.png">

## `LiveView`がイゴかない

- `config/runtime.exs`で[`check_origin`]を設定。
  - `false`もしくは全てのデプロイ対象のドメイン名をリストする。

```elixir
check_origin: false
```

```elixir
check_origin: [
  "//hello.fly.dev",
  "//hello.mnishiguchi.com"
]
```

# <u><b>Elixirコミュニティに初めて接する方は下記がオススメです</b></u>

**Elixirコミュニティ の歩き方 －国内オンライン編－**<br>
https://speakerdeck.com/elijo/elixirkomiyunitei-falsebu-kifang-guo-nei-onrainbian

[![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155423/f891b7ad-d2c4-3303-915b-f831069e28a4.png)](https://speakerdeck.com/elijo/elixirkomiyunitei-falsebu-kifang-guo-nei-onrainbian)

**日本には28箇所のElixirコミュニティがあります**<br>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155423/7fdc5db7-dfad-9d10-28f8-1e0b8830a587.png)

## 日程からイベントを探すならElixirイベントカレンダー:calendar:

** Elixirイベントカレンダー **<br>
[https://elixir-jp-calendar.fly.dev/](https://elixir-jp-calendar.fly.dev/)

[![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109744/985acaa4-50c9-da42-ae32-50fbf9119e61.png)](https://elixir-jp-calendar.fly.dev/)