Drone设置Nginx反向代理后css/js 404错误

男娘i 2023-02-17 11:16 27阅读 0赞

### 文章目录 ###

*  Drone设置Nginx反向代理后css/js 404错误
 *   *  前言
     *  Nginx配置
     *  静态资源文件404错误
     *  掉坑过程
     *  出坑过程
     *  小结
     *  参考文档

# Drone设置Nginx反向代理后css/js 404错误 #

## 前言 ##

在服务器上安装了Drone，端口为9080。

计划将[http://xdevops.cn/drone/][http_xdevops.cn_drone]反向代理（转发）到服务器上的9080端口，因为我不想直接暴露9080端口。

## Nginx配置 ##

upstream drone_server { 
        server 127.0.0.1:9080;
    }
    
    ...
    
    location /drone／ { 
        proxy_pass http://drone_server/;
        proxy_set_header Host $host:$server_port;
    
        proxy_set_header X-Forwarded-For $remote_addr;
        proxy_set_header X-Forwarded-Proto $scheme;
    
    
        proxy_redirect off;
        proxy_http_version 1.1;
        proxy_buffering off;
    
        chunked_transfer_encoding off;
    }
    
    ...

## 静态资源文件404错误 ##

浏览器访问[http://xdevops.cn/drone/][http_xdevops.cn_drone]，按F12调试时，发现浏览器访问css的路径为[http://xdevops.cn/css/app.65cc3634.css][http_xdevops.cn_css_app.65cc3634.css]，而不是想象中的[http://xdevops.cn/drone/css/app.65cc3634.css][http_xdevops.cn_drone_css_app.65cc3634.css]

## 掉坑过程 ##

尝试1：将`／`去掉，仍然有问题。

location /drone { 
        proxy_pass http://drone_server;
        ...
    }

尝试2：将`/`加回去，仍然有问题。

尝试3：不用upstream，仍然有问题。

location /drone/ { 
        proxy_pass http://127.0.0.1:9080/;
        ...
    }

尝试4：为静态文件执行proxy\_pass，但是这样会影响原来站点的访问，放弃尝试。

尝试5: 在proxy\_pass的后面也加上drone，但是Drone是否可以支持自定义访问上下文？

location /drone { 
        proxy_pass http://drone_server/drone;
        ...
    }

## 出坑过程 ##

在尝试5时，去查看官方文档是否可以自定义Drone的访问上下文，发现没有这个配置。

然后就发现了Drone的GitHub issues中说明了Drone不支持根据url（比如[http://xdevops.cn/drone/][http_xdevops.cn_drone])转发，只支持转发到子域名（比如[http://drone.xdevops.cn][http_drone.xdevops.cn])。

参见：

*  [https://github.com/drone/drone/issues/2567][https_github.com_drone_drone_issues_2567]

> 如果我更早地用Bing或Google来说搜索`drone nginx issue site:github.com` 我就能早点出坑了。

为Drone配置Nginx的官方文档：

*  [https://0-8-0.docs.drone.io/setup-with-nginx/][https_0-8-0.docs.drone.io_setup-with-nginx]

Nginx配置文件示例：

upstream drone_server { 
        server 127.0.0.1:9080;
    }
    
    server { 
    
        listen 80;
        listen [::]:80;
    
        server_name drone.xdevops.cn;
    
        location / { 
            proxy_set_header X-Forwarded-For $remote_addr;
            proxy_set_header X-Forwarded-Proto $scheme;
            proxy_set_header Host $http_host;
    
            proxy_pass http://drone_server;
            proxy_redirect off;
            proxy_http_version 1.1;
            proxy_buffering off;
    
            chunked_transfer_encoding off;
        }
    }

## 小结 ##

Jenkins是支持根据Nginx根据url转发的（参见：[为Jenkins设置Nginx反向代理][Jenkins_Nginx]），但是Drone只支持根据子域名转发。

## 参考文档 ##

*  [How To Install and Configure Drone on Ubuntu 16.04][]

[http_xdevops.cn_drone]: http://xdevops.cn/drone/
[http_xdevops.cn_css_app.65cc3634.css]: http://xdevops.cn/css/app.65cc3634.css
[http_xdevops.cn_drone_css_app.65cc3634.css]: http://xdevops.cn/drone/css/app.65cc3634.css
[http_drone.xdevops.cn]: http://drone.xdevops.cn
[https_github.com_drone_drone_issues_2567]: https://github.com/drone/drone/issues/2567
[https_0-8-0.docs.drone.io_setup-with-nginx]: https://0-8-0.docs.drone.io/setup-with-nginx/
[Jenkins_Nginx]: https://blog.csdn.net/nklinsirui/article/details/93754740
[How To Install and Configure Drone on Ubuntu 16.04]: https://www.digitalocean.com/community/tutorials/how-to-install-and-configure-drone-on-ubuntu-16-04