알쓸전컴(알아두면 쓸모있는 전자 컴퓨터)
Apache2 Vue3(Vite) 배포 본문
Apache2 Vue3(Vite) 배포
해당 과정은 Apache2 에 Vue3 프로젝트를 여러개 배포 한다는 과정에 작성 되어 있습니다.
응용하면 1개 배포는 쉽습니다.
Vue3 프로젝트
vite.config.ts
export default defineConfig({
plugins: [
vue()
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
base: "/waferMap/",
})저의 경우 base 를 "/waferMap" 으로 하여
접속 Url
- http://배포주소:포트/waferMap
으로 설정 하도록 했습니다.
Public 폴더안 img 참조 변경
저의 Vue Project 폴더 구조 안 Public 내 파일 입니다.
index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8"/>
<link rel="icon" href="./logo.png"/>
<link href="https://fonts.googleapis.com/css2?family=Fredoka+One&family=Lato:wght@700&family=Noto+Sans+KR&display=swap"
rel="stylesheet"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Wafer Map</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html><link rel="icon" href="./logo.png"/> 을 ./logo.png 로 ./을 붙혀서 상대 경로로 바꾸어야 제대로 설정 됩니다.
main.ts
export function baseUrl(){
return import.meta.env.BASE_URL
}main.ts 소스 내용중 위에 funtion을 저는 export 해주었습니다. 이유는 추후 설정할 .vue 에서 img 주소 설정 때문 입니다.
<template>
<div style="display: flex">
<nav style="width: 142px;min-width: 142px;height: 100vh; position: relative">
<div style="position: absolute;top: 102px;left: 45px">
<img :src="`${baseUrl()}logo.png`">
</div>
</div>
</template>
<script setup lang="ts">
import {baseUrl} from "@/main";
</script>
<style scoped>
</style>위와 같이
import {baseUrl} from "@/main";
을 가져 와서
<img :src="`${baseUrl()}logo.png`">
와 같이 public 폴더내 주소를 설정 해야 합니다. 그래야 추후 배포시 경로가 잘못 설정 되는 것을 막을수 있습니다.
apache2 설정
/etc/apache2/apache2.conf
<Directory /var/www/>
Options Indexes FollowSymLinks
AllowOverride All
Require all granted
</Directory>기본 설정으로 AllowOverride None 으로 되어 있습니다 AllowOverride All 로 변경해 주세요.
이 설정을 하는 이유는 경로 접속후 경로를 찾지 못하면 .htaccess 파일의 내용을 참조해 경로를 이동한다는 내용입니다.
아래 명령어를 통해 폴더를 생성해 줍니다.
sudo mkdir /var/www/html/waferMap
그리고 Vue에서 build 한 dist 폴더내 파일을 업로드 해주세요.
위와 같은 상대가 됩니다.
터미널의 현재 경로를 변경 해주세요.
cd /var/www/html/waferMap
.htaccess 파일을 만들어 줍니다.
sudo nano .htaccess
/var/www/html/waferMap/.htaccess
<IfModule mod_negotiation.c>
Options -MultiViews
</IfModule>
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /waferMap/
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /waferMap/index.html [L]
</IfModule>
위와 같이
RewriteBase /waferMap/
RewriteRule . /waferMap/index.html [L]
이 /waferMap/ 2개 부분만 자신의 환경에 맞춰 설정 하면 됩니다. 저는 경로를 waferMap 으로 했으니
waferMap 으로 설정 했습니다.
만약 waferMap 같은 추가 경로를 가지고 있지 않다면 아래와 같이 설정 하면 됩니다.
<IfModule mod_negotiation.c>
Options -MultiViews
</IfModule>
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>참조:https://router.vuejs.org/guide/essentials/history-mode.html#apache
apache 실행
1. sudo a2enmod rewrite 꼭 실행 시켜 줍니다. 그렇지 아니하면 .htaccess 적용이 되지 않습니다.
2. sudo service apache2 restart 재 실행을 시켜 줍니다.
그럼 Apache2에 Vue가 배포 되었음을 확인 할수 있습니다.
'Web > Vue js tip' 카테고리의 다른 글
| vue histroy mode tomcat 적용하기 (2번 방법) (0) | 2020.10.24 |
|---|---|
| vue histroy mode tomcat 적용하기 (1번 방법) (0) | 2020.10.23 |
| [vuejs] router webpage 다운 로드 부분 최적화 (0) | 2019.08.02 |
| vuex + typescript 사용 하기 (0) | 2019.07.29 |
| vue-cli-service serve Building 중 Hang (멈춤) 걸릴때 (0) | 2019.04.29 |
