shukebeta's notebook

Just record what I made Nginx working with a project located in someone's HOME directory on a Linux machine with SELinux on.

1. Nginx seems working normally, but it actually Didn't listen to a non-80 port at all. If it reports ValueError: Port tcp/8081 already defined, replace -a with -m.

   semanage port -a -t http_port_t -p tcp 8081

Reference1 Reference2

2. telnet localhost 8081 works, but telnet 192.168.168.168 8081 from another machine not working!

   firewall-cmd _permanent add-port=8081/tcp
   firewall-cmd --reload

3. Everything seems working good, but when you visit your site, Nginx just gives you a 403! You should ensure Nginx can access your project directory, everyone knows that, but is not enough when SELinux is on.

   setsebool -P httpd_enable_homedirs 1
   setenforce 0
   systemctl restart nginx
   systemctl daemon-reload

Reference

To be honest, 5 minutes is not enough, especially for the first time you do it.

What you need to prepare

1. a VPS (Virtual Personal Server) with public IP
2. an Nginx Server running on that VPS.
3. an OpenVPN Server running on that VPS. (or you have tailscale service running on both your local machine & the VPS server)
4. a domain name
5. the CertBot tool from Let's Encrypt

Steps to get it to work

For example,

• your local dev environment is running on 10.8.0.2:8080
• your domain name is dev.myawesomedomain.com

1. create a new virtual server on your Nginx server, you can use the config below as a template.

upstream local-front-end-env {
   server 10.8.0.2:8080;
}

server {
    listen     80;
    listen [::]:80;

    server_name dev.myawesomedomain.com;

    access_log  /var/log/nginx/dev.myawesomedomain.com.access.log;
    error_log   /var/log/nginx/dev.myawesomedomain.com.error.log;

    location / {
        proxy_pass http://local-fornt-end-env;
        proxy_redirect off;
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-Proto https;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        # the following lines is used to support wss:// protocol
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_read_timeout 86400;
    }
    large_client_header_buffers 4 32k;
}

2. run sudo certbot --nginx to automatically config your new-added virtual server.
3. run sudo nginx -s reload & test it in browser
4. You need to modify your package.json to listen your vpn IP

-    "serve": "vue-cli-service serve",
+    "serve": "vue-cli-service serve --host=0.0.0.0 --port=8080 --public=https://dev.myawesomedomain.com",

5. You may need to modify your vue.config.js to fix the "Invalid Host header" error when visiting your site by https instead of localhost:8080.

--- a/vue.config.js
+++ b/vue.config.js
@@ -1,6 +1,9 @@
 module.exports = {
     configureWebpack: {
         externals: {
+        },
+        devServer: {
+            disableHostCheck: true
         }
     },

That's it.