MERN 앱의 렌더 배포(무료 등급)

전체 스택 MERN 앱을 Render에 배포하기 위한 가이드

전제 조건:

완전히 작동하는 MERN 앱 및 Github의 저장소Here

TLDR

Render에 로그인하여 백엔드용 웹 서비스(Node, Express, MongoDB)와 프런트엔드용 정적 사이트(React)를 생성합니다.

Deployed App - Contact Bank
(경고 배포된 링크는 회전하는 데 30초가 걸립니다)

Render에 배포할 전체 스택 앱을 설계하는 방법에는 여러 가지가 있습니다.
이 튜토리얼은 다음 파일 구조를 가진 MERN 앱을 기반으로 합니다.

Contact-Bank (root)/
├── client/
│   ├── src
│   ├── public
│   ├── node_modules
│   ├── .env
│   ├── .gitignore
│   ├── package-lock.json
│   └── package.json
├── config
├── models
├── node_modules
├── routes
├── seed
├── .env
├── .gitignore
├── package-lock.json
├── package.json
└── server.js

워크플로우

(완전히 작동하는 프로덕션 준비 MERN 앱이 없는 경우 아래 단계를 따르십시오. 그렇지 않으면 here으로 이동하십시오.)

MERN 애플리케이션

렌더 배포용 기본 분기

Vercel 배포용 개발 분기 *선택 사항(프론트 엔드 테스트만 해당)

본점을 중심으로 진행하고 있습니다. 연락처 정보가 있는 기본 CRUD 앱인 Contact Bank이라는 MERN 앱을 만들었습니다. MongoDB에 1000개의 연락처를 시드했습니다.

데이터베이스를 시드하기 전에 상태를 테스트해야 하는 경우 contacts.json와 함께 프런트 엔드에 데이터 폴더를 포함했습니다.

모든 것을 허용하는 배포에 영향을 미치지 않는 후크 및 소품 드릴을 사용하려는 경우 상태 관리를 위해 ContextAPI를 사용하고 있습니다.
단계:

저장소 복제git clone repo

MongoDB의 MongoDB 연결 문자열을 환경 변수로 추가합니다(하드코딩하지 마세요. .env 파일에 있어야 합니다). 예:

MY_MONGO_URI='mongodb+srv:...mongodb.net/contact-bank?retryWrites=true&w=majority'

MongoDB 시드

CLI에서 이 명령을 실행합니다.

   node seed/seeds.js

서버 또는 .env 변수와 동일한 수준에서 === undefined

루트 디렉토리 package.json에서 필요한 스크립트는 다음과 같습니다.

//package.json

  "scripts": {
      "start": "node server.js",
      "server": "nodemon server.js",
      "client": "npm start --prefix client",
      "clientinstall": "npm install --prefix client",
      "dev": "concurrently \"npm run server\" \"npm run 
       client\"",
      "render-postbuild": "NPM_CONFIG_PRODUCTION=false 
      npm install --prefix client && npm run build -- 
      prefix client"
    },

루트 디렉토리 CLInpm run dev에서 모든 것이 실행되고 UI의 변경 사항이 데이터베이스에 반영되어야 합니다.

server.js 내 프로덕션에서 정적 자산을 제공합니다.

if (process.env.NODE_ENV === 'production') {
    //*Set static folder up in production
    app.use(express.static('client/build'));

    app.get('*', (req,res) => res.sendFile(path.resolve(__dirname, 'client', 'build','index.html')));
  }