mernboilerplate antd
1.0.0
이 저장소에는 MERN(MongoDB, Express.js, React.js 및 Node.js) 프로젝트에서 따라야 할 프로덕션 모범 사례를 계속 추가할 것입니다. 또한 더 나은 UX를 위해 UI에 Antd Pro를 사용하고 있습니다. 나중에 MUI도 사용할 예정입니다.
다음은 샘플 목록 페이지의 샘플입니다.
이름에서 알 수 있듯이 이 저장소는 Express.js 및 React.js를 기반으로 구축되었지만 구현 세부 사항에서는 다른 지원 기술도 찾을 수 있습니다.
세부 프레임워크 및 패키지는 서버 및 클라이언트 디렉터리의 package.json 파일에서 찾을 수 있습니다.
본 프로젝트는 기본적으로 두 가지 방식으로 실행될 수 있습니다. 하나는 docker를 사용하는 것이고, 다른 방법은 vscode를 통해 수동으로 실행하는 것입니다.
MongoDB 호스팅 옵션에 따라 적절한 docker-compose 파일을 선택합니다.
현재 두 개의 docker-compose 파일이 있습니다.
docker-compose.mongocloud.yml - MongoDB.com 호스팅 클러스터docker-compose.yml - 로컬 MongoDB 컨테이너 docker-compose.mongocloud.yml 의 MONGODB_CLOUD_URL 적절한 MongoDB URL로 변경해야 합니다.docker-compose.yml 의 REACT_APP_API_URL 적절한 API URL로 변경해야 합니다. 클라이언트를 인터넷에 노출하려면 REACT_APP_API_URL 적절한 API URL로 변경해야 합니다. 그렇지 않으면 REACT_APP_API_URL http://localhost:8002 로 유지하세요.docker-compose 명령 실행
머신에는 docker 및 docker-compose가 설치되어 있어야 합니다. 저장소의 루트로 이동하여 적절한 명령을 실행하십시오. 그러면 Docker 환경 내에서 MongoDB 컨테이너(로컬 MongoDB 서버를 사용하는 경우)와 함께 서버 및 클라이언트 컨테이너가 가동됩니다.
클라우드 호스팅 MongoDB에서 Docker 컨테이너 사용
> cd project-root
> docker-compose -f docker-compose.mongocloud.yml build
> docker-compose -f docker-compose.mongocloud.yml up로컬 MongoDB와 함께 Docker 컨테이너 사용
> cd project-root
> docker-compose build
> docker-compose up클라이언트와 서버가 모두 실행 중이며 클라이언트 URL로 이동하면 다음 화면이 표시됩니다.
시드 데이터 도커 컨테이너 내부로 이동하여 아래 명령을 실행합니다. 이는 roles , users 및 products 데이터로 데이터베이스를 시드합니다.
docker exec -it appserver bash
npm run db:seed
npm run db:migrate 다음 출력이 표시됩니다. 
이제 애플리케이션에 로그인하면 제품 목록이 표시됩니다.
vscode를 통해 실행하려면 서버 측 프로젝트와 클라이언트 측 프로젝트를 별도로 실행해야 하며 mongodb가 실행 중인지 확인해야 합니다.
server 디렉터리 내에 .env 파일을 만듭니다. 아래 항목을 추가하거나 그에 따라 변경하십시오. .env.sample 파일을 따라가면 형식을 확인할 수 있습니다.
DB_HOST=localhost
DB_PORT=27017
DB_NAME=appdb
JWT_SECRET=secret
JWT_EXPIRES_IN=3600
PORT=5000
IS_MONGODB_CLOUD_URL=false
MONGODB_CLOUD_URL=mongodb+srv:// <USER >: <PASSWORD >@cluster0.abcd.mongodb.net/myFirstDatabase?retryWrites=true
우리는 도커 컨테이너에서 MongoDB를 실행한다고 가정합니다.
cd server
npm i
npm run db:up
npm start cd client-pro
nvm use --lts
yarn
yarn start데이터베이스를 시드하려면 docker 컨테이너에서 다음 명령을 실행해야 합니다. Docker 환경 외부에서 서버와 클라이언트를 실행하는 경우에도 터미널에서 이러한 명령을 실행할 수 있습니다. 나는 도커 컨테이너에서 appserver를 실행하고 있다고 가정합니다.
docker exec -it appserver bash
npm run db:seed
npm run db:migrate /server/setup/users.json 파일에서 사용자 이름과 비밀번호를 볼 수 있어야 합니다.
애플리케이션에 대한 권한 관리 UI를 도입했습니다. 샘플 이미지는 아래와 같습니다.
Sentry.io 에 대한 중앙 집중식 로그 로그를 sentry.io로 보낼 수도 있습니다. 이 기능을 사용하려면 client/src/env.config.js 에 dsn 항목을 추가해야 합니다. 설정 스니펫은 index.js 파일에서 아래와 같습니다.
Sentry . init ( {
dsn : Config . dsn ,
integrations : [ new Integrations . BrowserTracing ( ) ] ,
tracesSampleRate : 1.0 ,
} ) ; server API API를 보려면 브라우저를 열고 http://localhost:5000/api-docs 방문하십시오. 이상적으로는 모든 API 엔드포인트를 Swagger에 추가해야 하지만 데모 목적으로 제품 API 엔드포인트만 추가했습니다.
API를 테스트하기 위해 postman 컬렉션을 재사용할 수 있습니다. docs/rbac-mern-boilerplate.postman_collection.json Postman으로 열면 적절한 페이로드가 있는 엔드포인트가 표시됩니다.
| 프로젝트 | 명령 | 일 |
|---|---|---|
| 뿌리 | npm run build | 컨테이너를 빌드합니다. |
| 뿌리 | npm run start | Docker 컨테이너에서 프로젝트 및 데이터베이스 시작 |
| 뿌리 | docker exec -it appserver /bin/sh 그런 다음 npm run db:seed | 용기 내부의 종자제품을 실행합니다. |
| 섬기는 사람 | npm i | 서버 측 종속성 설치 |
| 섬기는 사람 | npm run db:up | Docker 컨테이너에서 데이터베이스 시작 |
| 섬기는 사람 | npm run test | jest 사용하여 테스트 실행 |
| 고객 | npm i | 클라이언트 측 종속성 설치 |
| 고객 | npm run start | 반응 앱 시작 |
| 고객 | npm run build | 프로덕션 모드에서 반응 앱 빌드 |
| 고객 | npm run test | Testing Library 사용하여 테스트 실행 |
이 저장소에는 단위 테스트와 통합 테스트가 모두 포함되어 있습니다. 현재로서는 코드 적용 범위가 매우 낮지만 앞으로는 90% 이상을 만들기 위해 노력하고 있습니다.
localStorage 및 axios 와 같은 모든 외부 종속성을 모의합니다. 테스트를 실행하려면 npm run test 명령을 실행하면 됩니다.
Jest 를 테스트 라이브러리로 통합했으며 통합 테스트를 더 쉽게 만들기 위해 supertest 및 mongodb-memory-server 패키지를 추가했습니다.Jest 사용하여 서비스 레이어를 테스트하고 MongoDB 와 같은 외부 종속성을 모의했습니다. 테스트를 실행하려면 npm run test 명령을 실행하면 됩니다.
이 프로젝트는 MIT 라이선스를 받았습니다.
지금은 코드 측면에서 커뮤니티 기여를 받지 않습니다. 하지만 제안 사항이 있거나 버그를 발견한 경우 언제든지 문제를 공개하거나 끌어오기 요청을 보내주세요.
반면에, 이 프로젝트에 대해 알고 싶거나 토론을 시작하고 싶다면 GitHub 토론 게시판에서 토론을 시작하세요.
나는 이 프로젝트의 코딩 단계를 화면 녹화해 왔습니다. YouTube 재생목록에서 해당 영상을 찾아보실 수 있습니다. 이 비디오는 방글라 에만 있지만 국제적인 관심을 갖고 있는 청중을 위해 영어로 특별 전용+유료 세션을 진행하게 되어 기쁩니다. 도움이 필요하시면 언제든지 [email protected]으로 연락주세요.
감사해요. 건배.
