Develop a secured frontend web app using Vue.js via PM2

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

const { readFileSync } = require("fs");
module.exports = {
  // ... rest

  devServer: {
    https: {
      key: readFileSync('/etc/letsencrypt/live/dashboard.hainguyen.dev/fullchain.pem'),
      cert: readFileSync('/etc/letsencrypt/live/dashboard.hainguyen.dev/privkey.pem'),
    },
    compress: true,
    port: 8080,

    // 👇️ set this property
    allowedHosts: "all",
  },
};

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

# This server block redirects HTTP traffic to HTTPS at the second server block
server{
     listen       80;
     listen       [::]:80;
     server_name  dashboard.hainguyen.dev;
     return 301   https://$server_name$request_uri;
}

# This server block serves the web app at port 8080
server {
    listen 443 ssl;

    server_name dashboard.hainguyen.dev;

    # SSL
    ssl_certificate /etc/letsencrypt/live/dashboard.hainguyen.dev/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/dashboard.hainguyen.dev/privkey.pem;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_prefer_server_ciphers on;
    ssl_ciphers EECDH+CHACHA20:EECDH+AES128:RSA+AES128:EECDH+AES256:RSA+AES256:EECDH+3DES:RSA+3DES:!MD5;

    # Improve HTTPS performance with session resumption
    ssl_session_cache shared:SSL:50m;
    ssl_session_timeout 1d;

    # DH parameters
    ssl_dhparam /etc/nginx/ssl/dhparam.pem;
    # Enable HSTS
    add_header Strict-Transport-Security "max-age=31536000" always;

    location / {
        proxy_pass https://localhost:8080;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

1

sudo systemctl restart nginx

1
2
3

pm2 start npm --name "dashboard.hainguyen.dev" -- serve
pm2 save
pm2 monit