基于docker完成nginx静态代理配置

nginx静态代理配置

本文基于docker配置nginx静态代理


1. 先用docker安装nginx的镜像

#下载镜像
docker pull nginx

#创建镜像&把对应的 宿主机对应文件夹映射到 容器
#宿主机配置文件映射到容器 /opt/nginx/nginx.conf   /etc/nginx/nginx.conf 
#宿主机日志文件映射到容器 /opt/nginx/logs/       /var/log/nginx/
#宿主机前端打包静态代码映射到容器  /opt/nginx/html/   /etc/nginx/html

docker run --name nginx -p 8090:80 -v /opt/nginx/nginx.conf:/etc/nginx/nginx.conf   -v /opt/nginx/logs/:/var/log/nginx/   -v /opt/nginx/html/:/etc/nginx/html   -v /opt/nginx/conf/:/etc/nginx/conf.d --privileged=true -d nginx

2.将前端打包好的静态文件放置在宿主机 /opt/nginx/html/文件夹中

3 .配置nginx.config文件,这里有两种配置方案

  1. 不加前端前缀 如 127.0.0.1:8090/login/
  2. 加上指定前缀, 如/myapp/,请求为 127.0.0.1:8090/myapp/login

1 不加前缀的nginx.config 配置方法


#my nginx by static_proxy 
  server{
	 listen    80;
        server_name   localhost;
	

       location / {
            root /var/1og/nginx/html/; #不加前缀配置root && dist后面可带可不带 ‘/’ 
	          index index.html index.htm;
	          try_files $uri $uri/ @router;  # 需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
         }
       location @router {
            rewrite ^.*$ /index.html last; 
       }

以上完成之后启动docker restart nginx 重启一下nginx容器

访问 ip:8090 即可访问到对应的项目

2 加上前缀 nginx.config 的配置方法

这里需要把location的 root 改为 alias

总结 一下root 和 alias的区别
a .root会根据完整的URI请求来映射,如上文如果配置

  location /myapp {
            root /var/1og/nginx/html/;
	          index index.html index.htm;

         }

映射的最终uri为 /myapp/var/log/nginx/html/xxxxx , 显然会请求不到对应的静态资源

b.alias会把location后面配置的路径丢弃掉,把当前匹配到的目录指向到指定的目录。

不过我这里试了一下,配置了前缀后,似乎不能用绝对路径了,只能用相对路径,而且文件夹名也不能叫dist,得改成html,有知道为什么的可以留言告知一下。

 #my nginx by static_proxy 
  server{
	 listen    80;
        server_name   localhost;
	

       location /myapp {
            alias html; #加前缀配置alias,这里的html和config同一级目录 
	          index index.html index.htm;
	          try_files $uri $uri/ @router;  # 需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
         }

       location @router {
            rewrite ^.*$ /myapp/index.html last; #这里的前缀和自己配置的一样,没有可不设置
       }
    }

以上完成之后启动docker restart nginx 重启一下nginx容器
访问 ip:端口/8090/myapp 就可以访问到前端项目啦

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值