解决docker容器静态资源404

原因

今天在部署私有代码仓库的时候，发现使用nginx反向代理之后，部分静态资源出现404，解决过程这里记录下

反向代理

反向代理配置如下；之前的也是使用docker部署，但是并未出现

location / {
         # 反向代理
         proxy_pass http://IP:端口号;
         proxy_set_header Host $host:$server_port;
         proxy_set_header X-NginX-Proxy true;
         proxy_set_header X-Real-IP $remote_addr;
         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
         proxy_set_header X-Forwarded-Proto $scheme;
         proxy_set_header REMOTE-HOST $remote_addr;

         # 缓存
         add_header X-Cache $upstream_cache_status;
         add_header Cache-Control no-cache;
         expires 12h;
}

解决方法

核心原因是因为需要给静态文件也添加一个反向代理，需要在80端口和443都添加。若没有TLS可只添加80端口一项配置如下：

location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$ {
    expires 30d;
    #解决反向代理无法访问图片
    proxy_pass http://127.0.0.1:8080; #反向代理地址和端口
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

location ~ .*\.(js|css)?$ {
    expires 12h;
    #解决反向代理无法访问图片
    proxy_pass http://127.0.0.1:8080; #反向代理地址和端口
    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 80;
    #listen [::]:80;
    server_name test.zdynb.cn;
    return 301 https://test.zdynb.cn$request_uri; #301强制https,不通过http访问
    #error_page   404   /404.html;

    # Deny access to PHP files in specific directory
    #location ~ /(wp-content|uploads|wp-includes|images)/.*\.php$ { deny all; }


    location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$ {
        expires 30d;
        #解决反向代理无法访问图片
        proxy_pass http://127.0.0.1:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    location ~ .*\.(js|css)?$ {
        expires 12h;
        # 解决反向代理无法js/css
        proxy_pass http://127.0.0.1:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    location ~ /.well-known {
        allow all;
    }

    location ~ /\. {
        deny all;
    }
    location / {
        return 301 https://test.zdynb.cn$request_uri; # 此处为let`s encrypt自动续签必须添加的配置
        # 反向代理
        proxy_pass http://localhost:8080;
        proxy_set_header Host $host:$server_port;
        proxy_set_header X-NginX-Proxy true;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header REMOTE-HOST $remote_addr;

        # 缓存
        add_header X-Cache $upstream_cache_status;
        add_header Cache-Control no-cache;
        expires 12h;
    }
    access_log off;
}

server {
    listen 443 ssl http2;
    #listen [::]:443 ssl http2;
    server_name test.zdynb.cn;

    ssl_certificate /usr/local/nginx/conf/ssl/code.zdynb.cn/fullchain.cer;
    ssl_certificate_key /usr/local/nginx/conf/ssl/code.zdynb.cn/code.zdynb.cn.key;
    ssl_session_timeout 5m;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3;
    ssl_prefer_server_ciphers on;
    ssl_ciphers "TLS13-"; #此处md5已删除
    ssl_session_cache builtin:1000 shared:SSL:10m;
    # openssl dhparam -out /usr/local/nginx/conf/ssl/dhparam.pem 2048
    ssl_dhparam /usr/local/nginx/conf/ssl/dhparam.pem;

    # Deny access to PHP files in specific directory
    #location ~ /(wp-content|uploads|wp-includes|images)/.*\.php$ { deny all; }

    include enable-php.conf;

    location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$ {
        expires 30d;
        #解决反向代理无法访问图片
        proxy_pass http://127.0.0.1:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    location ~ .*\.(js|css)?$ {
        expires 12h;
        # 解决反向代理无法js/css
        proxy_pass http://127.0.0.1:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    location ~ /.well-known {
        allow all;
    }

    location ~ /\. {
        deny all;
    }
    location / {
        # 反向代理
        proxy_pass http://localhost:8080;
        proxy_set_header Host $host:$server_port;
        proxy_set_header X-NginX-Proxy true;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header REMOTE-HOST $remote_addr;

        # 缓存
        add_header X-Cache $upstream_cache_status;
        add_header Cache-Control no-cache;
        expires 12h;
    }
    access_log off;
}

重载nginx配置

修改完成之后我们重启nginx或者重载配置

nginx -t; # 检查配置文件是否有错，有错会导致nginx无法启动
nginx -s reload # 重新加载nginx配置文件