Vercel 및 Heroku를 사용하여 첫 번째 풀스택 애플리케이션 배포

풀 스택 애플리케이션을 배포하는 것은 부담스러울 수 있으며, 특히 프로세스를 처음 접하는 경우라면 더욱 그렇습니다. 그러나 Vercel 및 Heroku와 같은 플랫폼을 사용하면 프런트엔드와 백엔드를 독립적으로 간단하게 배포하고 관리할 수 있습니다. 이 가이드는 프런트엔드가 Vercel에 호스팅되고 백엔드가 Heroku에 호스팅되는 기본 풀스택 애플리케이션 배포 과정을 안내합니다.

왜 Vercel과 Heroku를 사용하나요?

버전:

• Next.js, React, Angular와 같은 프런트엔드 프레임워크에 최적화되었습니다.
• Git 통합을 통해 원활하고 지속적인 배포를 제공합니다.
• 더 빠른 성능을 위해 글로벌 에지 캐싱을 제공합니다.

헤로쿠:

• 백엔드 서비스 및 API 배포를 위한 다목적 플랫폼입니다.
• 환경 변수 및 데이터베이스 통합으로 설정이 쉽습니다.
• 초보자를 위한 무료 등급 옵션으로 확장성이 뛰어납니다.

전제조건
시작하기 전에 다음 사항을 확인하세요.

1. Git 설치 및 버전 관리에 대한 기본적인 이해
2. 프런트엔드 프로젝트(React, Next.js 등)와 백엔드 프로젝트(Node.js, Express 등)
3. Vercel과 Heroku의 계정
4. Node.js와 npm이 로컬 컴퓨터에 설치되어 있습니다.

1단계: 프런트엔드 코드 준비

1.1 프런트엔드 저장소 초기화
아직 푸시하지 않았다면 프런트엔드 프로젝트를 Git 저장소(GitHub, GitLab 등)에 푸시하세요.

git init  
git add .  
git commit -m "Initial commit"  
git remote add origin <your-repo-url>  
git push -u origin main  

1.2 배포를 위한 프런트엔드 최적화
프런트엔드 프로젝트가 프로덕션 준비가 되었는지 확인하세요.

• Next.js 또는 React와 같은 프레임워크에 대해 npm run build를 실행하여 최적화된 프로덕션 빌드를 생성하세요.
• 환경 변수(예: API URL)가 .env.local에 설정되거나 Vercel 대시보드에서 직접 설정되었는지 확인하세요.

2단계: Vercel에 프런트엔드 배포

2.1 Vercel에 연결

• Vercel에 로그인하세요.
• "새 프로젝트"를 클릭하고 Git 저장소를 가져옵니다.

2.2 배포 설정 구성

• 올바른 프레임워크 사전 설정(예: Next.js, React)을 선택하세요.
• 필요한 환경 변수(예: REACT_APP_API_URL)를 추가합니다.

2.3 프런트엔드 배포
"배포"를 클릭하면 나머지는 Vercel이 처리합니다!

• 배포 후에는 프런트엔드의 실시간 URL을 받게 됩니다.
• 예: https://your-project.vercel.app.

3단계: 백엔드 코드 준비

3.1 백엔드 저장소 초기화
백엔드 프로젝트를 별도의 Git 저장소에 푸시하세요.

git init  
git add .  
git commit -m "Initial commit"  
git remote add origin <your-repo-url>  
git push -u origin main  

3.2 프로필 파일 추가
Heroku는 Procfile을 사용하여 애플리케이션 실행 방법을 정의합니다. 프로젝트 루트에 Procfile을 생성하세요:

git init  
git add .  
git commit -m "Initial commit"  
git remote add origin <your-repo-url>  
git push -u origin main  

index.js를 진입점 파일로 바꾸세요.

3.3 환경변수 설정
모든 필수 환경 변수(예: 데이터베이스 URL, API 키)가 .env에 저장되어 있는지 확인하세요. Heroku를 사용하면 나중에 대시보드에서 이를 구성할 수 있습니다.

4단계: Heroku에 백엔드 배포

4.1 Heroku 앱 만들기

1. Heroku에 로그인하세요.
2. '새로 만들기' → '새 앱 만들기'를 클릭하세요.
3. 앱의 고유한 이름과 지역을 선택하세요.

4.2 백엔드 배포

1. 배포 탭으로 이동하세요.
2. GitHub 저장소를 연결하세요.
3. 자동 배포를 활성화하거나 Branch 배포를 클릭하여 수동으로 배포하세요.

4.3 환경 변수 구성
설정 탭에서 환경 변수를 추가하세요.

• 예: DATABASE_URL, SECRET_KEY.

5단계: 프런트엔드를 백엔드에 연결
Heroku 백엔드를 가리키도록 프런트엔드 프로젝트를 업데이트하세요.

• 백엔드 URL을 환경 변수로 설정:z

web: node index.js  

• 프런트엔드 코드에서 하드코딩된 API URL을 process.env.REACT_APP_API_URL로 바꿉니다.

REACT_APP_API_URL=https://your-backend-app.herokuapp.com  

6단계: 테스트 및 디버그

1. Vercel의 프런트엔드 URL을 방문하여 API 호출을 포함한 모든 기능이 작동하는지 확인하세요.
2. Heroku의 로그를 사용하여 백엔드 문제를 디버깅합니다.

const response = await fetch(`${process.env.REACT_APP_API_URL}/api/endpoint`); 

1. 배포 관련 문제가 있는지 Vercel의 빌드 로그를 모니터링하세요.

모범 사례

1. 버전 관리: 개발에는 Git 브랜치를 사용하고 테스트 후에만 변경 사항을 병합하세요.
2. 오류 처리: 디버깅에 도움이 되도록 백엔드에 적절한 오류 응답을 구현하세요.
3. HTTPS: Vercel과 Heroku URL 모두 보안 통신을 위해 HTTPS를 사용하는지 확인하세요.
4. CORS: 프런트엔드 URL의 요청을 허용하도록 백엔드에서 CORS 정책을 구성합니다.

결론
Vercel 및 Heroku를 사용하여 전체 스택 애플리케이션을 배포하는 것은 간단하고 초보자에게 친숙합니다. Vercel이 프런트엔드를 담당하고 Heroku가 백엔드를 담당하므로 인프라에 대한 걱정보다는 기능 구축에 집중할 수 있습니다.

지금 배포를 시작하고 프로젝트에 생기를 불어넣으세요! ?

위 내용은 Vercel 및 Heroku를 사용하여 첫 번째 풀스택 애플리케이션 배포의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!