AI Store에서 AI코딩으로 만들어진 앱을 만나보세요!
지금 바로 방문하기

제목

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

프론트엔드 개발자, Vue 3, Svelte 5, Angular 프레임워크 사용자

난이도: 중급 (구성 파일 수정 및 배포 프로세스 이해 필요)

핵심 요약

  • Vue 3: vite.config.tsbase 속성 추가 및 npm run build:dev 실행 후 gh-pages 브랜치 배포
  • Svelte 5: @sveltejs/adapter-static 설치 및 svelte.config.tspaths.base 설정 후 npm run build 실행
  • Angular 19: ng add angular-cli-ghpages 명령어로 배포 설정 후 ng deploy 실행

섹션별 세부 요약

1. Vue 3 배포 프로세스

  • vite.config.tsbase 속성 추가: process.env.NODE_ENV === 'development' ? '' : '/fundamental-vue3/'
  • package.jsonbuild:dev 스크립트 추가: NODE_ENV=development vite build
  • dist 폴더의 파일을 gh-pages 브랜치 루트에 복사 후 .nojekyll 파일 생성
  • index.html404.html로 이름 변경

2. Svelte 5 배포 프로세스

  • @sveltejs/adapter-static 설치: npm i --save-exact @sveltejs/adapter-static
  • svelte.config.tsadapterpaths.base 설정: base: process.env.NODE_ENV === 'development' ? '' : '/fundamental_svelte'
  • npm run build 실행 후 dist 폴더 파일을 gh-pages 브랜치에 복사

3. Angular 19 배포 프로세스

  • angular-cli-ghpages 스키마틱 설치: ng add angular-cli-ghpages
  • angular.jsondeploy 속성 추가: "builder": "angular-cli-ghpages:deploy"
  • ng deploy 명령어로 자동 배포 실행

결론

  • 각 프레임워크별로 base 경로 설정 및 gh-pages 브랜치 배포가 핵심이며, .nojekyll 파일 생성과 index.html404.html로의 이름 변경이 필수입니다. 예시 명령어: npm run build:dev (Vue), npm run build (Svelte), ng deploy (Angular).*