Nginx Docker 容器上的静态网页缺少 CSS [英] Static webpage on Nginx Docker Container Missing CSS

问题描述

我正在尝试使用 Nginx 在 docker 容器上托管 Swagger UI.

I am trying to host the Swagger UI on a docker container using Nginx.

当我通过 hostAddress.com 访问我的网页时，它会以纯文本形式返回网页并检查它告诉我它找不到任何 javascript 或 css 文件，尽管它们似乎存在于容器中，因为我已经 ssh 进入容器进行检查.

When I access my webpage via hostAddress.com it returns the webpage as plain text and inspecting it tells me that it can't find any of the javascript or css files despite them seeming to be present in the container as I have ssh into the container to check.

我的码头文件

FROM nginx
COPY src /usr/share/nginx/html
COPY config/nginx.conf /etc/nginx
EXPOSE 80

nginx.config

nginx.config

events {
  worker_connections  4096;  ## Default: 1024
}

http {
  server {
listen       80;
server_name  localhost;
root   /usr/share/nginx/html;
index  index.html index.htm;
include /etc/nginx/mime.types;


  location /swagger {
  try_files $uri /index.html;
}

#Static File Caching. All static files with the following extension will be cached for 1 day
location ~* .(jpg|jpeg|png|gif|ico|css|js)$ {
  expires 1d;
    }
  }
}

推荐答案

这里你可以做些什么来实现它.

Here what you can do achieve that.

就像评论中提到的那样，您可以从https://github.com/ianneub/docker-swagger-ui/blob/master

Like it was mentioned the comment, you can download the artifacts from https://github.com/ianneub/docker-swagger-ui/blob/master

• 创建一个目录，比如 ngix
• 复制 Dockerfile, run.sh 进入那个目录
• 编辑 Dockerfile 以进行您需要更改位置的自定义，如下所示:

• Create a directory say ngix
• Copy Dockerfile, run.sh into that directory
• Edit the Dockerfile to make the customization that you need to change the location as shown below:

FROM nginx:1.9

ENV SWAGGER_UI_VERSION 2.1.2-M2
ENV URL **None**

RUN apt-get update 
    && apt-get install -y curl 
    && curl -L https://github.com/swagger-api/swagger-ui/archive/v${SWAGGER_UI_VERSION}.tar.gz | tar -zxv -C /tmp 
    && mkdir /usr/share/nginx/html/swagger 
    && cp -R /tmp/swagger-ui-${SWAGGER_UI_VERSION}/dist/* /usr/share/nginx/html/swagger 
    && rm -rf /tmp/*

COPY run.sh /run.sh

CMD ["/run.sh"]

• 如果您将上述更改与原始 Dockerfile 进行比较，则第 9 行和第 10 行中进行了更改以包含附加路径，即 swagger.当然，您可以根据需要进行更改.
• If you compare the above changes with original Dockerfile, there are changes made in the lines 9, 10 to include additional path i.e., swagger. Of course, you may change as needed.

接下来，运行以下 docker 命令构建并运行

Next, run the following docker commands to build and run

构建映像:

docker build -t myswagger .

运行它

docker run -it --rm -p 3000:80 --name testmyswagger -e "URL=http://petstore.swagger.io/v2/swagger.json" myswagger

现在您应该可以使用 http://localhost:3000/swagger/index 访问您的 swagger.html

这篇关于Nginx Docker 容器上的静态网页缺少 CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！