개발자

웹 클라이언트랑 서버 따로 배포하는 방법 알려주실 분

2024년 02월 06일조회 163

안녕하세요. 프론트엔드 개발자를 희망하는 학생입니다. 항상 프론트만 개발했다가 MERN 스택(mongodb, express, react, nodejs) 강의를 보고 이번에 처음으로 백도 개발하게 되었습니다. 프론트만 개발했을 때는 netlify에 배포했는데 서버는 어디에 배포해야할지, 클라이언트는 그대로 netlify에 배포하고 서버는 따로 배포해도 되는 것인지, 서버 무료 배포 사이트는 어떤 것이 좋은지 궁금합니다. 따로 배포해도 된다면 방법을 알려주시면 감사하겠습니다. 참고로 클라이언트와 서버 폴더가 따로 구성되어 있습니다. App 폴더 안에 client 폴더, server 폴더 이렇게 있습니다. 사진은 server/index.js 사진인데 서버를 client/build/index.js에 연결해놨으니까 그냥 서버만 배포해도 되는지도 궁금합니다.

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.

답변 2

이상선님의 프로필 사진

개념을 더 잘 잡아야 합니다 도움 드리죠

선민님의 프로필 사진

선민

프론트엔드, 백엔드 공부중2024년 11월 07일

안녕하세요, 글 쓴 분과 비슷한 상황인데 혹시 어떻게 해야할까요..?

선민님의 프로필 사진

안녕하세요. 같은 고민을 하는 것 같아 댓글 남기게 됐습니다. 혹시 해결되셨나요?

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

AI 답변
커리어리 AI 봇 프로필 이미지

커리어리 AI 봇

GPT가 달아주는 답변입니다.

2024년 02월 06일

확실히 웹 클라이언트와 서버를 각각 별도로 배포하는 것이 가능합니다. 우선, 웹 클라이언트와 서버는 대체로 다른 환경에서 더 잘 동작하므로 별도로 배포하는 것이 유용할 수 있습니다. 클라이언트(프론트엔드)를 지금처럼 Netlify를 통해 배포하시면 됩니다. 웹팩 빌드 결과물을 Netlify에 업로드하여 배포가 이루어집니다. 서버(백엔드)는 Heroku, AWS, Google Cloud Platform(GCP), Microsoft Azure 등 다양한 플랫폼에서 호스팅될 수 있습니다. 하지만 초보자에게 가장 친숙하고 쉽게 사용할 수 있는 플랫폼은 Heroku라고 생각합니다. Heroku는 무료 계정으로도 충분한 기능을 제공합니다. Heroku를 사용하려면, 이 사이트에 회원 가입 후 새 애플리케이션을 생성하면 됩니다. 그 다음 'Deploy' 메뉴에서 'Deployment method'를 선택해 코드 저장소와 연결할 수 있습니다. 서버의 경우 포트 설정을 잘 해야 합니다. 로컬 개발 환경에서와 달리 배포 환경에서는 특정 포트가 할당되므로 이를 반영해주어야 합니다. Node.js/Express.js 에서 일반적으로 `process.env.PORT || 5000`와 같은 형태로 작성합니다. 본인의 서버가 REST API를 제공하는 경우, 클라이양트에서 배포된 서버의 URL을 호출하면 됩니다. CORS 설정을 잘 해주어야 합니다. 만약 클라이언트와 서버가 같은 도메인에서 운영되지 않는다면 CORS 오류가 발생할 수 있습니다. 서버 코드에 이미 client 빌드 결과물 경로를 연결해 놓으셨다고 하니, 이런 경우 서버만 배포하셔도 없습니다. 이 때 배포된 서버 URL에 접속하면 연결된 클라이언트 앱이 보여질 것입니다. 마지막으로, 아래 참고사항들 확인해 주세요. 1. 배포 환경에서는 개발 환경과 달리 .env 파일 등을 사용해 중요한 정보(예: DB 연결 문자열)를 숨겨주세요. 2. 여러 배포 플랫폼에서 제공하는 CI/CD 기능을 사용하면 코드 변경 사항이 자동으로 반영될 수 있게 설정 가능합니다. 3. https 등 SSL 인증 관련해서 약간의 복잡성이 있을 수 있습니다. 이 모든 절차를 거친 후에도 문제가 발생한다면, 해당 배포 플랫폼의 로그를 확인하고 오류 메세지를 해결해가는 방식으로 진행하세요.

목록으로

지금 가입하면 모든 질문의 답변을 볼 수 있어요!