Microbase Authentication App

アプリ概要

・ログイン・新規登録機能、NextAuthを実装したWebアプリケーションになります。

---

技術スタック

使用言語

・TypeScript

フロントエンド

・React: ユーザーインターフェースの構築
・Next.js (App Router): サーバーサイドレンダリング対応のReactフレームワーク
・TailwindCSS: カスタマイズ可能なCSSユーティリティ
・React-Toastify: トースト通知の表示ライブラリ

バックエンド

・NextJS: サーバーサイドレンダリング対応のReactフレームワーク
・Prisma: データベースアクセスのためのORM
・JWT: JWTを使用した認証管理
・NextAuth: Next.js に簡単に認証機能を統合するためのライブラリ

データベース

・PostgresSQL: リレーショナルデータベース管理システム

インフラ

・Docker: コンテナ化プラットフォームで環境構築を効率化

---

開発環境のセットアップ手順

ローカル環境で開発サーバーを起動するための手順は以下の通りです。

1. リポジトリをクローン

git clone https://github.com/RintaroNasu/micobase-authenticatin-app.git

2. 依存パッケージをインストール

npm install

3. .envファイルを作成

POSTGRES_USER=your_postgres_user
POSTGRES_PASSWORD=your_postgres_password
POSTGRES_DB=your_postgres_db
DATABASE_URL="postgresql://your_user:your_password@your_host:your_port/your_db"
JWT_SECRET="your_jwt_secret"
NEXTAUTH_SECRET="your_nextauth_secret"
GOOGLE_CLIENT_ID="your_google_client_id"
GOOGLE_CLIENT_SECRET="your_google_client_secret"
FACEBOOK_CLIENT_ID="your_facebook_client_id"
FACEBOOK_CLIENT_SECRET="your_facebook_client_secret"

4. Dockerイメージをビルド

docker compose build

5. コンテナを起動

docker compose up

6. PrismaClientのセットアップ

docker exec -it  <コンテナ_id> sh
npx prisma generate
npx prisma migrate dev --name init

7. 開発サーバーにアクセス

Webブラウザで http://localhost:3000 にアクセス