[목표]
CI/CD를 구축합니다. (대부분완료)
프로젝트 상세 페이지 구상합니다.
지금까지의 CURD 작업물들을 모두 Merge합니다. [중요]
발표 준비를 합니다.
멘토님께 이메일 보내기(월, 목)
CORS, 프론트엔드 연결 불가 해결하기
프로젝트 흐름/진행도 구성(파이프 라인)
12:00 ~ 13:30
식사를 했다. 명석이형이랑 동생 게임을 같이 했다.
13:30 ~ 16:00
CI/CD 환경을 다시 구축해야한다. 서버가 터졌기 때문이다…
프론트엔드 서버가 터지다. (최적화 롤백)
어제 프론트엔드 서버를 올렸다 터졌다. 그래서 EC2 사양을 높이고 불필요 UI와 패키지를 제거하여 프론트엔드 최적화를 실시하기로 했다. 확인해보니까 수정해야될 부분이 너무 많아서 롤백하고 서버 사양 올려서 쓰기로 했다. 프론트엔드 최적화 과정은 폴리싱때 수행하기로 하겠다.
올린 커밋은 두개지만 확인해보면, 중간에 여러번의 수정이 있었다. 자칫하면 다른 페이지가 작동되지 않을수 있기 때문에, 건들지 않는것이 좋겠다.
실제로 위의 롤백이 UI 하고 패키지 몇개 지웠다가 작동되지 않아서 복구한것이다.
502 Bad Gateway 1차 조치
패키지가 정상적으로 처리되서 밑의 사진과 같이 정상적으로 배포가 되었다. 그러나 사이트를 직접 들어가보니, 502 Bad Gateway가 떠있었다. 그러나 해당 증상은 EC2 프론트엔드 프로젝트폴더에서 다음과 같은 과정을 진행하면된다. 놀라운건 이렇게 해도 안되서 확인을 다시 했다.
npm install- pm2 프로세스 삭제를 위한
pm2 delete Codeplanner_Frontend - pm2프로세스를 원하는 설정 파일로 실행
pm2 start ecosystem.config.js --env production pm2 list와pm2 logs Codeplanner_Frontend로 현재 실행중인 프로세스와 로그를 확인할 수 있다.- 이후에 Github Action으로 가서 오른쪽 상단의 Re-run all jobs를 눌러서 재실행하자.
502 Bad Gateway 2차 조치
확인을 해보니, 보안및 권한 정책상 프론트엔드를 80번과 443번에 직접 배포하는게 비추천 하고 이과정에서 502에러가 발생할수 있다고 한다.
그래서 프론트엔드의 nginx.conf 파일을 80번에서 3000번으로 옮기고 매핑을 80으로만 해주었다.
우선적으로 package.json 파일을 80에서 3000으로 수정했다.
"build": "next build",
"build:prod": "NODE_ENV=production next build",
"start": "next start",
"start:prod": "NODE_ENV=production next start -p 3000",
"lint": "next lint",
"lint:fix": "next lint --fix",
"type-check": "tsc --noEmit"
},
"dependencies": {
"@dnd-kit/core": "^6.3.1",
"@dnd-kit/modifiers": "^9.0.0",
"@dnd-kit/sortable": "^10.0.0",
.
.
.
}
}이후 배포가 되는대로, pm2 프로세스를 재시작 했다.
나같은 경우는 삭제후 다시 실행한다.
pm2 delete Codeplanner_Frontend
pm2 start ecosystem.config.js --env production
→ 이후에는 nginx.conf 파일을 확인해봤으나 이미 올바르게 설정되어 있어 수정하지 않았다.
참고사항! 패키지와 502 에러 같은 경우 같이 진행했다. 패키지 오류를 해결하니 502 에러가 떳고, 502에러를 해결하니 패키지 에러가 떠서 두개의 트러블 슈팅을 동시에 진행했다. 또한 수도 없는 pm2 프로세스 삭제와 실행을 반복했다. 대부분 커서 Ai와 함께 효율적으로 진행했다.
빌드 캐시 문제
가끔 빌드 캐시 문제가 생길수 있다. 그러면 간단히 다음과 같은 명령어로 빌드 캐시 삭제 후 재빌드하자.
rm -rf .next
npm run build16:00 ~ 18:20
CORS 정책 오류
모든 문제가 해결되어 드디어 프론트엔드가 http에 보인다. 그러나 프론트엔드에서 보낸 요청이 벡엔드가 통신하지 못한다.
projectList:1 Access to fetch at 'http://3.38.25.129:5000/projects' from origin '[http://3.38.25.129](http://3.38.25.129/)' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.그래서 커서가 조언한 방법대로 nginx.conf 에 헤더를 추가해서 적었다. 이후 아래의 명령어로 EC2에서 재시작까지 했지만 원활하게 되지 않았다.
밑의 커밋을 보면 CORS를 해결하기 위한 헤더가 추가된것을 알 수 있다. 그러나 악명높은 CORS인 만큼 바로 해결되지 않았다.
sudo systemctl reload nginx
# 또는
sudo service nginx reload이 CORS 과정을 해결하면서 npm install, deploy.yml 에서 문제가 생겨서 해결하면서 CORS도 동시에 해결했다. deploy.yml 같은 경우 너무 길어져서 간소화 작업을 진행도 했다.
nginx에서 통신을 하면서 /api가 포함되어 출력한다해서 프론트엔드에서 모든 URL에 /api를 추가 하기도 했지만, 해결되진 않았다.
백엔드에 설정을 해도 안된다…
# ⚠️⚠️⚠️배포환경 관련 설정 주의 필요!!!⚠️⚠️⚠️
# 배포 환경시
PORT=5000
CORS_ORIGIN=http://3.38.25.129,http://3.38.25.129:5000,http://3.38.25.129:3000
DB_HOST=codeplannerdb.cjyeyk2qmmx3.ap-northeast-2.rds.amazonaws.com
DB_PORT=5432
DB_USERNAME=codeplanner
DB_PASSWORD=codeplanner1234
DB_DATABASE=codeplanner
DB_SSL=true
DB_SSL_CA_PATH=./global-bundle.pem18:20 ~ 19:00
식사를 하고 집안일을 하다 왔다. 빠르게 CORS를 해결하고 싶다…
아직 CORS 관련 문제 해결중…
일단 재홍히 형으로 부터 다양한 정보를 들었다. Frontcloud, 로드 밸런서, SES 등 아직 해야될 것들이 많다.
프론트엔드 패키지 3개가 제대로 설치되지 않는 문제가 있어서 확인하고 수정했다. 배포때부터 패키지 npm install 하게끔 했다.
19:00 ~ 23:00
deplay.yml 간소화
커서 코드가 너무 꼬여서 deplay.yml 문제가 있어서 GPT를 통해서 간소화했다.
name: Deploy Frontend to EC2
on:
push:
branches: [ main ]
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout source
uses: actions/checkout@v4
- name: Set up SSH key
run: |
mkdir -p ~/.ssh
echo "${{ secrets.ENCODED_EC2_SSH_KEY }}" | base64 -d > ~/.ssh/id_rsa
chmod 600 ~/.ssh/id_rsa
- name: Deploy to EC2
run: |
ssh -o StrictHostKeyChecking=no ubuntu@3.38.25.129 << 'EOF'
cd /home/ubuntu/codeplanner/Codeplanner_Frontend
git pull origin main
rm -rf .next node_modules
npm install
npm run build:prod
pm2 delete codeplanner-frontend || true
pm2 start ecosystem.config.js --env production
sudo nginx -t && sudo systemctl reload nginx
echo "✅ Frontend deployment complete"
EOF
CORS관련 문제 해결. (임시)
근데 밑의 글을 보면 알겠지만, 임시로 해결된 것이다. 어느 시점부터 main에 충돌로 커밋이 안되서 문제가 계속해서 생겼다.
지금은 프로젝트 생성에서 설명 안 뜨는 문제 해결했지만, 추후 이메일 관련 문제를 해결하면서 잘못된 것을 알게 되었다.
23:00 ~ 04:00
이메일 시스템 localhost 반영 문제
코드상 동적으로 URL을 배정하게끔 코딩해놨는데, 계속해서 이메일로는 localhost로 접속된다. 이러한 이메일 시스템 localhost 오류를 해결하기 위해 email 특정 사용자 삭제하면서 해결중이다. 중간에는 로컬에서도 테스트가 되지 않아 고민을 많이 했다.
그러나 알고보니, 어느 시점에서부터 dev와 main의 코드가 충돌되어 EC2에 Merge가 되지 않는 문제가 있었고, 명석이 형의 EC2에 올라간 파일을 직접 조회하면서 문제를 알게 되었다. 충돌부분이 해결되고 deploy까지 잘되었고 이메일 반영이 해결되어 우리의 ip주소로 넘어오게되었다.
이메일 해결되니까 갑자기 404 에러가 떠서 확인해보니 api url이 벡엔드에 추가되서 그런것이었다.
그래서 아까 추가했던 URL의 /api 부분을 삭제 했다.
칸반보드 SSR 렌더링 문제 해결하기
이후 칸반보드가 되지 않아 확인중이다. 다른건 렌더링 되는데, 칸반보드만 SSR 렌더링이 안된다…
로그도 안떠서 답이 없다. 몇번의 삽질과 여러명의 시도 끝에 해결법을 찾았다.
확인해보니까 프론트엔드의 .env.production 파일에 오늘 아침에 바꾼 코드를 다시 롤백하니 성공 했다. NEXT_PUBLIC_API_URL의 값을 기존 /api에서 밑의 값으로 바꿨다. 이유는 정확하게 모르겠지만 502, CORS, 이메일 localhost 오류를 해결하면서 코드들과 nginx, pm2 설정이 매칭이 되지 않은것 같다. 해당 배포 관련 문제가 해결되고 나서 최종 정리를 해두겠다.
# ⚠️⚠️⚠️배포환경 관련 설정 주의 필요!!!⚠️⚠️⚠️
NEXT_PUBLIC_API_URL=http://3.38.25.129/api
LOG_LEVEL=debug
NEXT_PUBLIC_ENV=production내일 발표할 내용들에 대해 각각 담당한 팀원들에게 쓰인 기술과 내용들을 받았고 종합했다. 발표자료를 구상하고 PPT를 재탕하여 살짝 수정하여 준비했다. 발표시에 진행 순서를 생각하고, 내용들을 선정했다.
