node.js - Docker 多容器应用程序：React、Nginx 和反向代理的问题（无效的 URL 前缀）

Question

我正在尝试使用 Docker compose 部署带有 NodeJs 后端的 React 应用程序。该应用程序是最新版本的重力 ( https://usegravity.app )，它是一个 SaaS 样板。

所以我为前端和后端分别创建了两个 Dockerfile，以及一个 docker-compose 文件。

对于前端，我需要以 /api/ 开头的请求转发到后端。我正在使用 Nginx 并将其配置为执行此操作。但是当我运行“docker-compose up”命令时，前端容器退出并出现错误：

nginx: [emerg] invalid URL prefix in /etc/nginx/conf.d/default.conf:14

以下是 docker 文件、docker compose 文件和 nginx 配置：

Dockerfile（反应前端）：

# build environment
FROM node:15.6.0-alpine as build

ARG REACT_APP_SERVICES_HOST=/api/

WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH
COPY package.json ./
COPY package-lock.json ./
RUN npm ci --silent
COPY . ./
RUN npm run build

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

nginx.conf：

server { 
 listen 80;
 server_name frontend;
 location / {
   # This would be the directory where your React app's static files are stored at
   root /usr/share/nginx/html;
   try_files $uri /index.html;
 }
 
 location /api/ {
   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_pass http://app-server:8080;
   proxy_ssl_session_reuse off;
   proxy_set_header Host $http_host;
   proxy_cache_bypass $http_upgrade;
   proxy_redirect off;
 }
}

Dockerfile（NodeJs 后端）：

# syntax=docker/dockerfile:1

FROM node:15.6.0
ENV NODE_ENV=production

WORKDIR /app

COPY ["package.json", "package-lock.json*", "./"]

RUN npm install --production

COPY . .

CMD [ "node", "server.js" ]

码头工人-compose.yml：

version: "3.7"

services:
  app-server:
    image: usaadi/brandspulse-server
    ports:
      - 8080:8080
    networks:
      - net
    environment:
      DB_HOST: db
      DB_USER: root
      DB_PASSWORD: password
      DB_PORT: 3306
      DB_NAME: brandspulse
      STRIPE_SECRET_API_KEY: pppp
      MAILGUN_API_KEY: ooo
      CLIENT_URL: http://localhost:3000
      TOKEN_SECRET: dsfdffd
      CRYPTO_SECRET: ferggererere
      SESSION_SECRET: sdfsodhwiuefhwef
      SUPPORT_EMAIL: [e-mail]
      GENERATE_SOURCEMAP: 0
      INLINE_RUNTIME_CHUNK: 1
      FACEBOOK_APP_ID:
      FACEBOOK_APP_SECRET:
      TWITTER_API_KEY:
      TWITTER_API_SECRET:
      AWS_ACCESS_KEY_ID:
      AWS_SECRET_ACCESS_KEY:
      PRODUCTION_DOMAIN:
      ENABLE_API_LOGS: 1
      STORE_EVENT_LOGS: 1
      APP_NAME: Gravity

  app-front:
    image: usaadi/brandspulse-front
    ports:
      - 3000:80
    networks:
      - net

  db:
    image: mysql:8
    volumes:
      - db-data:/var/lib/mysql
    environment:
      MYSQL_ROOT_PASSWORD: password
      MYSQL_DATABASE: brandspulse
    networks:
      - net

volumes:
  db-data:

networks:
  net:

我在这里做错了什么来得到这个错误？

标签： node.jsreactjsdockernginxdocker-compose