MogamiTsuchikawa / next-db-auth-cftunnel-sample

Next.jsとmysql、prisma.io、NextAuth、Cloudflare Tunnelを組み合わせたテンプレートプロジェクト

next-db-auth-cftunnel-sample

Next.jsと DB にmysql、ORM にprisma.io、認証にNextAuth、自宅サーバーなどでのデプロイ用にCloudflare Tunnelを組み合わせたテンプレートプロジェクトです。

docker-composeにて開発環境用と本番環境用の構成をしてあるので開発後すぐにサービスを展開できます。

初期セットアップ

env ファイルの作成

.env.sampleの内容を参考に.envを作成します。 このサンプルでは認証に Google 認証を用いているので、GCP のコンソールからリダイレクト URI をhttp://localhost:3000/api/auth/callback/googleに設定して、GCP のクライアント ID とクライアントシークレットを取得して.env内のGOOGLE_CLIENT_IDおよびGOOGLE_CLIENT_SECRETに記載してください。

パッケージのインストール

yarn install

開発用の DB の起動

docker compose up -d

DB は3306番ポートで起動しています。

DB のマイグレーション

yarn prisma migrate dev

デプロイ

env ファイルの追記

Google 認証を行う場合は本番環境に合わせて GCP から認証情報を作成する必要があります。 本番環境のドメインなどに合わせてリダイレクト URI をhttps://hoge.hoge.net/api/auth/callback/googleのように設定しクライアント ID とクライアントシークレットを取得します。

NEXTAUTH_SECRETは以下のコマンドで生成した文字列を使用します。

openssl rand -base64 32

TUNNEL_TOKENにはCloudflare Tunnelのアクセストークンを使用します。

Cloudflare Zero Trust DashboardよりAccess->Tunnelsから任意の名前で新規作成し、紹介されているインストールコマンドと一緒に書かれているトークンをコピーしてこれをTUNNEL_TOKENに設定します。

任意の Public hostname を指定し、Service 部分にはHTTPとapp:3000を指定します。（docker のネットワーク内ではコンテナ名で指定するため）

NEXTAUTH_URLにhttps://から始まるサイトのURLを記載します

docker コンテナの起動

docker compose -f docker-compose.prod.yml build

db のマイグレーション

app コンテナのコンソールに入り、yarn prisma db pushを実行します。