Other topics

  1. Use Nginx to forward sockjs-Node content for hot update
  2. Vue development server using Nginx proxy remote server
  3. Use the Nginx proxy for forwarding
  4. Use the Nginx proxy to encrypt access to the remote development server
  5. Webpack hot update
  6. sockjs-node/info? T = 146111 * an error
  7. Remote server development, proxy request

Requirements describe

I used a remote server to develop the front-end page of Vue or Webpack. It would be nice to be able to program anywhere, but in fact the code and interface I want to display can only be seen and debugable by myself (non-public), so I have to have encrypted access to that page and port.

Therefore, the proxy port is fine. Proxy port, but for hot update problems,sockjs-node access failure, you need to configure again.

Here, two problems need to be solved, the proxy vUE developed port, vUE port is not public; Proxy VUE (Webpack) hot updated sockjs-node access, so that hot updated access can be.

Vue and Webpack are the same.

The solution

  • Use Nginx to proxy ports
  • Nginx useauth_basic_user_file /etc/nginx/.htpasswd;Configuring access rights (password)
  • Nginx proxy header for configuration hot updates

Use mode and process are not detailed, but will be the mode, configuration, and process, for some nginx or vue configuration,webpack configuration issues, not explained.

  1. First, the hot update configuration of Vue and WebPack

webpack.config.js

devServer:{
    hot: true
}
Copy the code
  1. Configure portPort: custom
  2. Nginx proxy encrypts the way htpasswd is installedapt install apache2-utils
htpasswd -b .htpasswd name 123456
Copy the code
  1. Nginx where the default configuration/etc/nginx/conf.d/default.confIn the conf.d file directory,nginx will execute
server {
	listen 80;
	auth_basic "abearxiong";
	auth_basic_user_file /etc/nginx/.htpasswd;
	location / {
		root /code/github/abearxiong.github.io/_site; Static file configuration
	}
	location /book {
		alias /code/github/book; # multiple static aliases
	}
	location /work { Configure port forwardingProxy_pass http://127.0.0.1:8080/; } location /sockjs-node {# configuration sockjs - node
	  proxy_set_header X-Real-IP  $remote_addr;
	  proxy_set_header X-Forwarded-For $remote_addr;
	  proxy_set_header Host $host;
	  proxy_pass http://127.0.0.1:8080;
	  proxy_redirect off;
	  proxy_http_version 1.1;
	  proxy_set_header Upgrade $http_upgrade;
	  proxy_set_header Connection "upgrade"; } location /github {proxy_pass http://127.0.0.1:3000/; } location /anaconda {proxy_pass http://127.0.0.1:8888/; } location /coding {proxy_pass http://127.0.0.1:4000/; }}Copy the code
  1. Configuration associated
	location /sockjs-node { # configuration sockjs - node
	  proxy_set_header X-Real-IP  $remote_addr;
	  proxy_set_header X-Forwarded-For $remote_addr;
	  proxy_set_header Host $host;
	  proxy_pass http://127.0.0.1:8080;
	  proxy_redirect off;
	  proxy_http_version 1.1;
	  proxy_set_header Upgrade $http_upgrade;
	  proxy_set_header Connection "upgrade";  
	}
Copy the code

The previous configuration is to forward sockjs-node to port 8080. This configuration is required during webpack configuration

devServer:{
  sockPort: 80,
 }
Copy the code

SockPort is the forward port of SockJS. Nginx listens on the port

  1. Learn from the article

The second approach is to develop hot updates remotely

Hot updates are available, developed remotely with VS-code, and the URL displayed by VS-Code will automatically listen for the port on the developer.

Direct CTRL + click to show the local port is forwarded to the server, and because it is all forwarded, there is no proxy excessive, so if it is hot update, then vS-code development on the remote machine is also hot update.

For example: vue-CLI developed services, do not set the host to ‘0.0.0.0’, equivalent to only local access, then the remote machine will also display a local address, CTRL + click open browser will be forwarded, example

After the service is started, the following information is displayed on the terminal, indicating the local port address

  App running at:          
    - Local:   http://localhost:8092     
Copy the code

But the url that opens locally is also http://localhost:8092, but the port for this will be the port on the resulting remote machine. There is a forwarding process.