Phoenix とExpoで作るスマホアプリ ①Phoenix セットアップ編 + phx_gen_auth <-本記事
Phoenix とExpoで作るスマホアプリ ②JWT認証+CRUD編
Phoenix とExpoで作るスマホアプリ ③ファイルアップロード編
本記事では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のようにコマンド１つで認証機能を実装するライブラリです
インストール
depsにphx_gen_authを追加してインストールとコンパイルを実行します
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認証でのスマホアプリとのやり取り部分を実装していきます
今回のコード
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