제목
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
프론트엔드 개발자, Vue 3, Svelte 5, Angular 프레임워크 사용자
난이도: 중급 (구성 파일 수정 및 배포 프로세스 이해 필요)
핵심 요약
- Vue 3:
vite.config.ts
에base
속성 추가 및npm run build:dev
실행 후gh-pages
브랜치 배포 - Svelte 5:
@sveltejs/adapter-static
설치 및svelte.config.ts
에paths.base
설정 후npm run build
실행 - Angular 19:
ng add angular-cli-ghpages
명령어로 배포 설정 후ng deploy
실행
섹션별 세부 요약
1. Vue 3 배포 프로세스
vite.config.ts
에base
속성 추가:process.env.NODE_ENV === 'development' ? '' : '/fundamental-vue3/'
package.json
에build:dev
스크립트 추가:NODE_ENV=development vite build
dist
폴더의 파일을gh-pages
브랜치 루트에 복사 후.nojekyll
파일 생성index.html
을404.html
로 이름 변경
2. Svelte 5 배포 프로세스
@sveltejs/adapter-static
설치:npm i --save-exact @sveltejs/adapter-static
svelte.config.ts
에adapter
및paths.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.json
에deploy
속성 추가:"builder": "angular-cli-ghpages:deploy"
ng deploy
명령어로 자동 배포 실행
결론
- 각 프레임워크별로
base
경로 설정 및gh-pages
브랜치 배포가 핵심이며,.nojekyll
파일 생성과index.html
의404.html
로의 이름 변경이 필수입니다. 예시 명령어:npm run build:dev
(Vue),npm run build
(Svelte),ng deploy
(Angular).*