首页 > 解决方案 > NGINX 在 SwaggerUI 的静态资源上响应 404 - (Express)

问题描述

swaggerUI 在我的本地主机上工作,但是当我尝试将它与 nginx 集成时它不起作用。

当您尝试获取静态 swagger 文件时,服务器找不到它们。可能是反向代理不起作用。有任何想法吗?

这些是配置文件和日志文件:

nginx的error.log*

2020/01/29 13:47:54 [error] 933#933: *2432 open() "/usr/share/nginx/html/documentation/swagger-ui.css" failed (2: No such file or directory), client: 190.190.190.28, server: mywebsite.com.com, request: "GET /documentation/swagger-ui.css HTTP/2.0", host: "mywebsite.com", referrer: "https://mywebsite.com/documentation/"
2020/01/29 13:47:54 [error] 933#933: *2432 open() "/usr/share/nginx/html/documentation/swagger-ui-bundle.js" failed (2: No such file or directory), client: 190.190.190.28, server: mywebsite.com, request: "GET /documentation/swagger-ui-bundle.js HTTP/2.0", host: "mywebsite.com", referrer: mywebsite.com/documentation/"
2020/01/29 13:47:54 [error] 933#933: *2432 open() "/usr/share/nginx/html/documentation/swagger-ui-standalone-preset.js" failed (2: No such file or directory), client: 190.190.190.28, server: mywebsite.com, request: "GET /documentation/swagger-ui-standalone-preset.js HTTP/2.0", host: "mywebsite.com", referrer: "https://mywebsite.com/documentation/"

site.conf [nginx]

# Expires map
map $sent_http_content_type $expires {
    default                    off;
    text/css                   1y;
    application/javascript     1y;
    ~image/                    1M;
}

server {
    server_name mywebsite.com;

    expires $expires;

    index index.html;

    include mime.types;
    default_type application/octet-stream;

    sendfile on;

    location ~ \.css
    {
      add_header Content-Type text/css;
    }

    location ~ \.js
    {
      add_header Content-Type application/javascript;
    }

    location /
    {
      expires -1;
      add_header Pragma "no-cache";
      add_header Cache-Control "no-store, no-cache, must-revalidate, post-check=0, pre-check=0";
      #root /var/www;
      try_files $uri $uri/;
      return 301 https://mywebsite.com/documentation;
    }

    location ~* \.(?:manifest|appcache|html?|xml|json)$
    {
      expires -1;
    }

    location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc)$
    {
      expires 1M;
      access_log off;
      add_header Cache-Control "public";
    }

    location ~* \.(?:css|js)$
    {
      expires 1d;
      access_log off;
      add_header Cache-Control "public";
    }

    location /api/ {
      proxy_pass http://127.0.0.1:4000/api/;
      proxy_http_version 1.1; # this is essential for chunked responses to work
      proxy_buffering    off;
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-Proto $scheme;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      # set client body size to 200M #
      client_max_body_size 200M;
    }


    location /documentation/ {
      proxy_pass http://127.0.0.1:4000/documentation/;
      proxy_http_version 1.1; # this is essential for chunked responses to work
      proxy_buffering    off;
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-Proto $scheme;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      client_max_body_size 200M;
    }

   .... ####  Certbot conf #### ....

}

swaggerDoc.js(快递)

'use strict'
const express = require('express')
const router = express.Router({ mergeParams: true })
const swaggerUi = require('swagger-ui-express')
const swaggerJSDoc = require('swagger-jsdoc')
const config = require('./conf')
const DisableTryItOutPlugin = function() {
  return {
    statePlugins: {
      spec: {
        wrapSelectors: {
          allowTryItOutFor: () => () => false
        }
      }
    }
  }
}

// Swagger definition
const swaggerDefinition = {
  openapi: "3.0.0",
  info: {
    title: "*****",
    version: "1.0.0",
    description:
      "Api Rest",
    termsOfService: 'http://example.com',
    license: {
      name: "MIT license",
      url: "https://choosealicense.com/licenses/mit/"
    },
    contact: {
      name: "*****",
      email: "*****"
    }
  },
  host: `${config.api.apiUrl}`,
  servers: [
    {
      url: `${config.api.apiUrl}`
    }
  ]
}

// options for the swagger docs
const options = {
  swaggerDefinition,
  apis: ['./**/routes/*.js'],
};

// options for the swagger UI
const optionsUI = {
  swaggerOptions: {
      plugins: [
           DisableTryItOutPlugin,
      ],
   }
};

// initialize swagger-jsdoc
const swaggerSpec = swaggerJSDoc(options)

module.exports = () => {
  //app.use('/documentation', swaggerUi.serve, swaggerUi.setup(swaggerSpec,{ explorer: true }))
  router.use("/documentation", swaggerUi.serve);
  router.get(
    "/documentation",
    swaggerUi.setup(swaggerSpec,optionsUI)
  )
  return router
}

标签: node.jsexpressnginxswagger

解决方案


您缺少root您的位置块。在提供静态文件时,它会导致 nginx 失败。如果您的静态资产存储在同一路径下,您可以将rootserver 块中的移动如下:

server {
    server_name mywebsite.com;

    expires $expires;

    index index.html;

    include mime.types;
    default_type application/octet-stream;

    root /api/static;    # change this to your path

    # the rest of your configuration
}

推荐阅读