user3473406 user3473406 - 1 month ago 9
CSS Question

Static webpage on Nginx Docker Container Missing CSS

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

Rao Rao
Answer

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

Comments