求助 nginx配置 部署前端相关
发布于 18 天前 作者 rianran1993 1442 次浏览 来自 问答

我用的ant design pro的默认配置. 配置到8088根目录下,直接访问能正常访问。现在想通过 8001/test/ 转发访问. 问题是 js和css全报404

server {
        listen       8001;
		#location ~ .*\.(js|css|jpg|jpeg|gif|png|ico|pdf|txt)$ {
        #    proxy_pass  http://127.0.0.1:8088;
        #}
		location /test/{
            proxy_pass   http://127.0.0.1:8088/;
		   	proxy_set_header host $host;
			proxy_set_header X-Real-IP      $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
    }
    server {
        listen       8088 default_server;
        server_name  somename  alias  another.alias;
        location / {
            try_files $uri $uri/ /index.html;
	    root   D:\website;
         }
         error_page 404 /404.html;
            location = /40x.html {
        }
        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }
	```
9 回复

webpack的设置 资源根路径(可能叫publicPath)需要设置/test

F12-network,看一下前端资源访问的链接是什么

location /test/块里面需要rewrite,否则你代理之后的访问路径就相当于:http://127.0.0.1:8088/test/xxx.css,这样的话当然是404

我就是想直接部署到8088端口的根目录下,然后又能通过8001/test/ 二级目录访问。 所有umi的base publicpath应该就不需要改把,默认"/"就行。我先去试下rewrite

@funswe 老哥 不能用rewrite呀,现在就是外网8088端口没开放,只开放了8001端口。 我现在暂时的解决办法就是改代码配置文件,只部署到8001的二级目录了

那修改成下面这样可以吗?

location /test/(.*){
            proxy_pass   http://127.0.0.1:8088/$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;
        }

@funswe 下面这样写可以访问,但是刷新就不行了,try_files又要踩坑。我觉得本身这样配置就是不对的。还是老实改配置代码,部署了

    server {
        listen       8001;
		#单独代理静态文件
		location ~ (.*)\.(js|css|jpg|jpeg|gif|png|ico|pdf|txt)$ {
           proxy_pass  http://127.0.0.1:8888$1.$2;
        # rewrite (.*).(html|js|css|gif|jpg|png|bmp|swf)$ http://127.0.0.1:8888$1.$2 break;
        }
		location /test/{
            proxy_pass   http://127.0.0.1:8088/;
		   	proxy_set_header host $host;
			proxy_set_header X-Real-IP      $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
    }
	```

@rianran1993 这样子可以吗?

server {
        listen       8088 default_server;
        server_name  somename  alias  another.alias;
        location /test/ {
			alias {资源目录}
         }
		 # ....
    }

要么 ant design pro 项目改下 webpack 配制, 把 publicePath 改为为相对路径 ./ , 改 ‘/test’ 那么 8088就不能用了

要么把 资源路径也反向代理到 8001下面

回到顶部