이번 3편은 배포 가이드에 추가된 일부 내용과 더불어, 필자의 최종 배포 소감으로 간단히 마무리 짓겠다.
// .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로 할 필요는 없습니다.
원래 기존 배포 가이드에서는 del 명령어를 통해 삭제를 디스트리뷰트 시에 적용했지만, 현재는 변경된 상태다.
"distribute": "npm i && npm run build && pm2 serve build 3000 --name <project-front> --spa"
"pm2": "^5.1.2"
이유를 살펴보자면, 이전 2편에서 설명한 것처럼 첫 배포 사이트의 경우 딜리트를 적용하면 삭제되고 실행이기 때문에... 서버 구동이 안 되었다. 따라서 현재는 npm run build를 추가 해서 그 부분을 방지했다. 아래는 그에 대한 추가설명이다.
삭제된 명령어
**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이므로 해당 옵션을 추가.
// 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를 하면 프로그램 설치와 동시에 추가가 됩니다.
}
}
"distribute": "npm i && pm2 start server.js --name <project-back> -i max"
"pm2": "^5.1.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를 사용한다.
cd <back-repo>
git pull origin main
npx pm2 reload <project-back>
❓ backend 배포 명령어인 pm2 start의 경우에는 코드를 맨 처음 한번만 읽어서 실행하기 때문에 reload를 해준다.
cd <front-repo>
git pull origin main
npm run build
❓ frontend 배포 명령어인 pm2 serve의 경우에는 클라이언트가 요청할 때, /build 폴더에서 파일을 응답 해주기 때문에 npm run build만 수행하셔도 괜찮다!
드디어~ 결국 우리 팀원 모두 배포의 순간을 만끽했다.
배포까지의 일련의 과정 역시 순탄치는 못 했다. 하지만, 처음치고는 꽤나 수월하게 한 것도 같다. 막상 해 보니 엄청 어렵다기보다는 배포도 익숙하지 못해서 더뎠던 것 같다.
그와 더불어 배포가 되는 일련의 과정을 프론트, 백 모두 해 볼 수 있어 어떻게 전체 일련의 과정이 이뤄지는 다 알 수 있어 뜻 깊은 경험이었다. 특히 db 넣는 게 그냥 넣어지는 것인 줄 알았던... 무지함을 반성하면서 새롭게 그 방법을 직접 구현해 본 것 역시 좋았다.
그렇지만, 또 막상 딱 이 기분이긴 하다. 프로젝트의 마무리인 배포까지 하고나니... 딱 이 시점에서는 시원하면서도 제대로 하지 못 한 부분이 생각나서 아쉬움이 남는 것은 어쩔 수 없는 숙명인 것 같다 ㅎㅎ 다음 플젝때는 이 아쉬움을 조금이나마 더 덜어내도록 노력하겠다. 그럼 이만~