Vue 페이지에서는 Web Application 템플릿으로 Vue 애플리케이션을 배포하고, 빌드 산출물 경로와 리버스 프록시 설정을 입력하는 방법을 안내합니다.

배포 설정 참고사항

프로젝트 설정 파일(package.json, .nvmrc 등)에 명시된 Node.js 버전과 배포 설정 시 선택한 버전이 일치하지 않으면 빌드 및 런타임 오류가 발생할 수 있습니다.

​
템플릿과 저장소 선택

대시보드의 또는 ⌘ + K 로 생성되는 배포 창에서 Web application 템플릿을 선택하고, 이어지는 드롭다운 메뉴에서 연동된 GitHub 계정의 저장소를 선택하거나 Git URL 탭에서 Git 저장소 URL을 입력하세요.

​
배포 설정값 입력

다음의 각 항목에 서비스를 배포하기 위한 설정값을 입력하세요.
  • Build Variables: Vue 프로젝트 빌드 시 포함되어야 하는 변수
  • Docbase: 빌드 산출물 대상 디렉터리
  • 리버스 프록시
  • Node.js 버전
  • Build Command: Vue 프로젝트 빌드 명령어
  • Single Page Application: 싱글 페이지 앱 여부
  • 무중단 배포: 컨테이너 상태 검증 엔드포인트
  • Install command: 컨테이너 이미지 빌드 시 포함되어야 하는 변수
  • .npmrc: npm 패키지 레지스트리 경로, 프록시 등 설정
  • Index page: index 페이지 파일명
Porter AI는 별도의 Nginx 서버 세팅없이, 배포설정 시 Rewrites 필드값 입력을 통해, 리버스 프록시가 작동하도록 하는 기능을 지원합니다. 자세한 내용은 리버스 프록시를 참고하세요.

​
성능(리소스) 설정 및 배포

  • 리소스 유형 : 온디맨드 리소스와 스팟 리소스 중 선택
  • CPU : 서비스가 사용할 수 있는 vCPU 리소스의 최대값으로, ‘최소’ 선택 시 0.1 vCPU로 설정됩니다.
  • 메모리 : 서비스가 사용할 수 있는 메모리 리소스의 최대값
  • 동시실행(레플리카) : 설정한 수만큼 서비스가 수평확장되어 부하 분산 및 안정성 확보
  • 배포 : 배포하기 클릭
배포가 완료되면 프리뷰 도메인을 통해 브라우저로 웹 페이지를 조회하거나 API 툴을 사용해 요청을 보낼 수 있습니다.
리소스 제한으로 배포할 수 없는 경우 스페이스와 리소스 관리를 참고해 스페이스에 리소스를 추가하세요.
Vue Docs