其他题目
- 使用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,但是这个的端口会是得到的远程机上的端口.其中有一个转发的过程.