如何在 docker 容器内使用 nginx 提供静态文件？

Question

我正在使用 boot2docker，因为我运行的是 Mac OSX。我不知道如何使用在 docker 容器中运行的 nginx 提供静态文件（该容器还包含静态资产，例如我的 html 和 js）。

我有四个 docker 容器正在使用这个 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 和静态资产）：

# 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 文件。文件布局为：

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

它正在正确地向我的节点服务器发送请求（它也在一个 docker 容器中，这就是我的上游服务器指向 boot2docker ip 的原因），但我只是得到 404 来尝试检索我的静态资产。

我不知道接下来的步骤。如果我能提供任何信息，请告诉我。

Answer 1

您的问题与 docker 无关，而是与您的 nginx 配置有关。

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

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

通常您希望通过使用 URL 约定来区分静态内容请求和动态内容请求。例如，所有以/static/ 开头的请求都将由 nginx 处理，而其他任何请求都将被转发到节点。 nginx 配置文件将是：

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

  }
}