React 应用程序未使用 docker-compose 加载

Posted 2023-02-22

【中文标题】React 应用程序未使用 docker-compose 加载

【英文标题】：React app not loading with docker-compose

【发布时间】：2021-05-18 14:42:44

【问题描述】：

我的 React 客户端的 Dockerfile：

FROM node:10

WORKDIR /app/client

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

RUN npm install --production

COPY . .

EXPOSE 3000

CMD ["npm", "start"]

我的 Express 后端的 Dockerfile：

FROM node:10

WORKDIR /app/server

COPY ["package.json", "package-lock.json", "./"]
RUN ls
RUN npm install --production

COPY . .

EXPOSE 5000

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

我的项目根目录中的 docker-compose.yml 文件：

version: '3'

services:
  backend:
    build:
      context: ./backend
      dockerfile: ./Dockerfile
    image: "isaacasante/mcm-backend"
    ports:
      - "5000:5000"
  frontend:
    build:
      context: ./client
      dockerfile: ./Dockerfile
    image: "isaacasante/mcm-client"
    ports:
      - "3000:3000"
    links:
      - "backend"

我的后端文件夹下的 server.js 文件：

var express = require("express");
var cors = require("cors");
var app = express();
var path = require("path");

// Enable CORS and handle JSON requests
app.use(cors());
app.use(express.json());

app.post("/", function (req, res, next) 
  // console.log(req.body);
  res.json( msg: "This is CORS-enabled for all origins!" );
);

// Set router for email notifications
const mailRouter = require("./routers/mail");
const readerRouter = require("./routers/reader");
const notificationsRouter = require("./routers/booking-notifications");
app.use("/email", mailRouter);
app.use("/reader", readerRouter);
app.use("/notifications", notificationsRouter);

if (process.env.NODE_ENV === "production") 
  app.use(express.static("mcm-app/build"));
  app.get("*", (req, res) => 
    res.sendFile(path.join(__dirname, "mcm-app", "build", "index.html"));
  );


app.listen(5000, function () 
  console.log("server starting...");
);

当我跑步时：

docker-compose up

我在终端中得到以下输出：

$ docker-compose up
Starting mcm_fyp_backend_1 ... done
Starting mcm_fyp_frontend_1 ... done
Attaching to mcm_fyp_backend_1, mcm_fyp_frontend_1
backend_1   | server starting...
frontend_1  |
frontend_1  | > mcm-app@0.1.0 start /app/client
frontend_1  | > react-scripts start
frontend_1  |
frontend_1  | ? ?wds?: Project is running at http://172.18.0.3/
frontend_1  | ? ?wds?: webpack output is served from
frontend_1  | ? ?wds?: Content not from webpack is served from /app/client/public
frontend_1  | ? ?wds?: 404s will fallback to /
frontend_1  | Starting the development server...
frontend_1  |
mcm_fyp_frontend_1 exited with code 0

我的后端以代码 0 退出，我无法加载我的应用程序。我的后端正在运行。

我做错了什么，如何让我的 React-Express-Node 应用程序与 Docker Compose 一起运行？

【问题讨论】：

后端应用程序不应运行react-scripts start。您是否在此处包含了完整的设置代码？ （例如，您的本地设置中是否有 volumes: 不在您在此处显示的 docker-compose.yml 中？）

@DavidMaze 是的，我对 react-scripts start 也有同样的想法，但我想这是因为我通过不同的 Dockerfile 将客户端和后端的 package.json 文件复制到 /app ， 正确的？我怎样才能避免这种情况？

@DavidMaze 另外，我没有使用任何volumes。上面的代码是我包含的文件的完整代码。很抱歉省略了您在我之前的回复中提出的问题。

【参考方案1】：

我找到了防止我的前端服务以 0 退出的解决方案。我必须在我的 docker-compose.yml 文件中为其添加tty: true。此外，为了让应用程序中的前端-后端交互按预期工作，我必须将客户端 package.json 中的代理命令更改为以下内容：

"proxy": "http://backend:5000"

我将 docker-compose.yml 中的 links 命令更改为：

links:
  - "backend:be"

重建后，一切都按预期工作。