如何在Docker容器内使用Nginx提供静态文件? [英] How to serve static files with nginx inside of a docker container?

问题描述

由于我正在运行Mac OSX，因此我正在使用boot2docker.我无法弄清楚如何使用在Docker容器(也包含静态资产，例如我的html和js)中运行的nginx为静态文件提供服务.

I'm using boot2docker since I'm running Mac OSX. I can't figure out how serve up static files using nginx that is running inside a docker container (that also contains the static assets, like my html and js).

我有四个docker容器与此 docker-compose.yml 一起旋转:

I have four docker containers being spun up with this 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"

这是我的 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;
    }

  }
}

我的 Dockerfile 用于我的Web构建(包含我的nginx.conf和静态资产):

My Dockerfile for my web build (which contains my nginx.conf and static assets):

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

./dist文件夹的内容是bundle.js文件和index.html文件.文件布局为:

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

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

它可以正确地将请求发送到我的节点服务器(也位于docker容器中，这就是为什么我的上游服务器指向boot2docker ip的原因)，但是我只是得到404来尝试检索我的静态资产.

It is properly sending requests to my node server (which is also in a docker container, which is why my upstream server points to the boot2docker ip), but I'm just getting 404s for attempts to retrieve my static assets.

我迷失了下一步.如果我能提供任何信息，请告诉我.

I'm lost as to next steps. If I can provide any information, please let me know.

推荐答案

您的问题与docker不相关，但与您的nginx配置有关.

Your issue isn't related to docker but to your nginx configuration.

在您的nginx配置文件中，您将/var/www/定义为文档根目录(我想为您的静态文件提供服务).但在此之下，您指示nginx充当节点应用程序对于所有请求的反向代理.

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

因此，如果您调用/index.html URL，nginx甚至不会费心检查/var/www的内容，并将该查询转发给nodejs.

Because of that, if you call the /index.html URL, nginx won't even bother checking the content of /var/www and will forward that query to nodejs.

通常，您希望通过使用URL约定将对静态内容的请求与对动态内容的请求区分开.例如，所有以/static/开头的请求都将由nginx处理，而其他所有请求都将转发到node.然后，nginx配置文件将是:

Usually you want to distinguish requests for static content from requests for dynamic content by using a URL convention. For instance, all requests starting with /static/ will be served by nginx while anything else will be forwarded to node. The nginx config file would then be:

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

  }
}

这篇关于如何在Docker容器内使用Nginx提供静态文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！