nginx静态代理配置

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


文章目录

  • nginx静态代理配置
  • 1. 先用docker安装nginx的镜像
  • 2.将前端打包好的静态文件放置在宿主机 /opt/nginx/html/文件夹中
  • 3 .配置nginx.config文件，这里有两种配置方案
  • 1 不加前缀的nginx.config 配置方法
  • 2 加上前缀 nginx.config 的配置方法


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 就可以访问到前端项目啦