前提.前端需要配合 新的路径名修改前端文件(例如 ip+port/xxxx 这种),不修改的话静态资源加载不了
1.上传 VUE包 至linux
2.上传 Nginx基础配置文件
3.启动 nginx :
docker run -d -p 10000:83 -v /opt/docker_nginx/conf.d/:/etc/nginx/conf.d -v /opt/docker_nginx/nginx.conf/:/etc/nginx/nginx.conf -v /opt/vue_web/:/home/vue_web --name webnginx nginx
映射端口+挂在卷(配置 和 vue前端包)
4.修改配置
default.conf文件
server{
listen 83;
server_name 127.0.0.1;
#参数配置
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_redirect off;
location /webdashboard{
proxy_pass http://127.0.0.1:8066/;
}
location /webdashboard/ {
proxy_pass http://127.0.0.1:8066/;
}
location /appdashboard{
proxy_pass http://127.0.0.1:8067/;
}
location /appdashboard/ {
proxy_pass http://127.0.0.1:8067/;
}
}
server {
listen 8066;
location / {
root /home/vue_web/webdashboard/dist;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
}
server {
listen 8067;
location / {
root /home/vue_web/appdashboard/appdashboard;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
}
5.修改 vue包 777权限
chmod 777 /vue_web(docker里外 都修改下)
6.重启docker
7.注意:
7.1、root、alias
root与alias主要作用就是解释location后面的uri,root意思就是根据root路径+locationn路径找到资源;alias意思就是用alias路径替换对应的location路径内容。
7.2、try_files uri uri/
try_files 去尝试到网站目录读取用户访问的文件,如果第一个变量存在,就直接返回当前值;如果第一个不存在继续读取第二个变量,如果存在,返回当前值;如果不存在就跳转到第三个参数上。
@router,这个参数叫location,配置的是rewrite,重写规则。比如上面的rewrite ^.*$ /index.html last; ,这句意思就是一个重定向。比如你是这个地址http://www.baidu.com/xxx.html,它会跳转到http://www.baidu.com/index.html/xxx.html
其他注意点
1.proxy_pass的斜杠问题 https://www.jianshu.com/p/c751250a5112
2.如果是自己代理自己的话 不能代理自己的公网地址,公网地址不通,需要些内网地址