时间戳

首页 > 解决方案 > 如何使用 nginx 在生产环境中使用 docker 服务我的 mern 应用程序？

reactjs - 如何使用 nginx 在生产环境中使用 docker 服务我的 mern 应用程序？

问题描述

我正在尝试在生产中使用 nginx 为我的 mern stack 应用程序提供服务。我有一个 Dockerfile：

# build environment
FROM node:13.12.0-alpine as build
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH
COPY package.json ./
RUN npm install
COPY . ./
RUN npm run build

# production environment
FROM nginx:stable-alpine
COPY --from=build app/dist/ /usr/share/nginx/html
# new
COPY nginx/nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

一个 docker-compose.yml：

version: '3.7'

services:

  web:
    container_name: web
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - '.:/app'
      - '/app/node_modules'
    ports:
      - 3001:3000
    environment:
      - CHOKIDAR_USEPOLLING=true
    depends_on: 
      - mongo

  mongo:
    image: mongo
    volumes:
      - data:/data/db
    ports:
      - "27017:27017"

volumes: 
  node_modules:
  data:

这是我的 package.json 的脚本部分

  "scripts": {
    "development": "nodemon",
    "build": "webpack --config webpack.config.client.production.js && webpack --mode=production --config webpack.config.server.js",
    "start": "NODE_ENV=production node ./dist/server.generated.js"
  },

但是，当我启动容器时，只有 docker-compose 日志用于 mongo，而 nginx 仅显示默认页面。这是我的 nginx.conf

server {

  listen 80;

  location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
  }

  error_page   500 502 503 504  /50x.html;

  location = /50x.html {
    root   /usr/share/nginx/html;
  }

}

注意：此设置在我使用 create react app 时有效（只是我用 build 替换了 dist）。该项目使用服务器端渲染。我不知道我做错了什么，但我肯定会感激任何想法。该项目位于此处：https ://github.com/smeyerhot/mern-market唯一的区别是 docker-compose、Dockerfile 和 nginx/nginx.conf 文件。

标签： reactjsdockernginxwebpackmern

解决方案

实际上，您尝试提供 nodejs 应用程序而不是静态应用程序。这就是你不需要 nginx 服务器的原因。

我认为您应该将 Dockerfile 更改为：

FROM node:13.12.0-alpine as build
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH
COPY package.json ./
RUN npm install
COPY . ./
RUN npm run build
CMD npm run start

这里唯一的问题是您将拥有镜像上的所有构建依赖项。

推荐阅读