배포관련 질문드립니다.

React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드

Ch9-3. 배포하기

해결된 질문

작성

저는 vercel과 cloudtype 을 이용해 배포를 했습니다.
gitlink
front-link
backend-link

업무게시판등 backend연동이 잘 되지만, admin에서 문제가 있습니다. 수업에 진행한 아이디와 패스워드로, 진행했고, 오류가 나는 부분들을 계속 수정해 보았으나, 로그인연동이 안되서 문의 드립니다. 데이터는 git에 업로드된 내용으로 확인해 주시면 좋겠습니다.

HTML/CSS javascript react node.js mongodb

답변 3

LIZ.B

질문자

감사합니다. 잘 연동 되네요!

닭강정

지식공유자

안녕하세요. 질문 주셔서 감사합니다!

공유해주신 GitHub 및 배포 링크 확인했습니다. 업무게시판 기능은 정상적으로 백엔드 연동이 되고 있지만, 관리자 로그인(admin)에서 문제가 발생한다고 하셨네요.

먼저 확인 결과, 관리자 로그인 요청 시 500 Internal Server Error가 발생하고 있으며 이는 백엔드에서 로그인 관련 로직을 진행 중 발생한 에러인 것을 짐작할 수 있습니다.

그 후, 백엔드 라우터 폴더의 user.js에서 오타를 발견했습니다.

       
// user.js 55줄부터
if (!user) {
    return res.status("401").json({ message: "사용자 없음" })
}

로그인 코드 중 res.status("401")처럼 문자열로 상태 코드를 반환하고 있어, 이는 Express 내부에서 오류를 유발할 수 있습니다.

"401"이 아닌 숫자형 값 401로 수정을 하시면 정상적으로 로그인이 되는 것을 확인하실 수 있습니다.

if (!user) {
    return res.status(401).json({ message: "사용자를 찾을 수 없습니다." });
}

나머지 코드들도 숫자형이 아닌 문자형으로 되어있다면 수정 부탁드립니다!

강의 중 제가 작성한 코드에서 상태 코드를 문자열("401")로 입력했던 오타 때문이었습니다. 제 실수로 인해 혼란을 드려 죄송합니다. 회사 사이트 GitHub 예제 코드도 수정 완료 했습니다. 앞으로는 이런 부분도 더 꼼꼼히 안내드릴 수 있도록 하겠습니다.

그리고 또 작성하신 코드에서 에러가 발생할 만한 코드가 있는 것 같아 안내드립니다.

// App.jsx 57줄
const response = await axios.post(`${import.meta.env.VITE_API_URL}/auth/login`

토큰 검증을 하기 위해서는 login이 아닌 verify-token으로 변경을 하셔야 정상적으로 로그인이 가능합니다!

const response = await axios.post("http://localhost:3000/api/auth/verify-token",

추가 질문이 있으시면 언제든지 문의 주시면 감사하겠습니다! 감사합니다.

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. LIZ.B님께서 Vercel과 Cloudtype을 이용한 배포 관련 문제에 대해 문의 주셨군요. 배포 시 로그인 연동이 잘 되지 않는 문제에 대해 안내 드리겠습니다.

문제의 원인

환경 변수 설정: 환경 변수가 Vercel 및 Cloudtype에 제대로 설정되어 있는지 확인해 주세요. 특히, 데이터베이스 연결 문자열이나 인증 관련 환경 변수가 누락되거나 잘못 설정되어 있으면 문제가 발생할 수 있습니다.
도메인 CORS 설정: 백엔드에서 CORS 설정이 올바르게 되어 있는지 확인해 주세요. 프론트엔드와 백엔드가 서로 다른 도메인에 호스팅되어 있어서, CORS 설정이 필요합니다. 이는 백엔드 서버의 CORS 미들웨어 설정에서 origin에 Vercel의 프론트엔드 URL을 추가해야 합니다.
API 엔드포인트 확인: 프론트엔드에서 백엔드로 API 요청을 보내는 코드에서 올바른 URL을 사용하고 있는지 확인해 주세요. 때로는 로컬 개발 환경에서 사용하던 localhost URL이 배포 환경에서도 그대로 사용되어, 요청이 맞는 서버로 전달되지 않을 수 있습니다.

해결 방법

환경 변수 확인: Vercel과 Cloudtype의 배포 설정에서 백엔드 서버의 환경 변수가 제대로 설정되었는지 확인하고 필요한 경우 수정합니다. 이는 API 키, 데이터베이스 URL, 인증 키 등일 수 있습니다.
CORS 설정 업데이트: 백엔드 서버의 CORS 설정을 살펴보고, Vercel의 도메인을 허용하는지를 확인합니다. 예를 들어, Express.js를 사용하는 경우:
```
app.use(cors({
origin: "https://fullstack-website-2506.vercel.app", // Vercel의 프론트엔드 URL
credentials: true,
}));
```
API 엔드포인트 URL 수정: 프론트엔드에서 API 호출이 맞는 엔드포인트로 이루어지고 있는지 확인합니다.

참고 자료

GitHub Repository에서 소스 코드를 확인하고, 환경에 맞게 설정을 수정하세요: GitHub Repository
Vercel과 Cloudtype 관련 가이드나 문서를 참고하여 설정을 확인하세요.

질문을 해결하는 데 도움이 되었길 바랍니다. 더 궁금한 점이 있으시면 언제든지 문의 주세요. 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변