> ## Documentation Index
> Fetch the complete documentation index at: https://docs.ale.run/llms.txt
> Use this file to discover all available pages before exploring further.

# Vue

> Vue 애플리케이션 배포 가이드입니다.

***

## 준비 및 확인사항

<AccordionGroup>
  <Accordion title="지원 Node.js 버전" defaultOpen={true}>
    * **8, 10, 12, 14, 16, 18, 20**
  </Accordion>
</AccordionGroup>

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

## 템플릿과 저장소 선택

<Frame>
  <img className="block rounded-md" src="https://files.cloudtype.io/ale-docs/developers/images/react_02.png" />
</Frame>

> 대시보드의 <Icon icon="circle-plus" iconType="solid" size={15} color="2396F1" /> 또는 `⌘ + K` 로 생성되는 배포창에서 **Web application** 템플릿을 선택하고, 이어지는 드롭다운 메뉴에서 연동된 GitHub 계정의 저장소를 선택하거나 [Git URL 탭에서 Git 저장소 URL을 입력하세요.](/developers/private-repo)

## 배포 설정값 입력

> 다음의 각 항목에 서비스를 배포하기 위한 설정값을 입력하세요.

<AccordionGroup>
  <Accordion title="기본 항목">
    * **Build Variables**: Vue 프로젝트 빌드 시 포함되어야 하는 변수
    * **Docbase**: 빌드 산출물 대상 디렉터리
    * [Rewrites: 프록시를 위한 경로 및 URL](/developers/reverseproxy)
    * **Node.js 버전**
    * **Build Command**: Vue 프로젝트 빌드 명령어
    * **Single Page Application**: 싱글 페이지 앱 여부
    * [Health Check](/developers/zero-downtime-deployment): 컨테이너 상태 검증 엔드포인트
  </Accordion>

  <Accordion title="더 많은 옵션">
    * **Install command**: 컨테이너 이미지 빌드 시 포함되어야 하는 변수
    * **.npmrc**: npm 패키지 레지스트리 경로, 프록시 등 설정
    * **Index page**: index 페이지 파일명
  </Accordion>
</AccordionGroup>

<Tip>
  `ale`은 별도의 Nginx 서버 세팅없이, 배포설정 시 Rewrites 필드값 입력을 통해, 리버스 프록시가 작동하도록 하는 기능을 지원합니다. 자세한 내용은 [Reverse Proxy 페이지](/developers/reverseproxy)를 참고하세요.
</Tip>

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

<Frame>
  <img className="block rounded-md" src="https://files.cloudtype.io/ale-docs/developers/images/08_04.png" />
</Frame>

* **리소스 유형** : [온디맨드 리소스와 스팟 리소스](/ko/developers/resource#on-demand-spot) 중 선택

* **CPU** : 서비스가 사용할 수 있는 vCPU 리소스의 최대값으로, '최소' 선택 시 0.1 vCPU로 설정됩니다.

* **메모리** : 서비스가 사용할 수 있는 메모리 리소스의 최대값

* [동시실행(레플리카)](/ko/developers/replica) : 설정한 수만큼 서비스가 수평확장되어 부하 분산 및 안정성 확보

* **배포** : `배포하기` 클릭

<Info>
  배포가 완료되면 프리뷰 도메인을 통해 브라우저로 웹 페이지를 조회하거나 API 툴을 사용해 요청을 보낼 수 있습니다.
</Info>

<Tip>
  리소스 제한으로 배포할 수 없는 경우 [스페이스 및 리소스 관리 페이지](/ko/operations/spaces#%EB%A6%AC%EC%86%8C%EC%8A%A4-%EB%B6%80%EC%97%AC%ED%95%98%EA%B8%B0)를 참고해 스페이스에 리소스를 추가하세요.
</Tip>

***

[Vue Docs](https://ko.reactjs.org/docs/getting-started.html)