How to serve static files with nginx inside docker container?

Question

I am using boot2docker since I am running Mac OSX. I cannot figure out how to use static files using nginx, which is running inside the docker container (which also contains static assets like my html and js).

I have four docker containers that were created using docker-compose.yml :

web: build: ./public links: - nodeapi1:nodeapi1 ports: - "80:80" nodeapi1: build: ./api links: - redis - db ports: - "5000:5000" volumes: - ./api:/data redis: image: redis:latest ports: - "6379:6379" db: image: postgres:latest environment: POSTGRES_USER: root ports: - "5432:5432" 

This is my nginx.conf :

 worker_processes auto; daemon off; events { worker_connections 1024; } http { server_tokens off; upstream node-app { ip_hash; server 192.168.59.103:5000; } server { listen 80; index index.html; root /var/www; location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ { expires 1d; } location / { proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-NginX-Proxy true; proxy_http_version 1.1; proxy_pass http://node-app; proxy_cache_bypass $http_upgrade; } } } 

My Dockerfile for my web build (containing my nginx.conf and static resources):

 # Pull nginx base image FROM nginx:latest # Expost port 80 EXPOSE 80 # Copy custom configuration file from the current directory COPY nginx.conf /etc/nginx/nginx.conf # Copy static assets into var/www COPY ./dist /var/www COPY ./node_modules /var/www/node_modules # Start up nginx server CMD ["nginx"] 

The contents of the folder. / dist is a bundle.js file and an index.html file. File Layout:

 public -- Dockerfile -- nginx.conf -- dist (directory) -- bundle.js -- index.html -- node_modules ...various node modules 

It correctly sends requests to my node server (which is also in the docker container, so my upstream server points to the boot2docker ip address), but I just get 404s for trying to get my static assets,

I lost the following steps. If I can provide any information, please let me know.

Answer 1

Your problem is not with docker, but with nginx configuration.

In your nginx configuration file, you define /var/www/ as the root of the document (I suppose to serve your static files). But below you instruct nginx to act as a reverse proxy for your node application for all requests .

Because of this, if you call the URL /index.html , nginx will not even check the contents of /var/www and redirect this request to nodejs.

You typically want to distinguish between static content requests and dynamic content requests using a URL convention. For example, all requests starting with /static/ will be served by nginx, and all others will be redirected to node. Then the nginx configuration file will look like this:

 worker_processes auto; daemon off; events { worker_connections 1024; } http { server_tokens off; upstream node-app { ip_hash; server 192.168.59.103:5000; } server { listen 80; location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ { expires 1d; } location /static/ { alias /var/www/; index index.html; } location / { proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-NginX-Proxy true; proxy_http_version 1.1; proxy_pass http://node-app; proxy_cache_bypass $http_upgrade; } } }