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

问题描述

当我通过 hostAddress.com 它返回网页作为纯文本，并检查它告诉我，它找不到任何javascript或css文件，尽管他们似乎存在于容器，因为我有ssh进入容器检查。

我的dockerfile

  FROM nginx 
 COPY src / usr / share / nginx / html 
 COPY config / nginx.conf / etc / nginx 
 EXPOSE 80 
  / pre> 
 
 
 nginx.config 
 事件{
 worker_connections 4096; ##默认值：1024 
} 
 
 http {
 server {
 listen 80; 
 server_name localhost; 
 root / usr / share / nginx / html; 
 index index.html index.htm; 
包含/etc/nginx/mime.types; 
 
 
 location / swagger {
 try_files $ uri /index.html; 
} 
 
＃静态文件缓存。具有以下扩展名的所有静态文件将被缓存1天
位置〜*。（jpg | jpeg | png | gif | ico | css | js）$ {
 expires 1d; 
} 
} 
} 
  
 
 
解决方案
这里你可以做些什么。
 
 
 
像提到的评论一样，你可以从
  https://github.com/ianneub/docker-swagger-ui/blob/master  
 
 
 
 
 
创建一个目录，说ngix 
 
 
复制 Dockerfile ， run.sh 进入该目录
 
 
编辑 Dockerfile 您需要更改位置的定制，如下所示：
 
 
 
 
 
  FROM nginx：1.9 
 
 ENV SWAGGER_UI_VERSION 2.1.2-M2 
 ENV URL **无** 
 
运行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 。当然，您可以根据需要进行更改。
 
 
 
 
 
接下来，运行以下Docker命令构建并运行
 
 
 
 构建映像 
  docker build -t myswagger。 
  
 运行 
 
 
 ＃pre>  docker run -it --rm -p 3000：80  -  name testmyswagger -eURL = http：//petstore.swagger.io/v2/swagger.jsonmyswagger 
  

现在，您应该可以使用 http：// localhost：3000 / swagger / index.html

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

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.

My dockerfile

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

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.

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

• 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"]

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

Next, run the following docker commands to build and run

Build Image:

docker build -t myswagger .

Run it

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

Now you should be able to access your swagger using http://localhost:3000/swagger/index.html

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