nextjs prisma boilerplate
1.0.0
นี่คือ Full Stack Boilerplate ที่สร้างขึ้นรอบ ๆ Next.js Stack ล่าสุด มันประกอบด้วยแนวทางปฏิบัติที่ดีที่สุดที่อธิบายไว้ในเอกสารอย่างเป็นทางการรวมกับการตัดสินใจของฉันที่ได้มาจากประสบการณ์และความรู้ของฉันเองที่ฉันได้รวบรวมจากการทำงานกับคนอื่น ๆ
อย่าใช้เวลา 3 เดือนในการตัดสินใจทางสถาปัตยกรรมการเลือกไลบรารีตั้งค่าสภาพแวดล้อม dev และ prod และท่อส่ง CI/CD เขียนรหัสหม้อไอน้ำ แทนที่จะติดตั้ง boilerplate นี้ใน 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 28 form 8-alpha , 3 Dropzone, 9.6.1 , MSW
next-auth และ Facebook, Google และข้อมูลรับรอง.env* ไฟล์ ...pages โครงสร้างส่วนประกอบที่ปรับขนาดและแยกได้ -> layouts -> views -> components!important ในรหัสทั้งหมด)next-connect พร้อมมิดเดิลแวร์สำหรับการตรวจสอบและเส้นทางที่ได้รับการป้องกันgetServerSideProps ด้วยคลาสข้อผิดพลาดที่กำหนดเองtesting-library/react สำหรับการทดสอบหน่วยและการรวมjest-preview debugging ภาพ, ภาพล้อเลียนด้วย blob polyfill, แยก .env.test* ไฟล์แยกต่างหากหากไม่มีการปรับเปลี่ยนเป็นพิเศษมีที่ว่างสำหรับการปรับปรุงเพิ่มเติม
โครงการนี้มี 3 สภาพแวดล้อมการพัฒนาที่มีอยู่:
คุณสามารถเลือกสภาพแวดล้อมที่คุณต้องการ
เลือกอันไหน? หากคุณชอบวิธีการทั่วไปเลือกท้องถิ่นถ้าคุณทำงานเป็นทีมและต้องการมีสภาพแวดล้อมที่สอดคล้องกับเพื่อนร่วมงานเพื่อทำข้อบกพร่องซ้ำและสมาชิกใหม่ได้อย่างรวดเร็วเลือกนักเทียบท่าและหากคุณต้องการทำให้ Sandbox ทำข้อผิดพลาดซ้ำและขอความช่วยเหลือจากสาธารณชน
ที่เก็บโคลนและการติดตั้งการพึ่งพา
# clone repository
git clone [email protected]:nemanjam/nextjs-prisma-boilerplate.git
cd nextjs-prisma-boilerplate
# install dependencies
yarn installเมื่อคุณเปิดโฟลเดอร์ Project เป็นครั้งแรก VS Code จะขอให้คุณติดตั้งส่วนขยายที่แนะนำคุณควรยอมรับพวกเขาทั้งหมดพวกเขาจะต้องเน้นการเติมข้อความอัตโนมัติผ้าสำลีและรูปแบบการทดสอบการทดสอบจัดการคอนเทนเนอร์
เติมตัวแปรสภาพแวดล้อม สาธารณะ ที่จำเป็นใน .env.development วิธีที่เร็วที่สุดคือเรียกใช้แอพด้วยเซิร์ฟเวอร์ http
คุณต้องมี
httpsในพื้นที่สำหรับการเข้าสู่ระบบ Facebook OAuth เท่านั้น เพื่อที่คุณต้องใช้mkcertเพื่อติดตั้งใบรับรองสำหรับlocalhostคำแนะนำสำหรับที่คุณสามารถค้นหาได้ในโฟลเดอร์docs
ปล่อยให้ PORT เป็น 3001 มันเป็น hardcode ในหลาย ๆ ที่หากคุณต้องการเปลี่ยนคุณต้องแก้ไขทั้งหมด (เช่น 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 ต้องใช้
httpsสำหรับการเปลี่ยนเส้นทาง URL คุณสามารถตั้งค่าใด ๆ สำหรับ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= หลังจากตั้งค่าตัวแปรทั้งหมดแล้วคุณสามารถเรียกใช้ฐานข้อมูล Postgres ภายในคอนเทนเนอร์ Docker ให้เรียกใช้การอพยพของ PRISMA ที่จะสร้างตาราง SQL จาก schema.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 จะอ่านตัวแปรจากโฟลเดอร์ 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 ในอินสแตนซ์รหัสระยะไกล vs เปิด 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 สร้างบัญชีฟรีและสร้างฐานข้อมูล Postgres 20MB ฟรี ไปที่ gitpod.io เข้าสู่ระบบด้วย gitHub เปิดพื้นที่เก็บข้อมูลของคุณใน Gitpod โดยเปิดลิงค์ต่อไปนี้ (แทนที่ your-username ด้วย Real One):
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 pushแทนprisma migrate devอ่านรายละเอียดเพิ่มเติมเกี่ยวกับฐานข้อมูลเงาใน DOCS/DEMO-Environments.md
# terminal on Gitpod
# migrate db
yarn gitpod:push:env
# seed db
yarn gitpod:seed:envทุกอย่างถูกตั้งค่าคุณสามารถเรียกใช้แอพในโหมด Dev และเปิดในแท็บเบราว์เซอร์ใหม่
yarn gitpod:dev:envโครงการนี้มี 4 การกำหนดค่าการทดสอบแยกต่างหากรวมถึงการกำหนดค่าการครอบคลุมรหัส การทดสอบทั้งหมดสามารถทำงานได้ในพื้นที่ใน Docker และในการกระทำของ GitHub
หมายเหตุ: คุณยังสามารถเรียกใช้และดีบักการทดสอบ jest ทั้งหมดด้วยส่วนขยาย
orta.vscode-jestที่รวมอยู่ในรายการที่แนะนำแล้ว
ทำงานในพื้นที่
yarn test:clientทำงานใน Docker
yarn docker:test:clientทำงานในพื้นที่
yarn test:server:unitทำงานใน Docker
yarn docker:test:server:unitตรวจสอบให้แน่ใจว่าฐานข้อมูลทดสอบนั้นขึ้นและอพยพแล้ว คุณไม่จำเป็นต้องเพาะเมล็ด
# run database container
yarn docker:db:test:up
# migrate test database
yarn prisma:migrate:test:envทำงานในพื้นที่
yarn test:server:integrationทำงานใน Docker
yarn docker:test:server:integrationคุณต้องใช้ฐานข้อมูลทดสอบเช่นเดียวกับในขั้นตอนก่อนหน้า
ทำงานในพื้นที่
yarn test:coverageทำงานใน Docker
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นอกจากนี้คุณยังสามารถเรียกใช้ Cypress ในโหมด Headless (ไม่มี GUI)
# starts the app and Cypress in headless mode
yarn test:e2e:headless:envทำงานใน Docker:
สร้างทั้งแอพและภาพไซเปรส
# build testing app image
yarn docker:npb-app-test:build
# build Cypress container
yarn docker:npb-e2e:buildจากนั้นคุณสามารถเรียกใช้ฐานข้อมูลทดสอบ, ทดสอบคอนเทนเนอร์แอพและ cypress (ในโหมด headless) ในครั้งเดียว
# run db, app and Cypress headless
yarn docker:npb-e2e:upฉันสร้างที่เก็บแยกต่างหาก Nemanjam/Traefik-Proxy เท่านั้นสำหรับการปรับใช้กับพร็อกซีย้อนกลับของ Traefik ที่ต้องการเฉพาะตัวแปรสภาพแวดล้อมและภาพจาก Dockerhub นอกจากนี้ยังมีเวิร์กโฟลว์การกระทำของ GitHub ในการสร้างผลักดันและปรับใช้ภาพล่าสุดบนเซิร์ฟเวอร์ของคุณ คุณควรใช้สิ่งนั้นเพื่อการปรับใช้
เพื่อความสมบูรณ์ฉันได้อธิบายที่นี่ถึงวิธีการสร้างและเรียกใช้แอพการผลิตในท้องถิ่นและใน Docker ทั้งสองนี้มีประโยชน์ในการจัดเตรียมสภาพแวดล้อมสำหรับการทดสอบ ฉันยังอธิบายถึงวิธีการสร้างและผลักดันภาพสดไปยัง DockerHub จากเครื่องพัฒนาในพื้นที่ของคุณ
เมื่อสร้างและใช้งานแอพในโหมดการผลิตมันจะอ่านตัวแปรจาก .env.production และ .env.production.local ในเวลาสร้างตัวแปรที่ต้องการเพียงอย่างเดียวคือ NEXTAUTH_URL (ใช้สำหรับ URL พื้นฐานในส่วนประกอบ CustomHead ที่รับผิดชอบ SEO) หากคุณใช้ getStaticProps (การสร้างไซต์แบบคงที่) คุณจะต้องผ่าน DATABASE_URL ด้วยข้อมูลที่ถูกต้องเช่นกัน ที่รันไทม์คุณต้องกำหนดตัวแปรสาธารณะและส่วนตัวทั้งหมดในไฟล์ทั้งสองนี้
ในการสร้างและเรียกใช้แอพการผลิตเรียกใช้คำสั่งทั้งสองนี้
# build app
yarn build
# start app
yarn start เมื่อสร้างแอพการผลิตภายในอิมเมจนักเทียบท่าอีกครั้งคุณต้องผ่านตัวแปรเดียวกันเช่นในพื้นที่ ( NEXTAUTH_URL และ DATABASE_URL สำหรับ SSG) คราวนี้จะส่งต่อด้วย ARG_NEXTAUTH_URL และ ARG_DATABASE_URL ใน Dockerfile.prod ตัวแปรสภาพแวดล้อมในเวลานี้อ่านจาก envs/production-docker/.env.production.docker และ envs/production-docker/.env.production.docker.local ที่รันไทม์คุณต้องกำหนดตัวแปรสาธารณะและส่วนตัวทั้งหมดในไฟล์ทั้งสองนี้
ในการสร้างและเรียกใช้ภาพการผลิต Docker เรียกใช้สิ่งนี้
# build production image
yarn docker:prod:build:env
# run production image
yarn docker:prod:up อีกครั้งคุณต้องตั้งค่า NEXTAUTH_URL และ DATABASE_URL (สำหรับ ssg) ในครั้งนี้ใน envs/production-live/.env.production.live.build.local สร้างไฟล์นี้จากไฟล์ตัวอย่าง
cp envs/production-live/.env.production.live.build.local.example envs/production-live/.env.production.live.build.localคุณต้องแก้ไขสคริปต์เส้นด้ายนี้และตั้งชื่อผู้ใช้และชื่อภาพ
# 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 ใน .github/workflows/build-docker-image.yml ในการตั้งค่าที่เก็บของคุณคุณเพียงแค่ตั้งค่าตัวแปรเหล่านี้และเรียกใช้เวิร์กโฟลว์
# 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 เพื่อจุดประสงค์นี้ฉันได้ทำที่เก็บ Nemanjam/Traefik-Proxy แยกต่างหากแล้วด้วยพร็อกซี Reverse Traefik ที่ช่วยให้คุณโฮสต์แอพหลายตัวภายในคอนเทนเนอร์ Docker ที่แต่ละคอนเทนเนอร์เปิดเผยพอร์ตและแผนที่ Traefik ที่แตกต่างกันไปยังโดเมนย่อย สำหรับรายละเอียดวิธีกำหนดค่านี้ดูไฟล์ README.md และการสอนที่เชื่อมโยงในนั้น คุณเพียงแค่ต้องเรียกใช้คอนเทนเนอร์แอพของคุณและ Traefik จะหยิบมันขึ้นมาโดยอัตโนมัติโดยที่คุณไม่จำเป็นต้องรีสตาร์ทคอนเทนเนอร์ของ Traefik ด้วยตนเอง
นอกเหนือจาก Traefik แล้วยังมีคอนเทนเนอร์ portainer สำหรับการจัดการคอนเทนเนอร์, adminer Container สำหรับการบริหารฐานข้อมูลการผลิต, uptime-kuma สำหรับการติดตามเว็บไซต์ uptime และอีก 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เป็น 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= เพื่อหลีกเลี่ยงการทำงานด้วยตนเองมีเวิร์กโฟลว์การกระทำของ GitHub อยู่ใน .github/workflows/deploy.yml ที่จะลบภาพเก่าและดึงและเรียกใช้ภาพล่าสุดจาก Dockerhub โดยใช้การกระทำของ SSH สิ่งที่คุณต้องทำคือเรียกมันด้วยตนเองหรือโซ่มันในการสร้างและผลักดันเวิร์กโฟลว์ที่มีอยู่
# .github/workflows/deploy.yml
# trigger redeploy with build workflow
on :
workflow_run :
workflows : ['docker build'] มีเอกสารที่กว้างขวางสำหรับโครงการนี้ในโฟลเดอร์ DOCS คุณสามารถค้นหาด้านเทคนิคทั้งหมดที่บันทึกไว้อย่างรอบคอบโดยเฉพาะอย่างยิ่งส่วนที่สำคัญและยาก ที่นั่นคุณสามารถค้นหาคำอธิบายปัญหาโซลูชันตัวอย่างโค้ดและการอ้างอิงที่เชื่อมโยงที่เกี่ยวข้อง
เอกสารในปัจจุบันมีความหมายว่ามันมีเพียงข้อมูลทางเทคนิคที่เปลือยเปล่าวิธีการแก้ปัญหาบางอย่างและมันไม่ได้ถูกปัดเศษในบทความที่เป็นมิตรกับมนุษย์ด้วยบริบทเพิ่มเติม
นี่คือภาพรวมโดยย่อของสิ่งที่คุณสามารถหาได้:
next-connect และสิ่งที่ตอบสนองทั่วไปmkcert และรายละเอียดสำคัญเกี่ยวกับ Google และ Facebook เข้าสู่ระบบv4 , ส่วนประกอบการทดสอบและตะขอ, ความชุ่มชื้น, ส่วนใหญ่มาจากเอกสารและบล็อก tkdodonext-themes ชุดรูปแบบเป็นการใช้งานปลั๊กอิน tailwind ที่กำหนดเองจาก daisyuiv4elephantsql.com ฟรีเพื่อวัตถุประสงค์ในการสาธิตgetServerSideProps จัดการข้อผิดพลาดด้วยข้อผิดพลาดและการสืบค้น React, typeScript strict และ strictNullChecksts-jest , การทดสอบแบบ async ด้วยการสืบค้นแบบตอบโต้, แบบฟอร์มการทดสอบ, การเยาะเย้ยคลาส blob ใน JSDOM สำหรับรูปภาพ, การย้ายถิ่นฐาน v14 ผู้ใช้ V14, ความสงสัยและข้อผิดพลาดในการทดสอบ, MSW, การทดสอบการทดสอบการทำงาน การตั้งค่า jest-preview การกำหนดค่าการครอบคลุมรหัสdocker-compose.yml , การตั้งค่าการผลิตสดNODE_ENV และ APP_ENV , การปรับใช้ VPS โดยใช้การกระทำของ SSHgitpod.io , repl.it , codesandbox.io และ stackblitz.com ในโฟลเดอร์ envs และ notes/envs ที่คุณมีการกำหนดค่าสำหรับสภาพแวดล้อมเหล่านี้ทั้งหมดยินดีต้อนรับการมีส่วนร่วม คุณสามารถค้นหาข้อมูลเพิ่มเติมเกี่ยวกับวิธีการมีส่วนร่วมในการบริจาค
Image next.js สำหรับรูปภาพที่โฮสต์ในพื้นที่output: 'standalone' ใน next.config.jsprisma ออกจากการพึ่งพาพร็อคที่มีภาชนะแยกต่างหากสำหรับการย้ายถิ่นโดยไม่ทำให้เวิร์กโฟลว์ซับซ้อนเกินไปcypress: 10.x และ next-connect: 1.x (มีการเปลี่ยนแปลงที่แตกหัก)มีการพูดคุยทฤษฎีความคิดเห็นและเสียงกระหึ่มรอบกรอบ JavaScript ... แต่ให้หยุดพูดเลือกเลือกกรอบที่ได้รับความนิยมมากที่สุดอ่านสิ่งที่พวกเขาแนะนำในเอกสารและลองใช้ในทางปฏิบัติตรวจสอบว่ามันทำงานอย่างไรและดูว่าเราสามารถสร้างสิ่งที่มีประโยชน์และมีความหมายได้หรือไม่
Nemanjam, LinkedIn
ลิงก์อ้างอิงที่สมบูรณ์จะแนบอยู่ในไฟล์เอกสาร การอ้างอิงที่สำคัญที่สุดคือ:
next-connect ตัวอย่างแอป Hoangvvo/NextJS-MongoDB-Appโครงการนี้ใช้ใบอนุญาต MIT: ใบอนุญาต
