How to config Vue JS on ZTI server (Ubuntu).

This is the document how to config Vue JS after deploying webapp on ZTI dev server.

1. Create and config .htaccess file on the webapp root project folder.

RewriteEngine On RewriteBase / RewriteRule ^index.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /<webapp_path>/index.html [L]

2. Setup new deployment in Jenkins with this template.
http://jenkins.ztidev.com/jenkins/view/KHA.ZealNews/job/Dev._KHA-CMS/configure

3. Config Nginx
$ vi /etc/nginx/conf.d/domain.conf
Add the config to ‘server‘ tag.

location /<webapp_path>{
  proxy_pass http://localhost:81/<webapp_path>;
  proxy_set_header Host $host;
  proxy_set_header X-Real-IP $remote_addr;
  proxy_set_header X-Forworded-For $proxy_add_x_forwarded_for;
  proxy_set_header X-Forworded-Host $server_name;
  proxy_set_header X-Forwarded-Proto $scheme;
}

Check syntax and restart Nginx with command
$ nginx -t
$ systemctl restart nginx

4. Config Apache2
$ vi /etc/apache2/sites-available/000-default.conf

กด i เพื่อ insert
เพิ่ม directory <webapp_path>

<Directory /var/www/html/<webapp_path>>
	Options Indexes FollowSymLinks MultiViews
	AllowOverride All
</Directory>

กด !wq เพื่อ save

Restart apache2 with command
$ systemctl restart apache2

5. Testing on ztidev.com
https://ztidev.com/<webapp_path>
try to reload web page, it should work fine!

deployment vuejs

Teerakorn Bounoy