I. 목표
VUE.JS를 활용하여 웹사이트를 개발하기 위하여 기본적인 환경설정을 해본다.
II. 개발및 연구내용
1. 빌드
npm run build 명령으로 vue.js 빌드를 하면 현 프로젝트의 경우 target\classes\static 폴더에 빌드된 파일이 생성되도록 구성되어 있다.
2. 생성된 폴더를 Apache 서버에 복사한다.
3. Apache 환경설정
우분투 서버의 /etc/apache2/site-available 로 이동하여 conf파일을 아래와 같이 작성한다.
| <VirtualHost *:80>
ServerAdmin admin@moramcnt.com DocumentRoot /home/cinema/Service/CinemaWebSolution/cinema-backend-web DirectoryIndex index.htm index.html index.jsp index.do ServerName odc.mbizok.com <Directory /home/cinema/Service/CinemaWebSolution/cinema-backend-web> Options FollowSymLinks AllowOverride All Require all granted </Directory> LogLevel warn ErrorLog /var/log/apache2/error-odc.mbizok.com.log CustomLog /var/log/apache2/access-odc.mbizok.com.log combined </VirtualHost> |
4. .htaccess 파일작성
빌드된 vue.js 파일을 복사할 web root로 이동하여 작성
| <IfModule mod_rewrite.c>
RewriteEngine On RewriteBase / RewriteRule ^index\.html$ – [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /404.html [L] </IfModule> |
III. 결론
Vue.js는 기본적으로 Javascript 한페이지로 구성되다보니, Rewrite모듈이 필요했고, 잘 동작하는것을 확인하였다.