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

公開:2020/09/24
更新:2020/09/27
5 min読了の目安(約3000字TECH技術記事

Phoenix とExpoで作るスマホアプリ ①Phoenix セットアップ編 + phx_gen_auth <-本記事
Phoenix とExpoで作るスマホアプリ ②JWT認証+CRUD編

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

またDBはPostgreSQLを使用するので起動しておきましょう

Elixirのインストール

elixir/erlangはアップデートが頻繁に行われるのでインストールにはhomebrewではなくasdfを使用します
こちらを参考にインストールしていきます
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以上である必要があるので注意が必要です

プラグインを追加
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 のインストール プロジェクト作成

公式サイトの通りにやっていけば大丈夫です
--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にアクセスして起動しているのを確認します

phx_gen_authで認証機能を実装

phx_gen_authはRailsでいうDeviseのようにコマンド1つで認証機能を実装するライブラリです

インストール

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のリンクが追加されています

registerからemailとpassword入力してユーザーが作成されたことが確認できました

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

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

今回のコード


参考サイト