☰

为什么 Nginx 无法提供 css 和 JS 文件？

tag-icon • tag-icon nginx ubuntu-16.04
为什么 Nginx 无法提供 css 和 JS 文件？

以下是我的 nginx 配置：

    server {
        listen 80;
        listen [::]:80;

        server_name my-domain.com;

        access_log      /var/log/nginx/access.log;
        error_log       /var/log/nginx/error.log;

        #pass through headers from Jenkins which are considered invalid by Nginx server.
        ignore_invalid_headers off;

        location /userContent {
            #have nginx handle all the static requests to the userContent folder files
            #note : This is the $JENKINS_HOME dir
            root /var/lib/jenkins/;
            if (!-f $request_filename){
                 #this file does not exist, might be a directory or a /**view** url
                 rewrite (.*) /$1 last;
                 break;
            }
            sendfile on;
         }

    location / {
            root /opt/tomcat/webapps/ROOT/;
        #index index.jsp index.html index.htm;

        proxy_set_header    Host              $host;
            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;

            # Required for new HTTP-based CLI
            proxy_http_version 1.1;
            proxy_request_buffering off;

        proxy_pass http://127.0.0.1:7070/;
        }

    #Include other locations
    include   /etc/nginx/locations-enabled/*.loc;
}

以及 /etc/nginx/locations-enabled/flowable.loc

location /flowable-idm {
    root /opt/tomcat/webapps/flowable-idm;

    include /etc/nginx/mime.types;

    access_log      /var/log/nginx/flowable/access.log;
    error_log       /var/log/nginx/flowable/error.log;

    location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
        expires 1M;
     }

    proxy_set_header    Host              $host;
    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;

    # Required for new HTTP-based CLI
    proxy_http_version 1.1;
    proxy_request_buffering off;

    proxy_pass http://127.0.0.1:7070/flowable-idm;
}

该设置用于代理部署在 apache tomcat 中的一些应用程序。根目录中的权限如下所示：

-rw-r-----  1 tomcat tomcat 3.5K Apr  5  2017 404.html
-rw-r-----  1 tomcat tomcat  250 Apr  5  2017 browserconfig.xml
-rw-r-----  1 tomcat tomcat  15K Apr  5  2017 favicon.ico
drwxr-x---  2 tomcat tomcat 4.0K Dec 20 10:45 fonts/
-rw-r-----  1 tomcat tomcat  24K Apr  5  2017 .htaccess
drwxr-x---  2 tomcat tomcat 4.0K Dec 20 10:45 i18n/
-rw-r-----  1 tomcat tomcat 8.1K Dec 22 13:54 idm-service.js
drwxr-x---  2 tomcat tomcat 4.0K Dec 20 10:45 images/
-rw-r-----  1 tomcat tomcat 6.8K Dec 11 16:04 index.html
drwxr-x--- 34 tomcat tomcat 4.0K Dec 20 10:45 libs/
-rw-r-----  1 tomcat tomcat  318 Apr  5  2017 manifest.json
drwxr-x---  3 tomcat tomcat 4.0K Dec 20 10:45 META-INF/
drwxr-x---  3 tomcat tomcat 4.0K Dec 20 10:45 scripts/
drwxr-x---  4 tomcat tomcat 4.0K Dec 20 10:45 styles/
drwxr-x---  4 tomcat tomcat 4.0K Dec 20 10:45 views/
drwxr-x---  4 tomcat tomcat 4.0K Dec 20 10:45 WEB-INF/

将 Nginx 添加为雄猫组。目前，Nginx 能够提供位于根目录中的 xml 和 HTML 文件，但对于任何其他类型的文件，我都会得到 404 错误。
因此，在加载 index.html 页面时，libs、scripts、styles 和 view 子目录中的所有其他文件（.css 和 .js）都会返回 404 错误。以下是 nginx -V 的输出：

nginx version: nginx/1.13.7
built by gcc 5.4.0 20160609 (Ubuntu 5.4.0-6ubuntu1~16.04.5)
built with OpenSSL 1.0.2g  1 Mar 2016
TLS SNI support enabled
configure arguments: --prefix=/etc/nginx --sbin-path=/usr/sbin/nginx --modules-path=/usr/lib/nginx/modules --conf-path=/etc/nginx/nginx.conf --error-log-path=/var/log/nginx/error.log --http-log-path=/var/log/nginx/access.log --pid-path=/var/run/nginx.pid --lock-path=/var/run/nginx.lock --http-client-body-temp-path=/var/cache/nginx/client_temp --http-proxy-temp-path=/var/cache/nginx/proxy_temp --http-fastcgi-temp-path=/var/cache/nginx/fastcgi_temp --http-uwsgi-temp-path=/var/cache/nginx/uwsgi_temp --http-scgi-temp-path=/var/cache/nginx/scgi_temp --user=nginx --group=nginx --with-compat --with-file-aio --with-threads --with-http_addition_module --with-http_auth_request_module --with-http_dav_module --with-http_flv_module --with-http_gunzip_module --with-http_gzip_static_module --with-http_mp4_module --with-http_random_index_module --with-http_realip_module --with-http_secure_link_module --with-http_slice_module --with-http_ssl_module --with-http_stub_status_module --with-http_sub_module --with-http_v2_module --with-mail --with-mail_ssl_module --with-stream --with-stream_realip_module --with-stream_ssl_module --with-stream_ssl_preread_module --with-cc-opt='-g -O2 -fstack-protector-strong -Wformat -Werror=format-security -Wp,-D_FORTIFY_SOURCE=2 -fPIC' --with-ld-opt='-Wl,-Bsymbolic-functions -Wl,-z,relro -Wl,-z,now -Wl,--as-needed -pie'

编辑：以下是我出于测试目的提出的要求：
http://我的域名/flowable-idm/favicon.ico返回 404
http://我的域名/flowable-idm/index.html返回 200
http://我的域名/flowable-idm/404.html返回 200
http://我的域名/flowable-idm/idm-services.js返回 404

答案1

您的location /flowable-idm不在server其所属的块内。它位于块外，这是不允许的。如果您尝试使用此配置重新加载 nginx，它将拒绝加载并继续使用其旧配置。如果您尝试使用此配置重新启动 nginx，它将无法启动。将 放在块location内server。

答案2

看来删除root目录就可以
location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ { expires 1M; }
解决我的问题。

相关内容