The Nginx conf is the same for any sock-js site. It can be used for Vue and Angular and Svelte, not sure about React but I’d guess it uses sock-js as well.
My dev domain is qxdsladmin.local in this example.
/etc/nginx/conf.d/qxdsladmin.local.conf
|
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 |
server { listen 80; listen [::]:80; server_name qxdsladmin.local; root /home/darko/WebProjects/qxdsladmin/public/; index index.html; error_log /var/log/nginx/qxdsladmin.local.error; location / { proxy_pass http://localhost:4201; proxy_read_timeout 30; proxy_connect_timeout 30; proxy_redirect off; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; } location /sockjs-node/ { proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; rewrite ^/(.*)$ /$1 break; proxy_set_header Host localhost; proxy_pass http://localhost:4201/; } location ~ ^/api/v1/.* { proxy_pass http://unix:/tmp/qxdsl-proxy.sock; proxy_read_timeout 30; proxy_connect_timeout 30; proxy_redirect off; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; } } |
This location ~ ^/api/v1/.* is a mountpoint for the backend http api, which in my case is a RESTful Go API.
The vue part, create a file named vue.config.js in the project’s root dir.
So if you used vue create vxdsladmin it’s the directory you go to when doing cd vxdsladmin.
|
1 2 3 4 5 6 7 8 |
module.exports = { devServer: { disableHostCheck: true, host: '0.0.0.0', port: 4201, public: 'qxdsladmin.local' } } |
This works for me, but maybe it can be improved. Let me know if that’s the case.