Static Webpage on Nginx Docker Container Missing CSS

Static webpage on Nginx Docker Container Missing CSS

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

docker nginx not loading css styles

With the help of this SO answer and the comments I was able to get it working. If my answer doesn't help you I suggest you look at that one when running Nginx in a docker container.

For me it was moving the include /etc/nginx/mime.types; and adding sendfile on;
outside my server block and in the http block

My example.com.conf now looks like this:

user nginx;

events {
  worker_connections  4096;  ## Default: 1024
}

http {

  include /etc/nginx/mime.types;
  sendfile on;

  server {
    listen 80;
    listen [::]:80;

    server_name example.com;

    root /etc/nginx/html;
    index index.html;

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

    location / {
      try_files $uri /index.html =404;
    }
  }
}

Static files not loading using nginx and docker

Your nginx container is looking for static in /static/ but the logs show you're collecting static in /app/static/ in the gunicorn container. In docker-compose, did you try - static:/app/static on the gunicorn side and - static:/static on the nginx side?

deploy to docker , cannot load stylesheet and javascript

try to change the volumes directive on the web to

volumes:
   - /usr/src/app/web/project/static:<path of app on the container>

regard the Nginx

where the static files stored? in the web container or the nginx?
if they stored in the nginx you need to point the alias to the location on the nginx container, where you mount your nginx's volumes like

volumes:
    - /usr/src/app/web/project/static:/www/static

and in nginx conf use

location /static {
    alias /www/static;
}

if the static stored in the web container than nginx need to redirect the call to the web, thus location /static is not needed

Nginx in docker-container does not serve static content from Symfony3-app

That's the correct behaviour.

Your Nginx container wouldn't be able to find the files locally. You could either mount just the static files into your Nginx container or you could mount the shared directory between your Symfony and Nginx containers.

To test this, try adding a file /var/www/html/web and see what happens.

Nginx fails to load css files

I found an workaround on the web. I added to /etc/nginx/conf.d/default.conf the following:

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

The problem now is that a request to my css file isn't redirected well, as if root is not correctly set.
In error.log I see

2012/04/11 14:01:23 [error] 7260#0: *2 open() "/etc/nginx//html/style.css"

So as a second workaround I added the root to each defined location.
Now it works, but seems a little redundant. Isn't root inherited from / location ?

---

Related Topics