Cara Routing Aplikasi Vue.js melalui Nginx

Tujuan

• Akses file aplikasi Vue.Js melalui Nginx
• Yang akan diakses adalah hasil build projek Vue.Js dist/

Langkah-langkah

• Buat file konfigurasi nginx

vi /etc/nginx/sites-available/lukmanlab-vue.id

• Isi file tersebut dengan script berikut:

server {
  listen 80;
  root /var/www/lukmanlab-vue.id/dist;

  index index.html;

  server_name app.lukmanlab-vue.id;

  location / {
    try_files $uri $uri/ /index.html;
  }

  access_log /var/log/nginx/lukmanlab-vue.log;
  error_log /var/log/nginx/lukmanlab-vue.error.log;

  location ~ /\.env {
    deny all;
  }

  location ~ /\.git {
    deny all;
  }
}

• Enable file konfigurasi tersebut

cd /etc/nginx/sites-enabled/

ln -s /etc/nginx/sites-available/lukmanlab-vue.id .

• Test file konfigurasi nginx

nginx -t

Expected Output:

  nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
  nginx: configuration file /etc/nginx/nginx.conf test is successful

• Reload nginx

systemctl reload nginx