[웹개발] 프론트엔드, 백엔드, 데이터베이스... 어떻게 배포하지?

프론트엔드, 백엔드, 데이터베이스...개발 열풍이 불면서 많은 사람들이 이 단어를 알게 되었지만,
정작 어떤 식으로 작동하는지, 어떻게 배포되는지 잘 모르죠...!!

오늘은 어떻게 배포되는지에 대해서 같이 알아보겠습니다!!

이 글은 ChatGPT의 도움을 받아 작성되었습니다.

개발 완료 후 빌드:
- HTML, CSS, JavaScript로 브라우저에서 실행 가능한 정적 파일로 변환.
- 예: npm run build 명령어 실행.
- 쉽게 말해서, 개발된 코드를 배포하기 위한 파일로 변환하는 과정입니다.
호스팅 서버에 업로드:
- 정적 파일을 배포 가능한 서버나 서비스에 업로드.
- 예: 호스팅 플랫폼(Vercel, Netlify) 또는 전용 서버(S3 등).
- 쉽게 말해서, 배포하기 위한 변환한 코드 파일을 누구나 볼 수 있도록 서버에 올리는 것을 말합니다.
도메인 연결:
- 사용자가 접근할 수 있는 주소(URL)을 설정.
- 예: www.mywebsite.com.
- 해당 URL로 접근하면, 서버에 올렸던 파일을 통해 사용자가 웹 페이지 화면을 볼 수 있게 됩니다.

서버 코드 준비:
- Node.js, Python 등으로 작성된 서버 코드를 준비.
- API로 클라이언트(프론트엔드) 요청 처리.
서버 실행 환경에 배포:
- 서버가 작동할 환경에 코드 업로드.
- 예: VPS, 클라우드 서버 (AWS EC2, Heroku 등).
- 준비한 코드를 실행 환경에 올려서 서버를 작동시킵니다.
도메인 연결:
- 백엔드 서버도 별도의 도메인 또는 IP로 접근 가능.
- 예: api.mywebsite.com.
- 프론트엔드에서 백엔드에 요청을 보내려면, 요청을 어디에 보내야 하는지 알아야겠죠?
  해당 도메인 또는 IP를 통해 백엔드에 요청을 보낼 수 있습니다.

DB 준비:
- 필요한 데이터베이스(MySQL, MongoDB 등) 생성.
- 예: 로컬에서 설정하거나 클라우드(DBaaS) 이용.
백엔드와 연결:
- 백엔드 서버에서 DB 접속 정보를 설정.
- 예: DB 호스트, 포트, 계정정보 입력.
- 프론트엔드에서 백엔드 도메인을 통해 요청을 보내는 것처럼,
  백엔드 서버도 데이터베이스에 접근할 수 있는 정보가 필요합니다.
데이터 처리:
- 클라이언트 요청이 백엔드를 통해 DB에 전달되고 결과 반환.
- 예를 들어 프론트엔드에서 어떤 정보를 백엔드에 요청하면, 백엔드 서버에서 DB에게 해당 데이터를 달라고 요청합니다.
  DB가 해당 데이터를 주면, 백엔드는 그 데이터를 받아서 프론트에게 줄 수 있게 됩니다.

사용자 요청 흐름:
- 사용자가 웹사이트(프론트엔드)에 접속 → API를 통해 서버(백엔드)에 요청 → 백엔드가 DB에 데이터 요청 → 결과 반환.
결과 전달:
- 백엔드에서 데이터를 처리한 후 프론트엔드로 전달.
- 사용자에게 화면에 보여줌.

ChatGPT를 통해 간단하게 정리했습니다.

위 방식은 프론트엔드와 백엔드를 각각 배포하는 경우입니다.(같이 배포할 수도 있습니다!)

다음에는 실제 배포 방식 및 과정에 대해서 공부해보겠습니다.

저도 배워나가는 과정입니다. 부족하지만 이 글을 읽으시는 분께 도움이 되었으면 좋겠습니다.

문제 제기나 질문도 환영합니다.

nest