React와 Node.js 방명록 개발(10): 배포 및 최종 점검

강의 10: 배포 및 최종 점검

내용 요약 및 학습 목표

1. GitHub에 소스코드 푸시 및 관리
   • GitHub 리포지토리 생성, 소스코드 커밋 및 푸시 방법
   • Git Branch 및 버전 관리 기초
2. 배포 준비
   • 서버와 클라이언트 코드 최적화
   • 환경 변수 설정 및 보안 체크
   • 불필요한 코드와 콘솔 로그 제거
3. Node.js 서버를 클라우드에 배포하기
   • Heroku, Vercel, AWS를 통한 배포 방법 이해
   • Heroku와 Vercel에 배포하는 단계별 가이드
   • 배포 후 최종 점검 및 앱 상태 확인

실습 세부 내용

1. GitHub에 소스코드 푸시 및 관리

• GitHub 리포지토리 생성 및 초기 설정
  • GitHub에 새로운 리포지토리를 생성하고 프로젝트를 연결합니다.
  • Git을 사용해 로컬 프로젝트를 GitHub 리포지토리에 푸시합니다.

bash

코드 복사

# 프로젝트 루트에서 Git 초기화 git init # GitHub 리포지토리 추가 git remote add origin https://github.com/username/repository.git # 코드 커밋 및 푸시 git add . git commit -m "Initial commit" git push -u origin main

2. 배포 준비

1. 코드 최적화
   • 서버와 클라이언트의 불필요한 코드를 제거하고, 로깅을 줄여 최적화합니다.
   • 환경 변수 파일(.env)을 설정해 보안성을 강화합니다.
2. React 코드 빌드
   • npm run build 명령어로 React 프로젝트를 빌드하고 최적화된 버전을 생성합니다.

bash

코드 복사

# React 프로젝트 최종 빌드 cd client npm run build

3. Node.js 서버를 Heroku, Vercel, 또는 AWS에 배포하기

1. Heroku에 배포하기
   • Heroku CLI 설치 및 로그인 후, 프로젝트를 Heroku에 푸시해 배포합니다.

bash

코드 복사

# Heroku CLI 설치 curl https://cli-assets.heroku.com/install.sh | sh # Heroku 로그인 및 애플리케이션 생성 heroku login heroku create my-guestbook-app # Heroku에 소스코드 푸시 git push heroku main

1. Vercel에 배포하기
   • Vercel CLI를 사용해 프로젝트를 쉽게 배포합니다. 특히 정적 프론트엔드 애플리케이션 배포에 적합합니다.

bash

코드 복사

# Vercel CLI 설치 npm i -g vercel # Vercel 배포 시작 vercel

1. AWS에 배포하기
   • EC2 인스턴스를 설정하고 애플리케이션을 배포합니다. 이 방법은 서버와의 커스터마이징이 필요할 때 유용합니다.

bash

코드 복사

# 예시: AWS EC2 인스턴스 설정 및 SSH 접속 ssh -i "your-key.pem" ec2-user@your-ec2-ip # Node.js 애플리케이션 실행 npm install node server.js

4. 최종 점검 및 실습 프로젝트 완성

1. 앱 작동 확인: 배포된 URL에 접속해 방명록 기능이 정상적으로 작동하는지 테스트합니다.
2. 성능 확인 및 버그 수정: Chrome DevTools, Lighthouse 등을 사용해 성능을 점검하고, 필요한 부분을 수정합니다.
3. 유지보수 팁: 배포 후 코드 업데이트와 관리를 위한 팁을 공유합니다.

태그 10개

1. #GitHub푸시
2. #Heroku배포
3. #Vercel배포
4. #AWS배포
5. #Node서버배포
6. #React프로젝트배포
7. #코드최적화
8. #프로젝트점검
9. #배포준비
10. #웹애플리케이션완성