React 应用程序未使用 docker-compose 加载 [英] React app not loading with docker-compose
问题描述
我的 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
我在终端中得到以下输出:
I get the following output in my terminal:
$ 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,我无法加载我的应用.不过我的后端正在运行.
My backend exits with code 0, and I can't load my app. My backend is running though.
我做错了什么,如何让我的 React-Express-Node 应用与 Docker Compose 一起运行?
What am I doing wrong, and how can I get my React-Express-Node app running with Docker Compose?
推荐答案
我找到了防止前端服务以 0 退出的解决方案.我不得不在我的 tty: true
中添加它强>docker-compose.yml 文件.此外,为了使应用程序中的前端-后端交互按预期工作,我必须将客户端 package.json 中的代理命令更改为以下内容:
I found the solution to prevent my frontend service from exiting with 0. I had to add tty: true
for it in my docker-compose.yml file. Also, to make the frontend-backend interaction work as expected in the app, I had to change my proxy command in my client's package.json to the following:
"proxy": "http://backend:5000"
并且我将 docker-compose.yml 中的 links
命令更改为:
And I changed my links
command in my docker-compose.yml to this:
links:
- "backend:be"
重建后,一切都按预期工作.
After rebuilding, everything is working as intended.
这篇关于React 应用程序未使用 docker-compose 加载的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!