Petal Pro で爆速高機能 Web 開発を体験してみた

## はじめに

Petal Pro を使って楽したい！

https://petal.build/

今回は Petal フレームワークの有償版 Petal Pro を使ってみます

Petal Pro を使うと、以下のような機能を持つ Web　システムが爆速で構築できます

- 認証
  - ユーザー登録
  - ログイン
  - メール検証
  - 二要素認証
  - パスワードレス
  - ソーシャルログイン
- ユーザー管理
  - 組織管理
  - ユーザー招待・退去
  - ロール変更
- 外観
  - レスポンシブ
  - 多言語対応
  - ダークモード
- 開発ツール
  - メールテンプレート
  - ページビルダー

少人数でこれらの機能を一から実装したり、「どのモジュールを使うのが最適か」などの検証を行うのは大変です

最初からベストプラクティスで構築された基盤 ＝ Petal Pro の上に自分の作りたい機能を載せるだけであれば、こんなに楽なことはありません

:::note warn
2023/02/21 現在

[一部、 config.exs に修正が必要な箇所があります](#configexs-修正)
:::

## 使用バージョン

Petal Pro 1.5.0

2023/02/21 現在

## Petal フレームワークとは

Petal は英語の「花びら」ですが、以下の技術の頭文字を合わせたものです

- [Phoenix](https://www.phoenixframework.org/)
- [Elixir](https://elixir-lang.jp/)
- [Tailwind CSS](https://tailwindcss.com/)
- [Alpine.js](https://alpinejs.dev/)
- [LiveView](https://github.com/phoenixframework/phoenix_live_view)

https://thinkingelixir.com/petal-stack-in-elixir/

ざっくり以下のような利点があります

- ベースに Elixir の Phoenix LiveView を使うことで、バックエンドとフロントエンドをシームレスに実装できる（インターフェースを考えなくて良い）

- フロントエンドだけで完結するような処理は Alpine.js で実装する

- スタイルには Tailwind CSS で記述することで、 HTML と CSS を行ったり来たりせずにデザインできる

Petal フレームワークの TOP ページには以下のように書かれています

> Tools to help you rapidly build Phoenix web applications without worrying about design or reinventing the wheel.

和訳

> Phoenix Web アプリケーションの迅速な構築に役立つツールです。車輪の再発明や設計の心配はありません

アプリケーションの基盤となるところは Petal フレームワークに任せてしまえば、開発者や設計者はほとんど気にする必要がありません

機能だけに集中できるというわけです

## Petal Pro とは

Petal Pro にはしっかりとしたドキュメントがあります

https://docs.petal.build/petal-pro-documentation/

その TOP には、なぜ Petal Pro を作ったのか、ということが書かれています

すぐに使える認証やユーザー管理、メール送信機能、10分以内での本番デプロイなどを満たす解決策がなかったから作った、と言っています

Phoenix 自体、認証などの機能はほぼ自動的に実装できるようになっていますが、より強力な機能を提供してくれるようです

価格は以下のサイトのとおり

https://petal.build/#pricing

Single Plan　であれば年間 $299 です

エンジニアを雇うことを考えれば、この値段で Web アプリケーションの基盤が作れるのは安いですね

というわけで、使ってみました

## ローカル実行

全ての手順は公式に用意されていますが、少し最新と違っています

https://docs.petal.build/petal-pro-documentation/guides/creating-a-web-app-from-start-to-finish

### 必要なツール

- [asdf](https://asdf-vm.com/)

  開発言語やツールなどを簡単に複数バージョン共存してインストールできます

  Erlang や Elixir をインストールします（他の方法でインストールしてもOKです）

- [Docker](https://www.docker.com/)

  言わずと知れたコンテナプラットフォームです

  Docker Desktop を無償利用できない人は [Rancher Desktop](https://rancherdesktop.io/) を使ってください

  ローカル実行時、データベースの PostgreSQL をコンテナ上で起動します

###　環境構築

- 最新版の ZIP ファイルをダウンロードする

- ZIP ファイルを任意のパスに展開し、そのディレクトリー内に移動する

- 必要な環境をインストールする

  ```bash
  asdf plugin add erlang
  asdf plugin add elixir
  asdf install
  mix local.hex --force
  mix local.rebar --force
  ```

- PostgreSQL をコンテナで起動する

  ```bash
  docker-compose up -d
  ```

- 依存モジュールをインストールする

  ```bash
  mix deps.get
  ```

- アプリケーション名を置換する

  コード内の文字列、ディレクトリー名やファイル名も含めて、アプリケーション名を一括置換します

  今回は `PetalPro` を `MyApp` 、 `petal_pro` を `my_app` に置換しています

  DB名も置換されるため、セットアップの前に実行しましょう

  ```bash
  mix petal.rename PetalPro MyApp petal_pro my_app
  ```

- セットアップ

  DB のマイグレーションが実行されます

  ```bash
  mix setup
  ```

### config.exs 修正

2023/02/21 現在、以下の Issue によって、 config.exs を一部修正しないと GitHub 認証でエラーが発生します

https://github.com/ueberauth/ueberauth_github/issues/73

config/config.exs の 129 行目辺り（どこでも問題はありませんが）に以下の設定を追加してください

```diff_elixir
config :ueberauth, Ueberauth.Strategy.Github.OAuth,
  headers: [
    "user-agent": "MyApp"
  ]
```

### 起動

以下のコマンドで Phoenix を起動します

```bash
iex -S mix phx.server
```

ブラウザから <http://localhost:4000> にアクセスしてください

![petal.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/e13ee908-a44a-9c25-900f-51b47d6d10c8.png)

Petal Pro が用意してくれた　TOP　ページが表示されます

## 機能の確認

### TOP 画面

よくある情報用のテンプレートが準備されています

ちなみに中に書かれている文言は [Faker](https://github.com/elixirs/faker) で生成された出鱈目な文字列です

当然、実際に Web サイトとしてデプロイする場合は正規の文言を入れてください

- Features (機能)

  ![petal_features.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/24b24441-27b2-1197-040b-4a155bf73fd8.png)

- Testimonials (お客様の声)

  ![petal_testimonials.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/7cb54341-f7c2-508f-0d87-293f51989b2e.png)

- Pricing (価格)

  ![petal_pricing.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/63938d73-bfed-514a-9b19-4e252ceb8435.png)

かなりよく見る画面構成ですね

### 認証

認証機能が Petal Pro の大きな魅力の一つです

https://docs.petal.build/petal-pro-documentation/fundamentals/users-and-authentication

認証には Überauth が使われています

https://github.com/ueberauth/ueberauth

#### ユーザー登録

下画像のようなユーザー登録画面が用意されています

![petal_register.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/07357cf7-adac-e609-14a3-cc8b6459e5d4.png)

必要項目を入力して Create account をクリックすると、次の画面に遷移します

![petal_registered.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/47c66f74-fc14-3dc8-4602-924b1ec072b5.png)

本番環境では [Amazon SES](https://aws.amazon.com/jp/ses/)  を使って実際にメールを送信しますが、開発環境ではダミーのメールボックスが使われます

左下に表示された DEV ONLY: Go to mailbox のリンクから、ダミーのメールボックスに遷移できます

![petal_mailbox.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/5485414d-bf5a-945b-f5cc-46d08c3fd548.png)

ここではメールの内容を確認することができます

また、ここでメール内の `Verify account` をクリックすることで、開発環境上でのメール検証が実行されます

![petal_comfirm.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/9beef188-fe9b-9fc5-e92d-c56aa3c35e59.png)

![petal_new.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/9f3a67df-d7dd-40c9-8067-b0054e3d7637.png)

![petal_home.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/0b61365c-24a4-d06f-86bb-4d10b5d59ba1.png)

メールのテンプレートやメールボックスは [Swoosh](https://github.com/swoosh/swoosh) の機能で実装されています

同じ要領でログインも可能です

#### 二要素認証

二要素認証も使えます

サインイン後、右上アイコンメニューから Settings を開きます

![petal_settings.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/950890cb-5dd3-53f9-5752-db9e2546b00f.png)

Settings の左メニューから 2FA を開き、ログインに使用しているパスワードを入力します

![2fa_confirm.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/c9459182-9b69-28b2-c232-55025359c15b.png)

QR コードが表示されるので、 [Google Authenticator](https://apps.apple.com/jp/app/google-authenticator/id388497605) などの二要素認証用アプリから読み込みます

二要素認証用アプリに表示された認証コードを入力して Verify code をクリックします

![2fa_qr.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/a2c36c15-ebea-747c-1599-c1cb645964cc.png)

これで二要素認証が有効化されました

かなり一般的な流れなので、何も違和感がありません

次回以降、ログイン時に二要素認証を求められます

![2fa_code.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/60a7ca27-c5d7-a241-7bb3-17b4f68175a6.png)

わざと誤ったコードを入力すると、ちゃんとエラーで弾かれました

![2fa_code_error.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/7236256a-8d3f-0703-a6fb-5f418711e9be.png)

もちろん正しいコードの場合はログインできます

#### パスワードレス

パスワードレスによるユーザー登録、ログインができます

https://docs.petal.build/petal-pro-documentation/fundamentals/users-and-authentication#how-passwordless-works

パスワードレスはメールアドレスによって認証する方式です

メールアドレスを入力すると、そのメール宛に PIN コードが入ったメールを送信します

![petal_passwordless.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/1d691e19-1360-e99b-7e5d-143a7fe40ad0.png)

![petal_pin.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/b507b0d9-08e3-2978-c082-67969f7ede33.png)

ユーザーは PIN コードを入力することで登録、ログインします

![petal_pin_input.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/f8351fa0-d03a-1444-ae43-78ed5760e638.png)

#### ソーシャルログイン

Google と GitHub がすぐに使えるよう準備されています

もちろん、それ以外を追加することもできます

https://docs.petal.build/petal-pro-documentation/fundamentals/users-and-authentication#social-login-providers

GitHub によるサインインをやってみましょう

https://docs.petal.build/petal-pro-documentation/fundamentals/users-and-authentication#setup-github-sign-in

まず、 GitHub 側の設定をします

GitHub の右上アバターアイコンから Settings を開きます

![github_settings.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/8a24c2ea-7f67-ba50-438b-98618c29e84d.png)

左メニューの下端 Developer Settings を開きます

左メニューから OAuth Apps を開き、右上 New OAuth App をクリックします

![github_dev_settings.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/56fe5ef7-4dd2-8714-42be-fa55fbc7c8d0.png)

必要な項目を入力します

Authorization callback URL は `http://localhost:4000/auth/github` を設定してください

Register application をクリックします

![github_oauth.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/1179bd48-cb00-d17b-eec8-604c72aff29b.png)

Generate a new client secret をクリックします

![github_oauth_client.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/18933615-92da-429b-9ae1-ad4d2ed4620b.png)

生成された Client secret の値をコピーしておきます

Petal Pro のディレクトリー直下に `.envrc` ファイルを以下の内容で作成します

```bash
export GITHUB_OAUTH_CLIENT_ID="<GitHub の Client ID>"
export GITHUB_OAUTH_SECRET="<GitHub の Client secret>"
```

Phoenix を起動したターミナルで Ctrl+C を入力した後、 a を入力し、 Phoenix を停止します

direnv を使っている場合、 `direnv allow` を実行します

Phoenix を再起動します

```bash
iex -S mix phx.server
```

この状態で localhost のユーザー登録画面に遷移すると、 GitHub でログインするためのボタンが増えています

![petal_login_with_github.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/eb683ce5-1fd6-f160-41df-3b7643884ae3.png)

GitHub へのアクセス許可が要求されるので、 Authorize <ユーザー名> をクリックします

![petal_authorize.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/66028d7b-39b6-90c1-0ed4-bb69fad6bd15.png)

名前を入れて Submit をクリックすればユーザー登録完了です

![petal_github.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/32c86d26-855d-26d2-0e9f-46a9b5bcd489.png)

:::note warn
2023/02/21 現在

GitHub のプロフィールにメールアドレスが設定されていない場合、エラーになります
:::

### ユーザー管理

Web システムでよくあるユーザー管理機能も準備されています

#### 組織の作成

サインイン後、左メニューの Organizations を開きます

Create a new organization をクリックしてください

![create_org.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/c583a050-f363-5290-88c6-19f45e06821f.png)

モーダルに組織名を入力します

![org_modal.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/fe817735-10ba-b688-316a-5b6169874797.png)

組織が作成されました

![org_created.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/4fd15930-4adf-d192-951d-c56d5960ae3d.png)

この動きも今まで作ってきたシステムと同じで違和感ありません

#### メンバーの招待

よく実装する機能です

組織の中の Team を開きます

ここに組織のメンバー一覧が表示されます

Invite new member をクリックしてメンバーを招待します

![member_list.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/6e1a83f6-9a21-e70b-f735-2fb4a3f10213.png)

メールアドレスを入力して Invite をクリックします

![invite.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/25ef7d4d-9dd9-f4fc-d36c-eb0421ac3868.png)

招待中のメンバーがチームに追加されました

![inviting.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/7c99e502-85c5-1554-d200-e5b8be5d03de.png)

招待された側のメールボックスには以下のような招待メールが届きます

![invitation_mail.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/6e6f3d66-c686-caa1-cc45-55264c5011d1.png)

招待を受けた方のメールアドレスでサインインすると、以下のように招待が表示されます

Accept をクリックすることで、チームに所属できます

![invitation.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/e9987b4f-b76e-c3d8-e04a-457cd6bf72f6.png)

所属したメンバーは以下のように表示されます

![invited.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/1b8f6731-44b4-6699-1fa2-b64d5283c648.png)

Edit からロール（Admin or Member）を変更することもできます

他の言語で何度も実装したことのある機能で、この辺りをすぐに使えるのはありがたいですね

### 外観

#### レスポンシブ

当然レスポンシブです

![responsive.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/cf851a10-da1f-feb5-5763-24fa9a51e1cd.png)

![responsive_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/556624ab-b5f5-68ec-2aae-6a781be71a9c.png)

#### 多言語対応

`priv/gettext` 配下に各言語ファイルを配置すれば多言語化できます

デフォルトでは英語とフランス語が入っています

https://docs.petal.build/petal-pro-documentation/fundamentals/translations

![petal_lang.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/3c5eb316-bd2c-1b82-6a3a-5a4ee8b5bbcc.png)

#### ダークモード

デフォルトでライトモードとダークモードが切り替えられます

https://docs.petal.build/petal-pro-documentation/fundamentals/dark-mode

![petal_dark.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/ff427511-009e-5ece-476d-57400c18f28e.png)

### 開発ツール

右上アイコンメニューから Dev を開くと、開発ツールが使えます

![dev.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/691117ca-3b88-4bce-e0a7-4a3a182ddcf4.png)

#### メールテンプレート

特に便利なのが、メールテンプレートのプレビューです

現在の実装だとメールでどう表示されるのか、すぐに確認できます

![main_template.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/b409b33d-d589-f103-c9e8-ef3696b708bf.png)

モバイルやプレーンテキストの場合もプレビュー可能です

![ mail_mobile.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/fe4ece36-d968-53a3-c734-3a10bd4659ff.png)

#### ページビルダー

Petal Pro 購入時に取得できる以下の環境変数を .envrc に追加することで、ページビルダーが有効になります

- PETAL_BUILD_PROJECT
- PETAL_BUILD_API_TOKEN

https://docs.petal.build/petal-pro-documentation/fundamentals/generators-and-page-builder#page-builder

.envrc 変更後、 Phoenix を再起動し、以下の URL にアクセスするとページビルダーの画面が開きます

<http://localhost:4000/_enhance>

![page_builder.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/7f4bca70-9634-6bbe-d710-e353f876bab0.png)

パスなどを入力していくことで、新しい画面を追加できます（ソースコードが追加されます）

## まとめ

ユーザー管理やログイン画面、ソーシャルログインなど、定番機能が既に実装されているので非常に楽です

次回は Petal Pro を Fly.io にデプロイしてみます

https://fly.io/

https://qiita.com/RyoWakabayashi/items/c8666c2797ff5bafe611