이번 3편은 배포 가이드에 추가된 일부 내용과 더불어, 필자의 최종 배포 소감으로 간단히 마무리 짓겠다.

1. <추가 내용>

01) front repo

// .env
REACT_APP_BASE_URL=<추후 EC2 인스턴스의 dns 혹은 IP 주소로 넣습니다.>
...

// config.js
...
const BASE_URL = process.env.REACT_APP_BASE_URL
// or const BASE_URL = "localhost:8000";
...

💡 **백엔드 API 엔드포인트**에 대한 설정을 해줍니다. 현재는 localhost:8000이 들어가있지만 추후에 ec2의 ip 및 포트로 변경합니다. 이름은 꼭 BASE_URL로 할 필요는 없습니다.

1. 추가된 명령어

원래 기존 배포 가이드에서는 del 명령어를 통해 삭제를 디스트리뷰트 시에 적용했지만, 현재는 변경된 상태다.

1. "distribute": "npm i && npm run build && pm2 serve build 3000 --name <project-front> --spa"
2. "pm2": "^5.1.2"

이유를 살펴보자면, 이전 2편에서 설명한 것처럼 첫 배포 사이트의 경우 딜리트를 적용하면 삭제되고 실행이기 때문에... 서버 구동이 안 되었다. 따라서 현재는 npm run build를 추가 해서 그 부분을 방지했다. 아래는 그에 대한 추가설명이다.

2. 명령어 설명

삭제된 명령어
**pm2 del : 이전에 실행된 server가 있으면 종료.

npm i (npm install) : package-lock.json 내의 dependency 목록들을 읽은 다음 모듈들을 설치.

npm run build : package.json 내의 scripts에서 build 부분을 읽어 해당 명령어를 실행. (react-scripts build)

pm2 serve build 3000 --name --spa : pm2 프로그램의 serve 명령어를 통해서 build 폴더를 serving 한다. --name 옵션은 해당 pm2 리스트에서 식별할 수 있는 이름을 지정한다. --spa 옵션은 single page application용 옵션. CRA의 build 산출물은 spa이므로 해당 옵션을 추가.

02) back repo

// package.json
{
  ...
  "scripts": {
		...
		// 아래 부분 추가
		"distribute": "npm i && prisma generate && pm2 start server.js --name <project-back> -i max" // <- 추가
  },
  ...
	"devDependencies": {
		...
		"pm2": "^5.1.2" // ► npm i -D pm2를 하면 프로그램 설치와 동시에 추가가 됩니다.
	}
}

1. 추가된 명령어

1. "distribute": "npm i && pm2 start server.js --name <project-back> -i max"
2. "pm2": "^5.1.2"

2. 명령어 설명

npm i : 위와 동일

pm2 del : 이전에 실행된 server가 있으면 종료합니다. - 현재 삭제-

prisma generate : 기본적으로 백엔드 단에서 prisma generate를 실행하는 이유는 프리즈마 클라이언트를 생성해 주기 위함이다. 여기서는 npm i만으로는 프리즈마가 깔리지 않고, 따라서 서버를 구동하기 전에 프리즈마 설치를 해주기 위한 용도라고 보면 되겠다.
-> 필자의 경우 이걸 안 해주고 그냥 데이터만 새로 넣어도 되었지만, 대부분의 팀원들은 이 명령어를 추가해 줘야만 되었다. 이에 대해서는 아직 불분명하지만, 추후에는 꼭 해당 명령어를 사용하는 것이 최대한 예외 변수를 줄일 수 있을 것 같다.

pm2 start server.js --name -i max : pm2 프로그램의 start 명령어를 통해 server.js를 실행. --name 옵션은 해당 pm2 리스트에서 식별할 수 있는 이름을 지정. -i 옵션은 사용할 cpu 개수를 지정한다. max 값을 주면 사용할 수 있는 최대 cpu를 사용한다.

pm2의 serve 명령어 vs start 명령어

• serve 명령어는 정적인 파일을 전송하는 명령어다. 즉, npm run build를 통해 정적 파일들이 생긴 것을 클라이언트한테 전달해주는 역할을 한다.
• npm run build(react-scripts build)는 리액트의 파일들을 압축하여 실행에 필요한 기능들만 모아서 정적인 파일을 만드는 명령어다. 최적화 되어 있기 때문에 production 즉, 배포용으로 사용.
• start 명령어는 javascript 파일을 실행해주는 명령어다. 기존 node 명령어는 전역 에러가 날 시 재 시작이 되지 않지만 pm2 start를 이용하면 재시작된다. 또한, -i 옵션을 이용하여 싱글 스레드만 쓰던 node의 단점을 보완해준다.

  03) backend 코드가 바뀌었을 경우 (main에 새로운 코드가 merge)

cd <back-repo>
git pull origin main
npx pm2 reload <project-back>

❓ backend 배포 명령어인 pm2 start의 경우에는 코드를 맨 처음 한번만 읽어서 실행하기 때문에 reload를 해준다.

04) front 코드가 바뀌었을 경우 (main에 새로운 코드가 merge)

cd <front-repo>
git pull origin main
npm run build

❓ frontend 배포 명령어인 pm2 serve의 경우에는 클라이언트가 요청할 때, /build 폴더에서 파일을 응답 해주기 때문에 npm run build만 수행하셔도 괜찮다!

2. 최종 배포 소감.

드디어~ 결국 우리 팀원 모두 배포의 순간을 만끽했다.

배포까지의 일련의 과정 역시 순탄치는 못 했다. 하지만, 처음치고는 꽤나 수월하게 한 것도 같다. 막상 해 보니 엄청 어렵다기보다는 배포도 익숙하지 못해서 더뎠던 것 같다.

그와 더불어 배포가 되는 일련의 과정을 프론트, 백 모두 해 볼 수 있어 어떻게 전체 일련의 과정이 이뤄지는 다 알 수 있어 뜻 깊은 경험이었다. 특히 db 넣는 게 그냥 넣어지는 것인 줄 알았던... 무지함을 반성하면서 새롭게 그 방법을 직접 구현해 본 것 역시 좋았다.

그렇지만, 또 막상 딱 이 기분이긴 하다. 프로젝트의 마무리인 배포까지 하고나니... 딱 이 시점에서는 시원하면서도 제대로 하지 못 한 부분이 생각나서 아쉬움이 남는 것은 어쩔 수 없는 숙명인 것 같다 ㅎㅎ 다음 플젝때는 이 아쉬움을 조금이나마 더 덜어내도록 노력하겠다. 그럼 이만~