DaisyUIでデコったPhoenixアプリをFly.ioにデプロイして楽しむ(2022年)
Tags: phoenix, tailwindcss, daisyui, flyio
Published: 2022-05-08 20:15:17

[Tailwind]や[DaisyUI]が最近流行っていると聞き試してはみたものの、[Fly.io]へのデプロイに手こずってしまい辛い思いをしました。今後は楽しくできるよう成功パターンをメモします。

[Phoenix]アプリを[DaisyUI]でデコる[^1]方法や[Fly.io]については日本語で丁寧に解説してくれている資料もありますので、ここでは細かいことを気にせず[Fly.io]へのデプロイ自体を楽しみたいと思います。

もし何か間違っている点があったり、もっとクールなやり方をご存知でしたらぜひコメント欄にお便りお願いいたします。

[^1]: 「デコる」という言葉は[piyopiyo.ex #7：感想投稿サイトをデコろう！（daisyUI、tailwind css）（2022/05/07）レポート](https://qiita.com/torifukukaiou/items/92c7fa6442299e8e43ec)から学びました。

https://qiita.com/the_haigo/items/bb839bfc20b8864dd7ac

https://zenn.dev/koga1020/articles/b60725143bbadf6a2b5a

https://zenn.dev/koga1020/books/phoenix-guide-ja-1-6/viewer/fly

[Phoenix]: https://phoenixframework.org/
[DaisyUI]: https://daisyui.com/
[Tailwind]: https://tailwindcss.com/
[Tailwind plugins]: https://tailwindcss.com/docs/plugins
[mnishiguchi/hello_phx_daisyui_flyio]: https://github.com/mnishiguchi/hello_phx_daisyui_flyio
[Fly.io]: https://fly.io/
[Node.js]: https://nodejs.org/en/about/
[`npm`]: https://docs.npmjs.com/cli/v6/commands/npm

## 動作環境

```
elixir          1.13.4-otp-24
erlang          24.3.4
```

```
❯ mix phx.new --version
Phoenix installer v1.6.8
```

```
❯ fly version
fly v0.0.325 darwin/amd64 Commit: da2b638 BuildDate: 2022-04-28T04:00:48Z
```

## Fly.ioへのサインアップ

初めての方はまずFly.ioへのサインアップが必要です。

https://zenn.dev/koga1020/books/phoenix-guide-ja-1-6/viewer/fly#fly.io%E3%81%B8%E3%81%AE%E3%82%B5%E3%82%A4%E3%83%B3%E3%82%A2%E3%83%83%E3%83%97

https://hexdocs.pm/phoenix/fly.html#installing-the-fly-io-cli

## [サンプルアプリ][mnishiguchi/hello_phx_daisyui_flyio]を`git clone`

サンプルアプリ[mnishiguchi/hello_phx_daisyui_flyio]を作りましたのでそれを[Fly.io]へ楽しくデプロイします。

```
cd path/to/your/workspace

git clone https://github.com/mnishiguchi/hello_phx_daisyui_flyio

cd hello_phx_daisyui_flyio
```

## [サンプルアプリ][mnishiguchi/hello_phx_daisyui_flyio]からデプロイ関係のファイルを削除

- `fly launch`コマンドの実行中に`Dockerfile`が検知されると必要なファイルが自動生成されないので、予めデプロイ関係のファイルを削除しておきます。
- また過去のデプロイ時に使用した整合性の取れないファイルが残っているとエラーの原因になる可能性があります。
- 次項で`fly launch`コマンドを打つと再生成されます。

```sh
rm -rf rel fly.toml Dockerfile
```

## `fly launch`コマンドを打つ

- ? App Name
  - 任意のアプリ名を入力してEnter、もしくは何もせずEnter
- ? Select region
  - 任意の地域を指定してEnter、もしくは何もせずEnter
- ? Would you like to setup a Postgresql database now?
  - `Yes`
- ? Select configuration:
  - `Development`
- ? Would you like to deploy now?
  - デプロイの前に`Dockerfile`を修正したいので`No`

```
❯ fly launch
Creating app in /Users/mnishiguchi/src/hello_phx_flyio
Scanning source code
Detected a Phoenix app
? App Name (leave blank to use an auto-generated name): mnishiguchi-test-1
Automatically selected personal organization: Masatoshi Nishiguchi
? Select region: iad (Ashburn, Virginia (US))
Created app mnishiguchi-test-1 in organization personal
Set secrets on mnishiguchi-test-1: SECRET_KEY_BASE
Preparing system for Elixir builds
Installing application dependencies
Running Docker release generator
Wrote config file fly.toml
? Would you like to setup a Postgresql database now? Yes
For pricing information visit: https://fly.io/docs/about/pricing/#postgresql-clusters
? Select configuration: Development - Single node, 1x shared CPU, 256MB RAM, 1GB disk
Creating postgres cluster mnishiguchi-test-1-db in organization personal
Postgres cluster mnishiguchi-test-1-db created
  Username:    postgres
  Password:    1659337b1f06452fdb592b84db7d015bf41bcfa76d9a46de
  Hostname:    mnishiguchi-test-1-db.internal
  Proxy Port:  5432
  PG Port: 5433
Save your credentials in a secure place, you won't be able to see them again!

Monitoring Deployment

1 desired, 1 placed, 1 healthy, 0 unhealthy [health checks: 3 total, 3 passing]
--> v0 deployed successfully

Connect to postgres
Any app within the personal organization can connect to postgres using the above credentials and the hostname "mnishiguchi-test-1-db.internal."
For example: postgres://postgres:1659337b1f06452fdb592b84db7d015bf41bcfa76d9a46de@mnishiguchi-test-1-db.internal:5432

See the postgres docs for more information on next steps, managing postgres, connecting from outside fly:  https://fly.io/docs/reference/postgres/

Postgres cluster mnishiguchi-test-1-db is now attached to mnishiguchi-test-1
The following secret was added to mnishiguchi-test-1:
  DATABASE_URL=postgres://mnishiguchi_test_1:V8uo66rOJJWUHMS@top2.nearest.of.mnishiguchi-test-1-db.internal:5432/mnishiguchi_test_1
Postgres cluster mnishiguchi-test-1-db is now attached to mnishiguchi-test-1
? Would you like to deploy now? No

Your Phoenix app should be ready for deployment!.

If you need something else, post on our community forum at https://community.fly.io.

When you're ready to deploy, use 'fly deploy --remote-only'.
```

本番のアプリの場合はちゃんと出力をコピーしておいたほうがよさそうです。練習だけなら多分無視して大丈夫。

> Save your credentials in a secure place, you won't be able to see them again!

## デプロイする前にDockerfileに[Node.js]を追加

- [`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)

```diff
  # install build dependencies
  RUN apt-get update -y && apt-get install -y build-essential git \
+     && apt-get install -y curl \
+     && curl -sL https://deb.nodesource.com/setup_16.x | bash \
+     && apt-get install -y nodejs \
      && apt-get clean && rm -f /var/lib/apt/lists/*_*

  # prepare build dir
  	@@ -46,12 +49,19 @@ RUN mkdir config
  COPY config/config.exs config/${MIX_ENV}.exs config/
  RUN mix deps.compile

+ # install npm dependencies
+ COPY assets/package.json assets/package-lock.json ./assets/
+ RUN npm --prefix ./assets ci --progress=false --no-audit --loglevel=error
+
  COPY priv priv

  COPY lib lib

  COPY assets assets

+ # install NPM dependencies
+ RUN npm install --prefix assets
+
  # compile assets
  RUN mix assets.deploy
```

## デプロイ

以下のコマンドを打つだけです。

```
fly deploy --remote-only
```

## 便利な`fly`コマンド

- `fly`を打つと全コマンドが表示されます。
- `fly`は`flyctl`へのシンボリックリンクらしいです。[^2]
- とりあえず以下のコマンドを楽しみましょう。

[^2]: https://zenn.dev/koga1020/articles/b60725143bbadf6a2b5a#%E5%89%8D%E6%8F%90

```
fly dashboard
fly open
fly status
fly logs
```

https://fly.io/docs/flyctl/

## 今日の一句

https://twitter.com/torifukukaiou/status/1487227180253810689?s=20&t=Gf4uQMpTs3TyJNaJJNFlwA

![CleanShot 2022-05-08 at 15.39.01.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82804/8982864b-665d-2202-77ff-9462c39769d4.gif)

# <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/)