MacでDB付きElixir／Phoenixを使う最短手順

こんにちは、piyopiyo.ex共同開催者のnakoです。

この記事は2022/2/5開催のpiyopiyo.ex#4の手順をまとめたものです。

https://piyopiyoex.connpass.com/event/235758/

（2022/6/10追記）
「PostgreSQLにdev.exsのユーザーが登録されているか確認しよう」を追記しました。

## 前提

本記事はMacユーザー向けのため、Windowsユーザーの方はこちらの記事を参考にしてください。

https://qiita.com/piacerex/items/6b64dfe70f48c89d8385

## Elixirをインストール

公式を参考にインストールしていきます。

https://elixir-lang.org/install.html

### [Homebrew](https://brew.sh/index_ja)でElixirをインストール

起動したターミナルで下記を実行。

```ssh
$ brew install elixir
```

インストールが完了したらバージョン確認。

```ssh
$ elixir -v
Erlang/OTP 24 [erts-12.2.1] [source] [64-bit] [smp:8:8] [ds:8:8:10] [async-threads:1] [jit] [dtrace]

Elixir 1.13.2 (compiled with Erlang/OTP 24)
```

ちなみにPhoenix v1.6はElixir v1.9以上が必要。

https://github.com/phoenixframework/phoenix/blob/master/CHANGELOG.md
> Phoenix v1.6 requires Elixir v1.9+.

## Phoenixのインストール

ターミナルで下記を実行。

```ssh
$ mix archive.install hex phx_new
```

なおアンインストール

```ssh
$ mix archive.uninstall phx_new
```

インストールできたらバージョンを確認します。
※2022/1/31現在、Phoenixの最新バージョンは1.6.6です。

```ssh
$ mix phx.new -v
Phoenix installer v1.6.6
```

## PostgreSQLのインストール、初期設定

### [Homebrew](https://brew.sh/index_ja)でPostgreSQLをインストール

ターミナルで下記を実行。

```ssh
$ brew install postgresql
```

### PostgreSQLのPATHを通す

インストールしたPostgreSQLのパスを確認。
`brew --prefix [パッケージ名]`でパッケージのインストールディレクトリが確認できます。

```ssh
$ brew --prefix postgresql
```

.zprofileを編集します。
ここではviでファイルを編集していますが、好きなエディタで編集してください。

```ssh
$ vi ~/.zprofile
```

.zprofileにパスを追記します。

```~/.zprofile
# postgreSQL
export PATH="/usr/local/opt/postgresql/bin:$PATH"
```

編集した.zprofileの内容を反映。

```zsh
$ source ~/.zprofile
```

バージョンの確認をします。

```ssh
$ postgres --version
postgres (PostgreSQL) 14.1
```

## Visual Studio Code（VSCode）のダウンロード

VSCodeのダウンロードページにアクセスします。

https://code.visualstudio.com/Download

自分の使っているOS（ここではMac）を選んでポチーします。

|![スクリーンショット 2021-11-13 0.18.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109744/f60c0a11-4a23-76d2-0259-e4672b37342f.png)|
|:-:|

zipファイルがダウンロードできるので、ダブルクリックして展開しましょう。
展開したappファイルはアプリケーションフォルダに移動しましょう。

|![スクリーンショット 2021-11-13 0.20.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109744/a3899437-29db-9c9b-4c7f-f3484f189f82.png)|
|:-:|

### VSCodeのelixirの拡張機能をインストールする

VSCodeの拡張機能アイコンをクリックし、「elixir」と検索、「ElixirLS」をインストールします。

![スクリーンショット 2021-11-13 0.24.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109744/f6a09386-2fb1-4db3-613e-9b9ff60977da.png)


## Hello, world!しよう

### Phoenix PJの作成

```ssh
$ mix phx.new sample
* creating sample/config/config.exs
* creating sample/config/dev.exs
* creating sample/config/prod.exs

〜略〜

Fetch and install dependencies? [Yn] Y # 途中で依存するライブラリのインストールをするか聞かれるのでYを入力
```

最後に作成されたプロジェクトの起動方法が表示されます。

```ssh
We are almost there! The following steps are missing:

    $ cd sample

Then configure your database in config/dev.exs and run:

    $ mix ecto.create

Start your Phoenix app with:

    $ mix phx.server

You can also run your app inside IEx (Interactive Elixir) as:

    $ iex -S mix phx.server
```

sampleディレクトリに移動し、`ecto.create`でDBを作成するようメッセージが表示されています。
が、その前にDBの設定を確認しましょう。

### PostgreSQLにdev.exsのユーザーが登録されているか確認しよう（2022/6/10追記）

`config/dev.exs` ファイルを開いてみましょう。
おそらく下記のような内容が書かれているはずです。

```config/dev.exs
import Config

# Configure your database
config :sample, Sample.Repo,
  username: "postgres",
  password: "postgres",
  hostname: "localhost",
  database: "sample_dev",
~略~
```

ユーザー名とパスワードが`postgres`で設定がされていますね。
このpostgresユーザーがPostgreSQLに登録されているか確認しましょう。

```zsh
$ psql postgres
psql (14.3)
Type "help" for help.

postgres=#
```

psqlが実行できたら、PostgreSQLに登録されているユーザーを確認しましょう。

```
postgres=# select * from pg_user;
 usename  | usesysid | usecreatedb | usesuper | userepl | usebypassrls |  passwd  | valuntil | useconfig
----------+----------+-------------+----------+---------+--------------+----------+----------+-----------
 my-user   |       10 | t           | t        | t       | t            | ******** |          |
 postgres |    16384 | f           | t        | f       | f            | ******** |          |
(2 rows)
```

もしpostgresユーザーが居なければ作成しましょう。

```sql
create role postgres with superuser login password '';
```

なお、psqlを終了する場合は`\q`を入力します。

```zsh
postgres=# \q
```

また、上記以外でpsqlにアクセスできない場合は、下記の記事などを参考にしてみると良いかもしれません。

https://zenn.dev/tetsuya/articles/d5e0aef6f7144f

### DBの作成をしよう

メッセージ通り、sampleディレクトリに移動し、`ecto.create`でDBを作成します。
※EctoはElixirのデータベースラッパーです。

```ssh
$ cd sample
$ mix ecto.create
```

作成したPhoenix PJを起動します。

```
$ mix phx.server
```

ブラウザで`http://localhost:4000`を表示しましょう。

|![スクリーンショット 2021-11-25 1.23.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109744/89efc1cd-5969-4b3d-16ba-6b76a42f22dd.png)|
|:-:|

### ビューを書き換える

今回はビューのページを少し変更してみましょう。
sample/lib/sample_web/templates/配下にテンプレートファイルがあります。

※ビューとテンプレートについては下記を参照。
https://zenn.dev/koga1020/books/phoenix-guide-ja-1-6/viewer/views

2行目のh1タグを書き換えてみましょう。

```sample/lib/sample_web/templates/page/index.html.heex
<section class="phx-hero">
  <!-- <h1><%= gettext "Welcome to %{name}!", name: "Phoenix" %></h1> -->
  <h1>Hello, world!</h1>
  <p>Peace of mind from prototype to production</p>
</section>
```

無事変更されました。ようこそPhoenixへ！

|![スクリーンショット 2021-11-25 1.41.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109744/e7c4332a-4695-ec54-6ae1-a3a70f949b27.png)|
|:-:|

## おわりに

本記事ではいろいろ説明をはしょりましたが、ディレクトリ構造などは公式ドキュメントや、日本語訳ならこちらがおすすめです。

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