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

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

前言

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

计划将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/，按F12调试时，发现浏览器访问css的路径为http://xdevops.cn/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://drone.xdevops.cn)。

参见：

• 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/

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反向代理），但是Drone只支持根据子域名转发。

参考文档

• How To Install and Configure Drone on Ubuntu 16.04