Herokuと同機能？！renderにPhoenix1.6＋LiveViewをデプロイしてみる

## render is 何

renderはGitHub、GitLabのリポジトリからデプロイできるPaaSです。

今回はPhoenixアプリをデプロイしたいのでWeb Serviceを作成しますが、
他にStatic Site（Reactなど）、Background Workers（Celery、Sidekiqなど）、Cron Jobs、
DBはPostgreSQL、Redisが作成できます。

https://render.com/

Freeプランがあるので、今回はそちらを使っていきます。

## Phoenixアプリを作成する

今回は公式ドキュメント参考にしつつPhoenixアプリを作成します。（公式はDBを使ってないので注意）
ドキュメントがPhoenix1.6に対応していないようなので、少しアレンジしていきます。

https://render.com/docs/deploy-phoenix

### Phoenixアプリの作成

```zsh
$ mix phx.new phoenix_hello
```

```zsh
$ cd phoenix_hello
$ mix ecto.create
```

#### liveViewの画面を追加

LiveViewのスキャフォールドを実行します

```zsh
$ mix phx.gen.live Blogs Blog blogs title:string body:text
```

router.exにルートを追加します

```config/router.ex
  scope "/", DeployRenderWeb do
    pipe_through :browser

    live "/blogs", BlogLive.Index, :index # <=追記
    live "/blogs/new", BlogLive.Index, :new # <=追記
    live "/blogs/:id/edit", BlogLive.Index, :edit # <=追記

    live "/blogs/:id", BlogLive.Show, :show # <=追記
    live "/blogs/:id/show/edit", BlogLive.Show, :edit # <=追記

    get "/", PageController, :index
  end
```

マイグレーションを実行します

```zsh
$ mix ecto.migrate
```

### render用の設定を追加する

#### DBのマイグレーション用モジュールを追加

```lib/release.ex
defmodule Release do
  @app :deploy_render

  def migrate do
    load_app()

    for repo <- repos() do
      {:ok, _, _} = Ecto.Migrator.with_repo(repo, &Ecto.Migrator.run(&1, :up, all: true))
    end
  end

  def rollback(repo, version) do
    load_app()
    {:ok, _, _} = Ecto.Migrator.with_repo(repo, &Ecto.Migrator.run(&1, :down, to: version))
  end

  defp repos do
    Application.fetch_env!(@app, :ecto_repos)
  end

  defp load_app do
    Application.load(@app)
  end
end
```

#### confgファイルの更新

```config/config.exs
config :deploy_render, :env, Mix.env() # <=追加
```

```config/prod.exs
config :deploy_render, DeployRenderWeb.Endpoint,
  url: [host: System.get_env("RENDER_EXTERNAL_HOSTNAME") || "localhost", port: 80], # <=追加
  cache_static_manifest: "priv/static/cache_manifest.json"
```

```config/runtime.exs
  # host = System.get_env("PHX_HOST") || "example.com"
  # 今回はrenderで発行されるドメインを指定してます
  host = System.get_env("RENDER_EXTERNAL_HOSTNAME") || "exsample.com"
```

#### build.shを追加

ルートディレクトリにbuild.shを作成します。

```build.sh
#!/usr/bin/env bash
# exit on error
set -o errexit

# Initial setup
mix deps.get --only prod
MIX_ENV=prod mix compile

# Compile assets
MIX_ENV=prod mix assets.deploy

# Build the release and overwrite the existing release directory
MIX_ENV=prod mix release --overwrite

# Run migrations
_build/prod/rel/deploy_render/bin/deploy_render eval "Release.migrate"
```

### GitHubにリポジトリを作成、git pushする

GitHubにリポジトリを作成し、ここまで作成したファイルをpushします。

## renderにデプロイする

### PostgreSQLを作成、Database URLをコピー

#### PostgreSQLを作成する

renderで新しくPostgreSQLを作成します。

![スクリーンショット 2022-09-03 11.46.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109744/c4157f9a-1e16-2b6c-43f9-3153a42378a0.png)

![スクリーンショット 2022-09-03 11.48.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109744/c8f9353e-294e-8ad0-31c7-812fa9b35c68.png)

NameとDatabase名を入力したら、「Create Database」ボタンを押します。

#### Database URLをコピーする

Dashbordから作成したDBをクリックします。

![スクリーンショット 2022-09-03 12.01.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109744/495a3ee3-6930-ded4-63d8-814d8d7b7fbf.png)

infoページを表示。

![スクリーンショット 2022-09-03 12.01.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109744/8f5e577e-5453-f588-2d28-91e33532eb60.png)

ConnectionsにあるInternal Database URLをコピーします。
これは後でデプロイする際に環境変数として設定します。

![スクリーンショット 2022-09-03 12.02.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109744/62841840-1c8f-8ad8-3f4a-97ce1537f4b0.png)

### Phoenixをデプロイ

#### 新しくWeb Serviceを作成

NewからWeb Serviceを選択します。
その後、デプロイしたいGitHubリポジトリを選択してください。

![スクリーンショット 2022-09-03 12.09.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109744/ed6cd330-1b7b-1c3d-05e0-36058c4c183c.png)

#### Environment、Build Command、Start Commandを指定

必要な項目を入力していきます。

![スクリーンショット 2022-09-03 10.08.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109744/71c99e9f-4a97-2304-750b-19c5d0d1fe60.png)

Name : 任意の名前
Environment : Elixir
Region : 任意
Branch : 任意
Build Command : ./build.sh
Start Command : _build/prod/rel/deploy_render/bin/deploy_render start

※「deploy_render」は自身のプロジェクト名に置き換えてください。

#### 環境変数の入力

![スクリーンショット 2022-09-03 10.08.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109744/abf86f66-c6f4-1893-b599-e56ade8e2415.png)

ELIXIR_VERSION : 1.13.4
SECRET_KEY_BASE : ローカルでmix phx.gen.secretを実行した結果を指定する
PHX_SERVER : true
DATABASE_URL : PostgreSQLのinfoページでコピーしたInternal Database URLを入力

#### Create Web Serviceする

Create Web Serviceボタンをクリック。
デプロイが実行されます。5〜10分くらいかかります。

### デプロイされたPhoenixアプリにアクセスしてみる

デプロイが完了したら、Web Service名にURLがあるのでアクセスします。

![スクリーンショット 2022-09-03 12.20.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109744/73e40e41-062c-6e76-9734-31bd5af8b22c.png)

無事デプロイできました:clap:

![スクリーンショット 2022-09-03 12.24.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109744/c5dadeff-1666-5f9c-3326-df7f4cbc18aa.png)

LiveViewのページ（/blogs）にもアクセスしてみます。

![スクリーンショット 2022-09-03 12.23.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109744/6058df7f-f186-b6d5-2c5b-24c337cfdef9.png)

表示されますね:clap::clap:

![スクリーンショット 2022-09-03 12.27.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109744/87f054cf-ecf1-fe1c-1250-85eae88c300e.png)

メッセージの投稿もできました:clap::clap::clap:

## 参考記事

こちらの記事を参考にさせていただきました！

https://fullstackphoenix.com/tutorials/step-by-step-guide-to-deploy-phoenix-1-6-with-liveview-and-tailwind-on-render