次世代Heroku？！renderにPhoenix1.6アプリをデプロイしてみる(DB無し)



## 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アプリを作成する

今回は公式ドキュメントに合わせてDB無しのPhoenixアプリを作成します。
ドキュメントがPhoenix1.6に対応していないようなので、少しアレンジしていきます。

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

### Phoenixアプリの作成

```zsh
$ mix phx.new phoenix_hello --no-ecto
```

### configファイルを編集する

```config/prod.exs
config :phoenix_hello, PhoenixHelloWeb.Endpoint,
  url: [host: System.get_env("RENDER_EXTERNAL_HOSTNAME") || "localhost", port: 80], # <- 追記
  cache_static_manifest: "priv/static/cache_manifest.json"
```

```config/runtime.exs
# if をコメントアウト
# if System.get_env("PHX_SERVER") do
  config :phoenix_hello, PhoenixHelloWeb.Endpoint, server: true
# end

〜 略 〜

# host = System.get_env("PHX_HOST") || "example.com"
# 今回はrender側で発行されるドメインを使うので、こちらの環境変数を使う
host = System.get_env("RENDER_EXTERNAL_HOSTNAME") || "exsample.com"
```

※Phoenix v1.6で、`config/prod.secret.exs` や `config/release.exs` は、 `config/runtime.exs`に変わりました。

### build.shスクリプトを追加

renderはインスタンス起動時にビルドコマンドが指定できます。
そのため、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
```

configファイルの更新とbuild.shの追加ができたら、GitHubにリポジトリを作成し、git pushしましょう。

## renderにデプロイ

### アカウント作成

https://render.com/

![スクリーンショット 2022-08-31 10.49.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109744/b954c1fc-f265-d5a3-8304-961d4ea1e37b.png)

GET STARTEDボタンからサインアップしましょう。

### Webサービスの作成

ダッシュボードに移動したら、今回はPhoenixを使うためWebサービスを作成しましょう。

![スクリーンショット 2022-09-01 7.25.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109744/b282892c-29cd-202c-aa08-4e8f69e7ba71.png)

#### GitHubと接続する

GitHubのデプロイしたいリポジトリを選択しましょう。

#### Webサービスの設定（新規作成） 

作成するWebサービスの設定をしていきます。

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

![スクリーンショット 2022-09-02 12.59.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109744/d7b92377-42f9-72c2-0cd0-f11741526969.png)

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

##### プランの指定

![スクリーンショット 2022-09-02 12.59.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109744/4364c5d7-f737-eaa9-5c43-fffedb51c384.png)

プランは今回はFreeプランを使用します。

##### 環境変数の指定

環境変数を追加します。Advancedをクリックすると入力フォームが表示されます。

![スクリーンショット 2022-09-02 13.10.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109744/bd052372-5c19-bae8-2fbf-36b63bfd2aa8.png)

ELIXIR_VERSION : 1.13.4
SECRET_KEY_BASE : ローカルで`mix phx.gen.secret`を実行した結果を指定する

Elixirのバージョン指定が無い場合は古いバージョンで実行されるので、バージョン指定は必ず行いましょう。

##### Create Web Service

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

### デプロイが終わったら

デプロイが終わったら、ステータスが「Live」に変わります。

![スクリーンショット 2022-09-02 13.32.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109744/c776ce8e-cd65-a60d-8190-82cbfe61e4f7.png)

ウェブサービス名の下にリンクにアクセスし、反映されたか確認してみましょう。

![スクリーンショット 2022-09-02 13.36.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109744/c6d5e238-1386-19af-6dd3-f27b0b31f306.png)

やったね！デプロイされました:clap::clap::clap:

## 最後に

`mix compile`や`mix release`を使ったビルドスクリプトをユーザーに用意させるPaaSは初めて見たので面白かったです。

renderは、PRレビュー環境などHerokuにあるような便利な機能があるので、今度も調べていきたいです:blush: