2020年02月28日阅读 27

远程开发nginx + webpack 热更新问题!

其他题目

使用Nginx转发sockjs-node的内容实现热更新
使用Nginx代理远程服务器的vue开发服务器
使用Nginx代理转发
使用Nginx代理加密访问远程开发服务器
webpack 热更新
sockjs-node/info?t=146111*报错
远程服务器开发,代理请求

需求描述

我使用远程服务器进行开发vue或者webpack的前端页面,随地可以编程的情况是很好的,但是实际上自己要显示的代码和界面只能让自己看到和自己去调试(非公开),所以必须对那个页面,端口进行加密访问.

因此,代理端口就好了.代理端口后,但是对于热更新问题,sockjs-node的访问出现问题,需要再配置.

在此,需要解决的两个问题,代理vue开发的端口,vue的端口不公开;代理vue(webpack)热更新的sockjs-node的访问,以至于可以热更新访问.

vue和webpack是一样的.

解决办法

使用Nginx来代理端口
Nginx使用auth_basic_user_file /etc/nginx/.htpasswd;进行配置访问权限(密码)
Nginx代理header进行配置热更新

使用方式和过程不讲详细,只是将方式,配置,和过程,对于一些nginx或者,vue配置,webpack配置的问题,不解释.

首先,vue以及webpack的热更新配置

webpack.config.js

devServer:{
    hot: true
}
复制代码

配置端口port:自定义
nginx代理加密安装htpasswd的方式apt install apache2-utils

htpasswd -b .htpasswd name 123456
复制代码

nginx其中默认配置/etc/nginx/conf.d/default.conf,在conf.d的文件目录下,nginx会执行

server {
	listen 80;
	auth_basic "abearxiong";
	auth_basic_user_file /etc/nginx/.htpasswd;
	location / {
		root /code/github/abearxiong.github.io/_site; #静态文件配置
	}
	location /book {
		alias /code/github/book; #多个静态的别名
	}
	location /work { # 配置端口转发
		proxy_pass http://127.0.0.1:8080/;
	}
	location /sockjs-node { # 配置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/;
	}
}

复制代码

配置关联

	location /sockjs-node { # 配置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";  
	}
复制代码

上面配置是把sockjs-node转发到8080端口在配置webpack的时候,需要配置

devServer:{
  sockPort: 80,
 }
复制代码

sockPort为sockjs的转发端口配置,nginx监听的端口

借鉴文章

第二种远程开发热更新的办法

已有热更新,用vs-code远程开发,vs-code显示的url地址会自动监听开发机上的端口.

直接ctrl+点击显示本地的端口的时候是转发到了服务器上,而因为是全部转发,没有代理的过度,所以如果本身是热更新的,那么远程机上通过vs-code开发的也是热更新的.

比如:vue-cli开发的服务,没有设置主机为'0.0.0.0',相当于只能本地访问,那么远程机上也会显示一个本地的地址,ctrl+点击打开的浏览器会是转发的,例子

启动服务后,终端显示如下,是本地端口地址

  App running at:          
    - Local:   http://localhost:8092     
复制代码

但是本地打开的url也是http://localhost:8092,但是这个的端口会是得到的远程机上的端口.其中有一个转发的过程.