vite 빌드 후, 정적 배포 하기
HTML 2025. 3. 27. 23:29vite로 바닐라 js 프로젝트를 구성하고 이를 빌드한 후, 정적 배포를 해본다.
서버는 아파치 서버를 사용하고, 도메인은 codestack.blog이다.
그리고 서브 디렉터리로 falling-snow-effect를 사용하고 codestack.blog/falling-snow-effect에 정적 배포를 하려 한다.
이를 위해서는 아파치 정적 파일 기본 경로인 /var/www/html에 /falling-snow-effect 디렉터리를 구성하고 해당 디렉터리에 빌드한 파일을 업로드한다.
vite 빌드를 하기 전에 경로의 prefix를 지정하기 위해서는 vite.config.js에 base 속성에 prefix 경로를 지정한다.
export default {
base: "/falling-snow-effect/",
};
prefix가 없으면 아래와 같이 빌드가 되며,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
<script type="module" crossorigin src="/assets/index-BEcL3pXR.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-VINtWaTU.css">
</head>
<body>
<div id="app"></div>
</body>
</html>
이럴 경우, codestack.blog/falling-snow-effect 로 접근 시, 파일을 찾을 수 없는 404 오류가 발생한다.
아파치 설정은 아래와 같이 따른다.
<VirtualHost *:80>
ServerName codestack.blog/falling-snow-effect
ServerAdmin webmaster@localhost
DocumentRoot /var/www/html/falling-snow-effect
ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>
http://codestack.blog/falling-snow-effect/
Vite App
codestack.blog
'HTML' 카테고리의 다른 글
| falling snowflake effect js - 눈송이 배치 (0) | 2025.03.27 |
|---|---|
| falling snowflake effect js - 프로젝트 폴더 구성 및 기본 코드 (0) | 2025.03.25 |
| css 기본 디자인 패턴 (0) | 2024.11.19 |
