전체 웹사이트 구축 프로세스 정리

1. 웹사이트 개발 준비

1-1. 프론트엔드 (Frontend)

• 역할: 사용자에게 보여지는 UI/UX를 구현하는 부분입니다. 웹사이트의 화면과 동작 방식을 결정합니다.
• 주요 기술:
  • React: 현대적인 UI를 구축하기 위한 JavaScript 라이브러리.
  • HTML/CSS/JavaScript: 웹사이트 구조와 스타일, 인터랙션을 담당.
• 효율적인 구성 방법:
  • 컴포넌트 기반 설계: 재사용 가능한 UI 컴포넌트로 웹사이트를 구성.
  • 상태 관리: Redux나 Context API로 전역 상태 관리.
  • 반응형 웹 디자인: CSS 미디어 쿼리를 활용해 다양한 화면 크기에 대응.

1-2. 백엔드 (Backend)

• 역할: 서버에서 비즈니스 로직을 처리하고 데이터베이스와 통신하며, 프론트엔드에 필요한 데이터를 제공합니다.
• 주요 기술:
  • Node.js: 비동기 처리로 빠르고 확장 가능한 서버 환경 제공.
  • Express.js: Node.js 기반 웹 애플리케이션 프레임워크로, API 구축에 적합.
• 효율적인 구성 방법:
  • RESTful API 설계: 클라이언트와의 데이터 교환을 위한 효율적인 API 설계.
  • 비동기 처리: 데이터베이스 호출 등 시간이 걸리는 작업은 비동기적으로 처리해 서버 응답 속도 향상.

2. 데이터베이스 설정 및 연결

2-1. 데이터베이스 (Database)

• 역할: 사용자 정보, 제품 데이터 등의 정보를 저장하고 관리.
• 주요 기술:
  • AWS RDS: MySQL 또는 PostgreSQL을 관리하기 위한 AWS 서비스.
  • DynamoDB: 대용량 데이터를 처리할 수 있는 NoSQL 데이터베이스.
• 효율적인 구성 방법:
  • 정규화된 데이터베이스 설계: 데이터 중복을 최소화하고 관리 효율성을 높입니다.
  • 캐싱: 자주 조회되는 데이터는 Redis로 캐시하여 데이터베이스 부하 감소.

2-2. 데이터베이스 설정

• AWS RDS 인스턴스 생성: MySQL 등 선택 후 인스턴스 생성.
• 보안 그룹 설정: RDS에 접근할 수 있는 IP를 제한하고 포트(3306) 설정.
• 백엔드와 연동: Node.js에서 mysql2 등의 라이브러리를 통해 RDS에 연결.

3. 웹사이트 보안 설정

3-1. 보안 (Security)

• 역할: 웹사이트와 데이터를 안전하게 보호. 해킹, DDoS 공격 방어.
• 주요 기술:
  • AWS WAF: 웹 애플리케이션 방화벽으로 SQL 삽입, XSS 공격 차단.
  • AWS Shield: DDoS 공격 방어.
  • IAM: AWS 서비스의 접근 권한을 관리.
• 효율적인 구성 방법:
  • IAM 권한 최소화: 필요한 권한만 부여해 보안 강화.
  • SSL/TLS 설정: HTTPS 통신을 위해 AWS Certificate Manager를 통해 SSL 인증서 발급.

4. 배포 단계

4-1. 정적 vs 동적 웹 호스팅

• 정적 웹 호스팅: HTML, CSS, JS 등 변하지 않는 파일을 제공.
  • AWS S3: 정적 웹 파일을 업로드하고 호스팅.
  • CloudFront: 글로벌 CDN을 통해 빠른 전달.
• 동적 웹 호스팅: 사용자 요청에 따라 데이터가 변경되는 동적 웹사이트.
  • AWS EC2: 서버에서 백엔드 코드 실행.
  • AWS Lambda: 서버리스 방식으로 필요할 때만 코드 실행.
  • AWS RDS: 데이터베이스와 연동하여 동적인 데이터를 처리.

순서 요약:

1. S3에 프론트엔드 파일 업로드 → CloudFront로 배포
2. EC2에 백엔드 코드 배포 → RDS와 연동

5. 도메인 연결 및 HTTPS 설정

• AWS Route 53: 구입한 도메인(blahblah.com) 설정.
• CloudFront와 연동: 도메인과 CloudFront 연결.
• SSL 인증서 발급: AWS Certificate Manager로 SSL 인증서를 발급받아 HTTPS 설정.

6. CI/CD 및 배포 자동화

6-1. CI/CD 설정

• GitHub Actions: 코드 푸시 시 자동으로 배포.
• AWS CodePipeline: 자동 빌드, 테스트, 배포 파이프라인 구축.

효율적인 구성 방법:

• 코드 변경 시마다 자동으로 배포되어 개발 효율성 증가.

7. 유지보수 및 모니터링

• AWS CloudWatch: 서버 상태와 애플리케이션 로그를 실시간 모니터링.
• 자동화된 테스트: Jest, Cypress를 활용하여 변경 사항에 대한 테스트 자동화.
• 비용 모니터링: AWS 비용 관리 도구로 리소스 사용 및 비용 모니터링.

종합 정리

단계설명 및 주요 기술

1. 웹사이트 개발 준비	React, HTML/CSS, Node.js, Express로 프론트/백엔드 개발
2. 데이터베이스 설정 및 연결	AWS RDS 또는 DynamoDB를 사용해 데이터베이스 구성
3. 보안 설정	AWS WAF, Shield, IAM, SSL 인증서로 보안 강화
4. 웹 호스팅	S3/CloudFront(정적) + EC2/RDS(동적) 배포
5. 도메인 연결 및 HTTPS	Route 53, Certificate Manager를 통해 도메인과 HTTPS 설정
6. CI/CD 및 배포 자동화	GitHub Actions, CodePipeline을 활용한 자동 배포
7. 유지보수 및 모니터링	CloudWatch, 테스트 자동화, 비용 관리

💡 최종 마무리

• 정적 호스팅은 S3를 통해, 동적 호스팅은 EC2를 통해 구성하고, Route 53과 CloudFront를 이용하여 전 세계 사용자에게 빠르고 안전한 웹사이트를 제공
• CI/CD 파이프라인을 통해 자동 배포를 설정하고, CloudWatch로 실시간 모니터링하며 웹사이트를 유지보수.