Nginx Docker 容器上的静态网页缺少 CSS答案

【问题标题】：Static webpage on Nginx Docker Container Missing CSSNginx Docker 容器上的静态网页缺少 CSS
【发布时间】：2016-10-27 09:12:59
【问题描述】：

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

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

我的码头文件

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;
    }
  }
}

【问题讨论】：

请看看这是否有帮助，但可能是另一种选择 - github.com/ianneub/docker-swagger-ui
看过了，但是由于在同一台服务器上运行其他东西，我需要能够分配 /swagger 的位置，我认为这是不可能的。
您的意思是 url 的自定义上下文路径吗？你可以看看他的Dockerfile，那里有你自己的，有用吗？
所以要访问我的招摇页面，它必须通过serverURL.com/swagger 访问，从我读过的内容来看，这是通过 nginx.conf 文件实现的，所以不太确定如何从dockerfile.
你可以看看答案，看看是否对你有帮助。

标签： css nginx docker swagger

【解决方案1】：

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

就像评论中提到的那样，您可以从以下位置下载工件 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 **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。当然，您可以根据需要进行更改。

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

构建映像：

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.html 访问您的 swagger

【讨论】：

感谢您的帮助，让它工作，按照这个，让它工作。然后回到我最初的尝试并添加了一个 swagger 文件夹并使用配置将 index.html 附加到 url 的末尾并完美地返回它。
@user3473406，很高兴知道这个答案很有帮助。