Next.jsとAuth0で本管理サイトを作ってみた
Next.jsとAuth0を使って読んだ本を管理するサイトを作ったので使った技術等を紹介します。
どんなサイトか？
まずは、どんなサイトを作ったのかを紹介します。読んだ本の管理を行うサービスで、主な機能は3つです。
- Google Book APIに登録されている本を検索して本棚に保存できる
- 登録されていないなくてもアプリ内で新しく登録できる。
- 今まで本棚に登録した本の合計ページ数・本の高さ・本の重さを表示。1ページ当たり0.5g、0.15mmで計算します。
画面遷移
1.トップ画面
アプリのトップ画面。「アカウント作成・ログイン」ボタンを押すことでログイン画面に遷移します。
2.ログイン画面
Auth0を使ったログイン画面。認証方法は2種類あります。
- Googleアカウントを使ったログイン
- メールを使ったログイン
3.ホーム画面
今まで読んだ本を管理する画面。最近読んだ本の表示や今まで読んだ本の合計ページ数・重さ・高さを表示します。
本の画像の左下にあるボタンを押すと「保存済」が「保存」に変更され、「最近読んだ本」から解除されます。
4.検索結果画面
キーワードで検索した結果を表示する画面。ヘッダーにある検索窓にキーワードを入力して「Enter」を入力すれば、検索結果画面に遷移します。
一覧表示されている本の画像に重なっている「保存」ボタンを押すと「保存済」に変更され、「最近読んだ本」として登録。
また、キーワードで検索した結果、対象の本が無かったときはホーム画面に遷移して「該当データがありませんでした」のメッセージを表示します。
検索結果が0件のとき
5.本登録機能
ホーム画面画面・検索結果画面の右上にある「本追加」のボタンを押すとモーダルウィンドウが立ち上がり、検索結果に引っかからなかった本でも登録可能です。
「タイトル」と「ページ数」を入力すれば登録でき、画像は「No Image」で表示されます。
ページ数に数値以外やマイナスの値が入っていると「保存」ボタンが非活性になり、登録できないようになっています。
6.ログアウト機能
画面の左上のメニューアイコンをクリックするとドロワーメニューが表示され、ログアウトが可能。クリックして、ログアウトした後はトップ画面に遷移します。
どんなフレームワーク・ライブラリーが使われているか？
1.Next.js
JavaScriptのReactをベースにしたNext.jsを使いました。
Next.jsを使うことで事前にビルドしたHTMLファイルを出力するSSGやリクエスト時にサーバーでレンダリングを行うSSRが利用可能です。
SSGやSSRを使うメリットはレスポンスの改善に繋がることです。
通常のReactだとレスポンスが返ってきた後、JavaScriptを実行させて表示させるためタイムラグがあります。
しかし、SSGやSSRはレスポンスをそのまま表示するだけ。そのため、初期表示に時間がかかりません。
また、Next.jsはSSRやSSGだけでなく、Web API機能やルーティング機能も搭載されているのでReactで開発する際には便利です。
2.Auth0
Auth0は認証・認可を提供するIDaaS。なのでAuth0を使うとアプリ本体の機能とは関係が少ないログイン周りの機能を任せることができます。
メリットとしては以下の2つです。
- 導入が簡単であること
- 情報セキュリティリスクを減らせること
ReactやAngular、Vueなどのフロントエンドフレームワークだけでなく、AndroidやiOSなどのネイティブアプリのチュートリアルがあるので参考にして導入することができます。
また、アプリを利用する権限の管理（認可）やアプリへのログイン（認証）をAuthで管理しているためID、パスワードはアプリ内で管理する必要がありません。これによりセキュリティーリスクの軽減に繋がります。
3.Material-UI
Material-UIはReactのUIフレームワーク。インポートして呼び出すだけで綺麗なコンポーネントが使えるので便利です。
ボタン
ドロワー
モーダルウィンドウ
4.sequelize
sequelizeはDBに簡単にアクセスできるORM（Object-relational mapping）。SQLで取得したデータをJavaScriptで扱いやすいオブジェクトに変換してくれます。
5.google Book API
Googleが提供するサービスの1つであるGoogle Books。そのサービスに登録されている本をAPIで取得できるのがGoogle Books APIです。
楽天やAmazonなどの他のサービスだと事前に登録が必要になりますが、Google Books APIは登録不要でURLを叩くだけで検索結果を取得できます。
どんな環境か？
1.Vercel
「趣味の範囲だと無料で使えること」と「Next.jsと相性がいい」この2つの理由からVercelを使いました。
githubに対象のソースを上げて、Vercelと連携するだけで簡単にデプロイすることができました。ほんとに便利！
2.Cloud SQL
本番のデータベースにはCloud SQLを使いました。新規登録後の90日間は$300分が無料です。
作ってみた感想
1.ライブラリーの組み合わせ
JavaScriptはライブラリーが豊富にあるので0から作るということが少なかったです。
認証機能はAuth0、UIはMaterial-UI、ルーティングはNext.js、データベース接続はSequelizeというように各機能ごとにライブラリーがあって、レゴブロックのように組み合わせれば作れました。
なので、実装部分はコンポーネントのカスタマイズやCSSの調整、API連携、DB操作などが大部分になっています。
2.日本語の解説サイトが少ない
Next.jsやAuth0など内容は日本語でまとまったサイトがないので公式サイトや海外のサイトを参考にすることが多かったです。なので、Google翻訳の拡張機能は必須でした。
特に、Next.jsにAuth0を導入する部分は海外でもそれほど説明しているところが無かったのでAuth0のgithubに上がっているサンプルソースを参考にしたので苦労しましたね。
ちなみに、Auth0の概念については【「Auth0」で作る！認証付きシングルページアプリケーション】がまとまっていて、わかりやすいのでおススメです。
3.本番環境とローカル環境の差異につまづく
あと、ローカル環境と本番環境(Vercel)での細かい違いがあり、デプロイするのに時間がかかりました。
たとえば、ローカルだとインポートする際のモジュール名が大文字で小文字でも区別なくインポートできました。しかし、本番に持っていくと大文字・小文字を区別しているためエラーとなり落ちてしまいました。ただの誤字脱字が原因を掴むに難しい。
また、VercelとCloud SQLの接続が上手くいきませんでした。原因としてはCloud SQLのアクセス許可IPアドレスのリストにVercelが含まれていなかったためです。
Vercelはサーバーレス関数のため動的IPアドレス。全てのIPアドレスを許可する0.0.0.0を指定することで解決できました。
Discussion
使ってみようかなと思っていた組み合わせだったので参考にさせていただきますー！
蛇足になりますが、ゲストアカウントの ID (email) だとしても、
@test.comではなく@example.comなどを利用したほうが良さそうです。