Phoenix とExpoで作るスマホアプリ ①Phoenix セットアップ編 + phx_gen_auth 

[Phoenix とExpoで作るスマホアプリ ①Phoenix セットアップ編 + phx_gen_auth](https://qiita.com/the_haigo/items/76dedef74ffe98230137) <-本記事
[Phoenix とExpoで作るスマホアプリ ②JWT認証+CRUD編](https://qiita.com/the_haigo/items/e01e671ca117ed2b8648)
[Phoenix とExpoで作るスマホアプリ ③ファイルアップロード編](https://qiita.com/drafts/f9373d6021bb34c45676/)

本記事ではElixirのフレームワークPhoenixでExpo(ReactNative)をフロントとしたスマホアプリ作成します
構成としてはJWT認証を使用してフロントと通信し、ユーザー認証、CRUD機能、ファイルアップロードを実装していきます
今回はelixirのインストールとPhoenixでプロジェクト作成、phx_gen_authを使用して認証機能を作成していきます

またDBはPostgreSQLを使用するので起動しておきましょう
# Elixirのインストール
elixir/erlangはアップデートが頻繁に行われるのでインストールにはhomebrewではなくasdfを使用します
[こちら](https://asdf-vm.com/#/core-manage-asdf-vm)を参考にインストールしていきます
osをMacOS Installation MethodをhomeBrewにするとhomebrewでの設定方法が出てきます

```
brew install coreutils curl git
brew install asdf
. $(brew --prefix asdf)/asdf.sh
echo -e "\n. $(brew --prefix asdf)/etc/bash_completion.d/asdf.bash" >> ~/.bash_profile
```
asdfのインストールが終わったので、elixirとerlangをinstall
erlangをインストールする際にJDKを要求されますので、予めインストールしておきましょう
Phoenix1.5.3で使用する[cowboyがotp22以上である必要がある](https://elixirforum.com/t/cant-compile-cowboy-in-a-bare-new-phoenix-project/31956/4)ので注意が必要です

```
プラグインを追加
asdf plugin-add erlang https://github.com/asdf-vm/asdf-erlang.git
asdf plugin-add elixir https://github.com/asdf-vm/asdf-elixir.git

各言語インストール
asdf install erlang 23.0.2
asdf install elixir 1.10.3-otp-23

使用するバージョンを指定
% asdf global erlang 23.0.2
% asdf global elixir 1.10.3-otp-23
```

# Phoenix のインストール　プロジェクト作成
[公式サイト](https://phoenixframework.org/)の通りにやっていけば大丈夫です
--liveオプションはLiveViewを使用するかのオプションですがせっかくなのでつけておきます


```
mix archive.install hex phx_new
mix phx.new sns --live
```

プロジェクトを作成したらフォルダへ移動してDBを作成し、サーバーを起動させます

```
cd sample
mix ecto.create
iex -S mix phx.server
```

localhost:4000にアクセスして起動しているのを確認します
![](https://storage.googleapis.com/zenn-user-upload/aluiu2tsammekzokgyusnqtp2v72)


# phx_gen_authで認証機能を実装
[phx_gen_auth](https://github.com/aaronrenner/phx_gen_auth)はRailsでいうDeviseのようにコマンド１つで認証機能を実装するライブラリです

### インストール
depsにphx_gen_authを追加してインストールとコンパイルを実行します


```[edit]mix.exs
def deps do
  [
    ...
    {:phx_gen_auth, "~> 0.5", only: [:dev], runtime: false},
  ]
end
```

```
mix do deps.get, deps.compile
```

### モデル作成
コンパイルが完了したら以下のコマンドでUserを作成していきます

```
mix phx.gen.auth Users User users
mix ecto.migrate
```

先程のパラメーターは以下のように反映されます
Users -> Context　CRUDのSQL的処理やSQLクエリーを記述します
User -> schema データ構造やリレーション、バリデーションなど作成・変更時の処理を記述します
users -> db table名

サーバーを再起動すると右上にregisterとloginのリンクが追加されています
![](https://storage.googleapis.com/zenn-user-upload/ckii8uh7iz7ize683bl7j4rkb9bg)


registerからemailとpassword入力してユーザーが作成されたことが確認できました
![](https://storage.googleapis.com/zenn-user-upload/4e1bbuxpwq2hw97fka0hmzl8h933)

phx_gen_authで生成されたユーザー認証は高機能で、パスワードリセット機能もあるので
スマホアプリからパスワードリセットする場合はそのリンクを表示すれば良いので非常に楽です

今回はここまでになります、次回はGuardianを使用してJWT認証でのスマホアプリとのやり取り部分を実装していきます

今回のコード
https://github.com/thehaigo/sns
https://github.com/thehaigo/sns/commit/147fd31a02e5642bbcf05653cfb3bc5f808468f3
# 参考サイト

https://asdf-vm.com/#/core-manage-asdf-vm
https://elixirforum.com/t/cant-compile-cowboy-in-a-bare-new-phoenix-project/31956/4
https://phoenixframework.org/
https://github.com/aaronrenner/phx_gen_auth