nextjs prisma boilerplate
1.0.0
이것은 최신 Next.js 스택을 중심으로 제작 된 풀 스택 보일러 플레이트입니다. 그것은 공식 문서에 설명 된 모범 사례로 구성되어 있으며 다른 사람들과 함께 일하면서 내 자신의 경험과 지식에서 파생 된 내 결정과 결합 된 모범 사례로 구성됩니다.
향후 3 개월 동안 건축 결정, 라이브러리 선택, DEV 및 PROD 환경 및 CI/CD 파이프 라인 설정, 보일러 플레이트 코드 작성, 대신 15 분 안에이 보일러 플레이트를 설치하고 오늘 기능을 시작하십시오.
앱이 파괴 된 경우 바닥 글의 오른쪽에있는
Reseed링크를 사용하여 데이터베이스를 다시 변경하십시오.
데모 데이터베이스가 파괴 된 경우 gitpod 계정이 필요하고 우편물 데이터베이스 URL이 필요할 수 있습니다. elephantsql.com에서 하나를 만들 수 있습니다. 자세한 내용은 GitPod 환경 섹션을 참조하십시오.
next-auth 와 함께 이메일/비밀번호 로그인 등에 대해 재사용 할 수 있습니다.) 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 8-alpha , React Dropzone, Zod, MSW, TailWindcs 3 , Jest 28 , 테스트 라이브러리 React, Cypress 9.6.1 .
next-auth 및 Facebook, Google 및 Credentials 제공 업체와의 인증.env* 파일 ...pages -> layouts -> views -> components!important 문장이 아님)next-connectgetServerSideProps 의 글로벌 오류 처리testing-library/reactjest-preview Visual Debugging, Blob Polyfill으로 조롱 된 이미지, 별도 .env.test* 파일특별한 조정이 없으면 추가 개선의 여지가 있습니다.
이 프로젝트에는 3 가지 가용 개발 환경이 있습니다.
원하는 환경을 선택할 수 있습니다.
어느 것을 선택해야합니까? 기존의 접근 방식을 좋아한다면, 팀에서 일하고 동료들과 일관된 환경을 원한다면 버그를 쉽게 재현하고 신입 회원을 신속하게 탑승 할 수 있도록 동료들과 일관된 환경을 갖기를 원한다면 샌드 박스를 만들고 싶다면 버그를 재현하고 공개적으로 GITPOD를 선택하도록 요청하십시오.
복제 리포지토리 및 설치 종속성.
# clone repository
git clone [email protected]:nemanjam/nextjs-prisma-boilerplate.git
cd nextjs-prisma-boilerplate
# install dependencies
yarn install프로젝트 폴더를 처음으로 열면 Code가 권장 확장을 설치하도록 요청하면 모든 것을 수락해야하며, 강조 표시, 자동 완성, 보풀 및 형식 코드, 테스트 실행, 컨테이너 관리를 위해 필요합니다.
.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 비밀에 대한 것입니다.
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 Database에서 SQL 테이블을 생성하는 Prisma Migrations를 실행하여 데이터를 사용합니다.
# 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 마우스 오른쪽 버튼으로 클릭하고 원격 대 코드 인스턴스에서 Attach to Container 및 열기 /app 폴더에 첨부를 선택할 수 있습니다. 호스트의 브라우저에서 http://localhost:3001 엽니 다.
# terminal on host
yarn docker:dev:up 컨테이너 내부에 새 터미널을 열고 데이터베이스를 시드, 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-origin컨테이너를 쉽게 관리하고 디버깅 할 수 있도록 Portainer 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 해당 로컬 파일에서 데이터베이스 URL을 elephantsql.com 에서 설정하십시오. 다른 변수는 자동으로 설정됩니다.
# 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 Database에 대한 자세한 내용을 참조하십시오.
# 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확장자로 모든 농담 테스트를 실행하고 디버깅 할 수도 있습니다.
현지에서 실행.
yarn test:clientDocker에서 달리기.
yarn docker:test:client현지에서 실행.
yarn test:server:unitDocker에서 달리기.
yarn docker:test:server:unit테스트 데이터베이스가 UP 및 마이그레이션되었는지 확인하십시오. 당신은 그것을 씨앗 할 필요가 없습니다.
# 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그런 다음 앱과 사이프러스를 동시에 시작해야합니다. Cypress 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그런 다음 테스트 데이터베이스, 테스트 앱 컨테이너 및 Cypress (헤드리스 모드) 컨테이너를 한 번에 실행할 수 있습니다.
# run db, app and Cypress headless
yarn docker:npb-e2e:upDockerHub의 환경 변수와 이미지 만 필요한 Traefik Reverse Proxy와 함께 배포 할 때만 별도의 저장소 Nemanjam/Traefik-Proxy를 만들었습니다. 서버에서 최신 이미지를 빌드, 푸시 및 재배치 할 github 작업 워크 플로우도 있습니다. 배포에 사용해야합니다.
완전성을 위해 나는 여기에서 제작 앱을 현지 및 Docker에서 구축하고 실행하는 방법을 설명했습니다. 이 두 가지는 테스트 준비 환경으로 유용 할 수 있습니다. 또한 현지 개발 기계에서 라이브 이미지를 DockerHub로 제작하고 푸시하는 방법을 설명했습니다.
생산 모드에서 앱을 구축하고 실행할 때 .env.production 및 .env.production.local 의 변수를 읽습니다. 빌드 시간에 필요한 유일한 변수는 NEXTAUTH_URL 입니다 (SEO를 담당하는 CustomHead 구성 요소의 기본 URL에 사용됨). getStaticProps (정적 사이트 생성)를 사용하는 경우 올바른 데이터를 사용하여 DATABASE_URL 도 전달해야합니다. 런타임 에이 두 파일의 모든 공개 및 개인 변수를 정의해야합니다.
제작 앱을 구축하고 실행하려면이 두 명령을 실행합니다.
# build app
yarn build
# start app
yarn start Docker 이미지 내부 Dockerfile.prod 프로덕션 앱을 다시 구축 할 때는 ARG_NEXTAUTH_URL ( NEXTAUTH_URL 및 SSG 용 DATABASE_URL )과 같은 동일한 변수 ARG_DATABASE_URL 전달해야합니다. 이번에는 환경 변수는 envs/production-docker/.env.production.docker 및 envs/production-docker/.env.production.docker.local 에서 읽습니다. 런타임 에이 두 파일의 모든 공개 및 개인 변수를 정의해야합니다.
Docker Production Image를 구축하고 실행하려면 이것을 실행하십시오.
# 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이 원사 스크립트를 편집하고 실제 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_URL docker-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 리버스 프록시와 함께 별도의 리포지토리 Nemanjam/Traefik-Proxy를 만들었으므로 각 컨테이너가 다른 포트를 노출시키는 Docker 컨테이너 내부에서 여러 앱을 호스팅 할 수 있으며 Traefik 맵 포트를 하위 도메인에 노출시킬 수 있습니다. 이 구성 방법은 README.md 파일과 링크 된 자습서를 참조하십시오. 앱 컨테이너 만 실행하면 Traefik이 수동으로 Traefik 컨테이너를 다시 시작하지 않고도 자동으로 픽업합니다.
Traefik 외에도 이미 컨테이너 관리를위한 portainer 컨테이너, 생산 데이터베이스를 관리하기위한 adminer , 웹 사이트 가동 시간 추적을위한 uptime-kuma 및 원격 호스트의 연결을 수락하도록 구성된 다른 postgres 컨테이너 (GitHub Actions에서 앱을 구축하는 데 유용함)도 있습니다.
벨로우에는 설정 해야하는 모든 환경 변수가 나열되어 있습니다. 단순성을 위해 로컬 .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는 현재 사용자의 ID이며 Linux 서버의 그룹입니다. 서버 터미널에서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= 수동 작업을 피하기 위해 SSH 작업을 사용하여 이전 이미지를 제거하고 DockerHub에서 최신 이미지를 당기고 실행하는 .github/workflows/deploy.yml 의 GitHub 작업 워크 플로가 이미 있습니다. 당신이해야 할 일은 수동으로 트리거하거나 기존 빌드에서 체인하고 워크 플로우를 푸시하는 것입니다.
# .github/workflows/deploy.yml
# trigger redeploy with build workflow
on :
workflow_run :
workflows : ['docker build'] DOCS 폴더에는이 프로젝트에 대한 광범위한 문서가 있습니다. 신중하게 문서화 된 모든 기술적 측면, 특히 중요하고 어려운 부분을 찾을 수 있습니다. 문제 설명, 솔루션, 코드 스 니펫 및 관련 연결된 참조를 찾을 수 있습니다.
현재 문서화는 무언가를 해결하는 방법에만 해당되는 기술 정보 만 보유하고 있으며 추가 맥락을 가진 인간 친화적 인 기사에서 반올림되지 않는다는 의미입니다.
다음은 찾을 수있는 내용에 대한 간단한 개요입니다.
next-connect API 처리기 및 일부 일반적인 반응 작업과 같은 중요한 요점이 포함되어 있습니다.mkcert 가있는 로컬 SSL 설정 및 Google 및 Facebook 로그인에 대한 주요 세부 사항v4 마이그레이션, 테스트 구성 요소 및 후크, 수화, 주로 문서 및 Tkdodo 블로그next-themes 구성, Daisyui의 사용자 정의 테일 윈드 플러그인 구현으로 테마v4 마이그레이션 가이드elephantsql.com 데모 목적으로 설정getServerSideProps 의 오류 처리, ErrorBoundaries 및 React Query의 오류 처리, TypeScript strict 및 strictNullChecks 옵션ts-jest 설정, RECT 쿼리를 사용한 비동기 테스트, 테스트 양식, 이미지에 대한 JSDOM의 Blob 클래스 조롱, 테스트의 USREVENT v14 마이그레이션, 서스펜스 및 오류 결합, MSW, 단위 테스트에서 프리즘을 조롱하는, 테스트 컨트롤러를위한 초강대국 통합, Test Database, Dulti Projects jest, running joc and running rocalds and running joc and running job and gunder hocents and gollend integration teston. jest-preview 설정, 코드 커버리지 구성docker-compose.yml , 라이브 프로덕션 컨테이너 설정, 사용자 정의 Cypress 이미지 처리NODE_ENV 및 APP_ENV 변수 처리, SSH 조치를 사용한 VPS 배포 처리gitpod.io , repl.it , codesandbox.io 및 stackblitz.com 에서이 앱을 실행하는 것에 대한 문서, envs 및 notes/envs 폴더에서 이러한 모든 환경에 대한 구성이 있지만 GITPOD 만 실제로 실행하기에 충분한 컴퓨팅 능력을 가지고 있습니다.기부금을 환영합니다. 추가 정보를 찾을 수 있습니다. 기여에 기여하는 방법을 찾을 수 있습니다.
Image 구성 요소에 대한 백엔드 지원 추가next.config.js 의 output: 'standalone' 빌드 옵션prisma 제거하십시오.cypress: 10.x 및 next-connect: 1.x (변경 사항이 깨져 있음)에 대한 업데이트JavaScript 프레임 워크 주변의 많은 대화, 이론, 의견 및 버즈가 있습니다. 그러나 말을 멈추고, 가장 인기있는 프레임 워크를 선택하고, 문서에서 제안한 것을 읽고 실제로 작동하는 방법을 확인하고 유용하고 의미있는 것을 구축 할 수 있는지 확인하십시오.
Nemanjam, LinkedIn
전체 참조 링크는 문서 파일에 첨부되어 있습니다. 가장 중요한 참조는 다음과 같습니다.
next-connect , 예제 앱 Hoangvvo/Nextjs-MongoDB-App을 사용한 API 처리기이 프로젝트는 MIT 라이센스 : 라이센스를 사용합니다
