当前位置: 首页 > 知识库问答 >
问题:

React应用程序未加载docker compose

赵飞雨
2023-03-14

我的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"]

我的码头工人。项目根目录中的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"

我的服务器。我的后端文件夹下的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 Comment一起运行?

共有1个答案

吴凯泽
2023-03-14

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

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

我改变了我的链接命令在我的docker-compose.yml:

links:
  - "backend:be"

重建后,一切都按计划进行。

 类似资料:
  • 在我的项目中,我想使用特定于环境的属性文件。例如,如果我在开发中运行它,它应该使用应用程序。dev.properties,对于生产,它应该使用应用程序。产品属性等等。 我有下面两个文件在我的资源文件夹。 application.properties(用于生产) application.dev.properties(用于开发) 我有一个属性像下面的每个文件。 为了刺激 给德夫 我有一门课,如下所示

  • 我试图在Docker中使用Create React App和Node js设置一个开发环境。但当我更改代码时,它不会重新加载更改 通常只使用卷就足够了,但我还添加了:CHOKIDAR\u USEPOLLING=true in ENV,正如create react app官方文档所说,我将代码移到了WSL,因为我在Windows 10上,但仍然是一样的。我用create react app创建了另一

  • 我将遵循以下教程: https://blog.expo.io/building-a-react-native-app-using-expo-and-typescript-part-1-a81b6970bb82 我和我的手机(Android)在同一个网络上。没有VPN。我在我的应用程序的根文件夹中。它说所以我知道它正在运行。 防火墙也为此关闭,这不是超时错误。 当我扫描二维码时: 我有什么问题? 编

  • 我真的很讨厌instagram应用内浏览器。它显示的内容几乎不同于所有普通浏览器。出于某种原因,我的图像无法加载。 我的网站链接到其他网站的图像。但是这些图像没有扩展。(不确定这是否是问题所在) 这些图片不会加载到instagram应用程序内浏览器中。但在所有其他浏览器中,图像加载没有问题。 此外,我的网站是https,而图像是HTTP。不确定这是否有影响。 有没有办法在instagram应用内浏

  • 我正在尝试在我的多租户应用程序中实现假客户概念。我有两个微服务。在其中一个微服务中,我编写了从数据库获取数据的API。我需要在我的其他微服务中使用这些数据。为此,我使用了假客户概念。我需要第二个微服务加载期间的数据。但这并没有发生。我有以下错误 这是我的基于数据源的MultitenantConnectionProviderImpl。类,我在其中编写了伪客户机逻辑 这是一个虚拟客户端。我将第二个微服

  • 我正在将webapp中使用的spring框架版本从3.1.4升级到4.1.8。在新的Spring版本中,我们的一些单元测试失败了,因为@AutoWired不再工作。这是失败的测试之一: } 这是math-application-context文件: 我还尝试使用应用程序上下文加载bean,但失败了,出现了以下异常: 如果删除autowired字段,测试将失败,并且通过超类中的应用程序上下文加载的另