nextjs prisma boilerplate
1.0.0
これは、最新のnext.jsスタックを中心に構築されたフルスタックボイラープレートです。これは、公式のドキュメントで説明されているベストプラクティスで構成されており、他の人と協力して集めた私自身の経験と知識から得られた私の決定と組み合わされています。
次の3か月を費やして建築上の決定を下し、ライブラリを選択し、開発環境と製品/CDパイプラインを設定し、ボイラープレートコードを作成し、代わりにこのボイラープレートを15分でインストールし、今日の機能の作業を開始します。
アプリが破壊されている場合は、フッターの右側にある
ReseedLinkを使用してデータベースを再編成するだけです。
GitPodアカウントが必要であり、デモデータベースが破壊されている場合は、データベースURLをPostgresデータベースURLが必要です。 ElephantsQL.comで作成できます。詳細については、GitPod Environmentセクションを参照してください。
next-authでの電子メール/パスワードログインなど、node.jsプロジェクトに再利用できます...）） React 18.2.0 、next.js 12.2.0 、node.js 16.13.1 、prisma 4 、postgres 14.3 、typescript 4.7.4 、React Query 4-beta 、axios、React Hook form 8-alpha 、React Dropzone、Zod、MSW、Tailwindcss 3 、Jest 28 、Testing Library、Cypress 9.6.1 。
next-authおよびFacebook、Google、および資格情報プロバイダーを使用した認証.env*ファイル...pages - > layouts - > views - > components!importantステートメント）next-connect APIハンドラーgetServerSidePropsの両方のグローバルエラー処理testing-library/reactjest-previewビジュアルデバッグ、Blob Polyfillでock笑された画像、個別の.env.test*ファイル特別な調整がなければ、さらなる改善の余地があります。
このプロジェクトには、3つの利用可能な開発環境があります。
好きな環境を選ぶことができます。
どちらを選ぶべきですか？従来のアプローチが好きな場合は、チームで働いていて、同僚と一貫した環境を持ちたい場合は、バグを簡単に再現し、新しいメンバーをすばやくオンボードしたい場合は、Sandboxにバグを再現してGitPodを公開して助けを求めます。
リポジトリをクローンし、依存関係をインストールします。
# clone repository
git clone [email protected]:nemanjam/nextjs-prisma-boilerplate.git
cd nextjs-prisma-boilerplate
# install dependencies
yarn installプロジェクトフォルダーを初めて開くと、VSコードが推奨される拡張機能をインストールするように要求する場合、それらをすべて受け入れ、強調、オートコンプリート、リント、フォーマットコード、テストの実行、コンテナの管理に必要です。
.env.developmentに必要な公共環境変数を入力します。最速の方法は、 httpサーバーでアプリを実行することです。
Facebook Oauthログインにのみローカルに
httpsが必要です。そのためには、localhostの証明書をインストールするにはmkcertが必要です。そのための指示は、docsフォルダーで見つけることができます。
PORTを3001として残します。複数の場所でハードコードされています。変更したい場合は、すべてを編集する必要があります（つまり、すべてのDockerfile.*およびdocker-compose.*.yml ）
# .env.development
SITE_PROTOCOL=http
SITE_HOSTNAME=localhost
PORT=3001
# don't touch these two variables
APP_ENV=local
NEXTAUTH_URL= ${SITE_PROTOCOL} :// ${SITE_HOSTNAME} : ${PORT} .env.development.localファイルを作成します。
# create local file form example file
cp .env.development.local.example .env.development.local
すべての環境で、Postgresコンテナは、Linuxホストマシンで現在の非ルートユーザーとして実行されるように構成されています。これは、ボリュームのデータベースファイルが正しい所有権と権限で作成されるように重要です。このためには、 MY_UIDとMY_GIDを定義する必要があります。それらを設定するのに最適な場所は~/.bashrcです。
# ~/.bashrc
export MY_UID= $( id -u )
export MY_GID= $( id -g )必要なプライベート環境変数を入力します。必要な変数は、Postgresデータベース接続とJWT Secretのみです。
FacebookとGoogleの資格情報はオプションであり、OAuthログインにのみ使用されます。 Facebookログインには、リダイレクトURLに
httpsが必要です。POSTGRES_USER、POSTGRES_PASSWORD、POSTGRES_DBの値を設定できます。
# .env.development.local
# set database connection
POSTGRES_HOSTNAME=localhost
POSTGRES_PORT=5432
POSTGRES_USER=postgres_user
POSTGRES_PASSWORD=password
POSTGRES_DB=npb-db-dev
# don't edit this expanded variable
DATABASE_URL=postgresql:// ${POSTGRES_USER} : ${POSTGRES_PASSWORD} @ ${POSTGRES_HOSTNAME} : ${POSTGRES_PORT} / ${POSTGRES_DB} ? schema=public
# jwt secret
SECRET=some-long-random-string
# OAuth logins (optional)
# Facebook (you need https for this)
FACEBOOK_CLIENT_ID=
FACEBOOK_CLIENT_SECRET=
# Google
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=すべての変数が設定された後、Dockerコンテナ内でPostgresデータベースを実行し、 schema.prismaおよびSeedデータベースからSQLテーブルを作成するPRISMA移行を実行します。
# run database container
yarn docker:db:dev:up
# run Prisma migrations (this will create sql tables, database must be running)
yarn prisma:migrate:dev:env
# seed database with data
yarn prisma:seed:dev:envこの時点ですべての準備が整っているので、アプリを開始できます。ブラウザでhttp://localhost:3001を開いて、実行中のアプリを表示します。
# start the app in dev mode
yarn devリポジトリビルドアプリコンテナをクローニングした後。
# terminal on host
yarn docker:dev:build Docker Environmentはenvs/development-dockerフォルダーの変数を読み取ります。サンプルファイルからローカルenvファイルを作成します。すでに構成されているすべての変数があります。
# terminal on host
cp envs/development-docker/.env.development.docker.local.example envs/development-docker/.env.development.docker.localアプリ、データベース、およびコンテナの管理者を実行します。それでおしまい。プロジェクトフォルダーはコンテナ内に/appフォルダーにマウントされています。ホストで直接ソースを編集するか、オープンリモートコンテナ拡張タブでnpb-app-dev右クリックして、リモート対コードインスタンスのコンテナとオープン/appフォルダーAttach to Container ]を選択できます。 http://localhost:3001ホストのブラウザーで開いて、実行中のアプリを表示します。
# terminal on host
yarn docker:dev:upコンテナ内に新しい端末を開き、データベースをシードします。Docker docker-compose.dev.yml 、すでに正しいenvファイルを渡しています。
# terminal inside the container
yarn prisma:seed注：gitはアカウントとともに既にコンテナに存在するため、コンテナから直接変更してプッシュできます。
# check that git config is already set inside the container
git config --list --show-originPortainer Community Editionコンテナをローカルにインストールすることをお勧めします。コンテナの管理やデバッグを簡単にするために、無料で非常に便利なツールです。
ElephantsQL.comにアクセスして、無料アカウントを作成し、無料の20MB Postgresデータベースを作成します。 gitpod.ioに移動し、githubでログインします。次のリンクを開くことにより、gitpodでフォークリポジトリを開きます（ your-username実際のものに置き換えます）：
https://gitpod.io/#https://github.com/your-username/nextjs-prisma-boilerplate
GitPod環境はenvs/development-gitpodフォルダーの変数を読み取ります。サンプルファイルからローカルenvファイルを作成します。
# terminal on Gitpod
cp envs/development-gitpod/.env.development.gitpod.local.example envs/development-gitpod/.env.development.gitpod.localそのローカルファイルで、 elephantsql.comからデータベースURLを設定します。他の変数は自動的に設定されます。
# envs/development-gitpod/.env.development.gitpod.local
DATABASE_URL=postgres://something:[email protected]/somethingこれで、データベースを移行してシードします。
注：
elephantsql.comデータベースにはすべての特権がないため、通常のprisma migrate devの代わりにprisma pushコマンドを使用する必要があります。 Docs/demo-environments.mdのShadowデータベースの詳細については、詳細をご覧ください。
# terminal on Gitpod
# migrate db
yarn gitpod:push:env
# seed db
yarn gitpod:seed:envすべてがセットアップされているため、アプリをDEVモードで実行して、新しいブラウザタブで開くことができます。
yarn gitpod:dev:envこのプロジェクトには、4つの個別のテスト構成とコードカバレッジ構成があります。すべてのテストは、DockerおよびGitHubアクションでローカルに実行できます。
注：推奨リストに既に含まれている
orta.vscode-jest拡張機能を使用して、すべてのJestテストを実行およびデバッグすることもできます。
ローカルで実行されます。
yarn test:clientDockerで走っています。
yarn docker:test:clientローカルで実行されます。
yarn test:server:unitDockerで走っています。
yarn docker:test:server:unitテストデータベースがアップして移行されていることを確認してください。あなたはそれを播種する必要はありません。
# run database container
yarn docker:db:test:up
# migrate test database
yarn prisma:migrate:test:envローカルで実行されます。
yarn test:server:integrationDockerで走っています。
yarn docker:test:server:integration前のステップと同じように、テストデータベースを実行する必要があります。
ローカルで実行されます。
yarn test:coverageDockerで走っています。
yarn docker:test:coverageローカルで実行：
テストデータベースを実行および移行する必要があります（シードは必要ありません）。
# run database container
yarn docker:db:test:up
# migrate test database
yarn prisma:migrate:test:env次に、生産用のアプリを構築する必要があります。
# build the app for prod
yarn build次に、アプリとサイプレスの両方を同時に開始する必要があります。これにより、サイプレスGUIが開きます。
# starts the app and Cypress GUI
yarn test:e2e:envヘッドレスモード（GUIなし）でサイプレスを実行することもできます。
# starts the app and Cypress in headless mode
yarn test:e2e:headless:envDockerで実行：
アプリとサイプレスの両方の画像を構築します。
# build testing app image
yarn docker:npb-app-test:build
# build Cypress container
yarn docker:npb-e2e:build次に、テストデータベース、テストアプリコンテナ、サイプレス（ヘッドレスモード）コンテナを一度に実行できます。
# run db, app and Cypress headless
yarn docker:npb-e2e:upDockerHubの環境変数と画像のみを必要とするTraefik Reverse Proxyを使用して展開するためにのみ、別のリポジトリNemanjam/Traefik-Proxyを作成しました。また、サーバー上に最新の画像を構築、プッシュ、および再展開するためのワークフローもあります。それを展開に使用する必要があります。
完全性のために、私はここで、生産アプリをローカルで、およびDockerで構築および実行する方法をここで説明しました。これら2つは、テストのためのステージング環境として役立ちます。また、ローカル開発マシンからライブイメージをDockerHubに構築およびプッシュする方法についても説明しました。
生産モードでアプリを構築および実行するとき、 .env.productionおよび.env.production.localから変数を読み取ります。ビルド時に必要な変数のみがNEXTAUTH_URLです（SEOを担当するCustomHeadコンポーネントのベースURLに使用されます）。 getStaticProps （静的サイト生成）を使用する場合は、正しいデータでDATABASE_URLも渡す必要があります。実行時に、これら2つのファイルのすべてのパブリック変数とプライベート変数を定義する必要があります。
生産アプリを構築および実行するには、これら2つのコマンドを実行します。
# build app
yarn build
# start app
yarn startDocker画像内に生産アプリARG_NEXTAUTH_URL構築する場合、ローカル（SSG Dockerfile.prod NEXTAUTH_URLとDATABASE_URL ）のような同じ変数ARG_DATABASE_URL渡す必要があります。今回の環境変数はenvs/production-docker/.env.production.dockerおよびenvs/production-docker/.env.production.docker.localから読み取られます。実行時に、これら2つのファイルのすべてのパブリック変数とプライベート変数を定義する必要があります。
Docker制作画像を構築および実行するには、これを実行します。
# build production image
yarn docker:prod:build:env
# run production image
yarn docker:prod:up繰り返しますが、今回はenvs/production-live/.env.production.live.build.localでNEXTAUTH_URLとDATABASE_URL （ssg用）を設定する必要があります。このファイルをサンプルファイルから作成します。
cp envs/production-live/.env.production.live.build.local.example envs/production-live/.env.production.live.build.localこのYARNスクリプトを編集し、実際のDockerHubユーザー名と画像名を設定する必要があります。
# replace your-dockerhub-username and your-image-name with yours
" docker:live:build " : " dotenv -e ./envs/production-live/.env.production.live.build.local -- bash -c 'docker build -f Dockerfile.prod -t your-dockerhub-username/your-image-name:latest --build-arg ARG_DATABASE_URL= ${DATABASE_URL} --build-arg ARG_NEXTAUTH_URL= ${NEXTAUTH_URL} .' " ,
これで、制作イメージを作成し、タグ付けし、DockerHubにプッシュできます。画像をプッシュするには、最初にdocker loginで端末にログインする必要があります。
# build and tag production image
yarn docker:live:build
# push image to Dockerhub
yarn docker:live:push .github/workflows/build-docker-image.ymlのGithubアクションで生産画像を構築およびプッシュするためのワークフローが既にセットアップされています。リポジトリ設定では、これらの変数を設定してワークフローを実行するだけです。
# your dockerhub username
DOCKERHUB_USERNAME
# your dockerhub password
DOCKERHUB_TOKEN
# database url (only for SSG)
NPB_DATABASE_URL
# your live production app url (without trailing '/')
# i.e. https://subdomain.my-domain.com
NPB_NEXTAUTH_URLdocker-compose.live.yml内で画像名を設定するだけで、すべての環境変数を渡し、サーバー上のdocker-compose up -dで展開する必要があります。
# docker-compose.live.yml
services :
npb-app-live :
container_name : npb-app-live
image : your-dockerhub-username/your-image-name:latestこの目的のために、私はすでに、各コンテナが異なるポートとTraefikマップポートをサブドメインに露出させるDockerコンテナ内で複数のアプリをホストできるTraefik Reverse Proxyを備えた個別のリポジトリNemanjam/Traefik-Proxyを作成しました。詳細については、これを構成する方法については、 README.mdファイルとリンクされたチュートリアルを参照してください。アプリコンテナを実行するだけで、TraefikはTraefikのコンテナを手動で再起動する必要なく自動的にピックアップします。
Traefikのほかに、コンテナの管理用のportainerコンテナ、生産データベースのadminer用コンテナ、Webサイトのアップタイムを追跡するためのuptime-kuma 、およびリモートホストからの接続を受け入れるように構成された別のpostgresコンテナ（GitHubアクションの構築に役立つ別のPostgresコンテナも既にあります。
Bellowは、設定する必要があるすべての環境変数がリストされています。簡単にするために、私はここでそれらをローカル.envファイルに設定する方法を示しました、 docker-compose.ymlファイルはそれを読み取り、必要なすべての変数をコンテナに転送します。これはデモアプリでは問題ありませんが、実際の制作アプリでは、これを行うための適切な方法は、クラウドプロバイダーのダッシュボードに設定するか、専用のボールトを使用することです。
# create .env file locally and set vars
cp apps/nextjs-prisma-boilerplate/.env.example apps/nextjs-prisma-boilerplate/.env
# copy populated local .env file to server securely with ssh
scp ./apps/nextjs-prisma-boilerplate/.env ubuntu@your-server: ~ /traefik-proxy/apps/nextjs-prisma-boilerplateこれらはすべて必要な変数です。
MY_UIDとMY_GID、Linuxサーバー上の現在のユーザーとグループのIDです。サーバーの端末でid -uとid -g実行することで、それらの値を見ることができます。それらを設定するのに最適な場所は、複数のコンテナに必要になる可能性があるため~/.bashrcに世界的にあります。それらは、ボリュームデータファイルが正しい許可と所有権（ルートユーザーではなく現在のユーザーとして）で作成されるように、Postgresコンテナに渡されます。
# apps/nextjs-prisma-boilerplate/.env
# public vars bellow
APP_ENV=live
# http node server in live, Traefik handles https
SITE_PROTOCOL=http
# real full production public domain (with subdomain), used in app and Traefik
SITE_HOSTNAME=nextjs-prisma-boilerplate.nemanjamitic.com
PORT=3001
# real url is https and doesn't have port, Traefik handles https and port
NEXTAUTH_URL=https:// ${SITE_HOSTNAME}
# private vars bellow
# db container
POSTGRES_HOSTNAME=npb-db-live
POSTGRES_PORT=5432
POSTGRES_USER=postgres_user
POSTGRES_PASSWORD=
POSTGRES_DB=npb-db-live
# don't edit this
DATABASE_URL=postgresql:// ${POSTGRES_USER} : ${POSTGRES_PASSWORD} @ ${POSTGRES_HOSTNAME} : ${POSTGRES_PORT} / ${POSTGRES_DB} ? schema=public
# current host user as non-root user in Postgres container, set it here
MY_UID=1001
MY_GID=1001
# or better globally in ~/.bashrc
# export MY_UID=$(id -u)
# export MY_GID=$(id -g)
# jwt secret
SECRET=some-long-random-string
# Facebook
FACEBOOK_CLIENT_ID=
FACEBOOK_CLIENT_SECRET=
# Google
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=手動作業を避けるために.github/workflows/deploy.ymlには、githubアクションワークフローが既にあります。あなたがする必要があるのは、手動でそれをトリガーするか、既存のビルドにチェーンしてワークフローをプッシュすることです。
# .github/workflows/deploy.yml
# trigger redeploy with build workflow
on :
workflow_run :
workflows : ['docker build'] このプロジェクトの広範なドキュメントがDocsフォルダーにあります。すべての技術的な側面、特に重要で困難な部分、特に困難な部分を注意深く記録できます。ここでは、問題の説明、ソリューション、コードスニペット、関連するリンク参照を見つけることができます。
現在、ドキュメントは、何かを解決する方法の裸の技術情報のみを保持しているという意味で、人間に優しい記事では追加の文脈で丸められていないという意味で裸です。
これがあなたがその中に見つけることができるものの簡単な概要です：
next-connectを備えたAPIハンドラー、いくつかの一般的な反応のような公式next.jsのドキュメントと例の主に重要なポイントが含まれています。mkcertを備えたローカルSSLセットアップ、GoogleおよびFacebookのログインに関する重要な詳細に関するドキュメントのトリッキーな部分v4移行、テストコンポーネントとフック、水分補給、主にDocsとTKDODOブログからnext-themesの構成、DaisyuiからのカスタムTailwindプラグインの実装としてのテーマv4移行ガイドelephantsql.comセットアップをデモ目的でセットアップするgetServerSidePropsでのエラーの処理、エラーボーニングとReactクエリ、TypeScript strict 、およびstrictNullChecksオプションを使用したエラーの処理エラーts-jestセットアップ、Reactクエリによる非同期テスト、テストフォーム、画像のJSDOMでのブロブクラスをock笑、UsereVent v14 Migration、Suspense and Errorboundary in Tests、MSW、MOSKING PRISMA、MOSKING PRISMA、TEST CONTROLLERS CONTROLLERS、BACKEND統合テストを使用したテストデータベース、テストデータベース、テストの整ったテスト、JESTセットアップ、JESTセットアップの運営、JESTセットjest-previewセットアップ、コードカバレッジ構成docker-compose.ymlオーバーライド、ライブ生産コンテナのセットアップ、カスタムサイプレス画像NODE_ENVとAPP_ENV変数の取り扱い、SSHアクションを使用したVPS展開gitpod.io 、 repl.it 、 codesandbox.io 、 stackblitz.comでこのアプリの実行に関するドキュメント、 envs and notes/envsフォルダーこれらのすべての環境に合わせて構成がありますが、実際に実行するのに十分なコンピューティング能力があるのはgitpodだけです貢献は大歓迎です。詳細情報を見つけることができます。
Imageコンポーネントのバックエンドサポートを追加output: 'standalone' next.config.jsの「スタンドアロン」ビルドオプションprismaを削除してみてくださいcypress: 10.xおよびnext-connect: 1.x （壊れた変更があります）JavaScriptフレームワークの周りには多くの話、理論、意見、話題があります...しかし、話すのをやめ、最も人気のあるフレームワークを選び、ドキュメントで提案するものを読んで、実際にそれを試して、それがどのように機能し、有意義な何かを構築できるかを確認しましょう。
ネマンジャム、リンキン
完全な参照リンクは、ドキュメントファイルに添付されています。最も重要な参考文献は次のとおりです。
next-connectを備えたAPIハンドラー、App hoangvvo/nextjs-mongodb-appの例このプロジェクトは、MITライセンス：ライセンスを使用します
