Docker 中的 CRA、Node.js、nginx？

Question

我正在开始一个新项目。我目前有一个这样的结构，来自根文件夹：

/app (CRA frontend app) /server (Node.js Express app) Dockerfile docker-compose.yml

我的要求如下：

发展

• 启动 Docker 以创建必要的容器
• 前端 React 应用程序的热重载（使用 CRA）
• Node.js 服务器可以为我的 React 应用提供 SSR（编辑时自动更新）
• 可通过http://localhost:3000 访问

生产

• 可能会启动创建必要容器的 Docker
• 创建 React 应用的生产就绪版本
• 创建 Express 应用的生产就绪版本
• 可通过端口 80 访问

我现在所处的位置介于一切之间。我不知道如何以正确的方式设置 Docker 以使整个工作正常进行，而且我真的不知道在开发时如何构建我的 React 应用程序和 Express 应用程序。一旦我知道如何构建开发部分，生产部分似乎会更容易...... + Nginx 作为 Express 应用程序的代理？

我目前正在构建一个 Docker 容器，它会启动一个正在热重载工作的容器等，但我不知道如何设置 Express 部分，以便它们可以很好地协同工作...？

非常感谢任何帮助。

谢谢

Answer 1

非常广泛的问题。也许最好将其分解为更直接的问题。无论如何，我认为在 Docker 中运行你的开发设置并不理想。相反，通常使用 CRA 构建您的应用程序。然后在 Docker 中部署。

在我自己的项目中，我有一个运行节点服务器的 docker 容器，它使用 SSR 为反应应用程序提供服务。

这里是码头工人部分。请注意，您的 package.json 应该有一个名为 start:prod 的脚本才能正常工作。然后该脚本在生产中启动您的应用程序。

// --- Dockerfile
# Pulled from docker hub and has everything
# needed to run a node project
FROM node:alpine

ENV PORT 3000

# Navigate (cd) to the app folder in the docker container
WORKDIR /usr/src/app

# Copy all package.json / package-lock.json etc. to the root folder
# Executed on build: docker build .
COPY ./package*.json ./

RUN npm i

# copy entire project into docker container
COPY . .

# build front-end with react build scripts and store them in the build folder
RUN npm run build

EXPOSE 3000

CMD ["npm", "run", "start:prod"]

这是将启动服务器的快速服务器。

// -- server.js

import express from "express";
import router from "./controller/index";

const app = express();
const port = 4000;

// Tell the app to use the routes above
app.use(router);

// start the app
app.listen(port, () => {
    console.log(`express running on port ${port}`);
});

这是您需要启动的controller/index.js 文件

// -- controller/index.js
import express from "express";
import path from "path";
import serverRenderer from '../middleware/renderer';

const router = express.Router();

// root (/) should always serve our server rendered page
router.use('^/$', serverRenderer());

// other static resources should just be served as they are
router.use(express.static(
    path.resolve(__dirname, '..', '..', 'build'),
    { maxAge: '30d' },
));

export default router;

最后是在服务器上渲染应用程序的渲染器。

// -- renderer.js

import React from "react";
import { renderToString } from "react-dom/server";
import App from "../../src/App";

const path = require("path");
const fs = require("fs");

export default () => (req, res) => {
    // point to html file created by CRA's build tool
    const filePath = path.resolve(__dirname, "..", "..", "build", "index.html");
    fs.readFile(filePath, "utf8", (error, htmlData) => {
        if (error) {
            console.error("error", error);
            return response.status(404).end();
        }

        // render the app as string
        const html = renderToString(<App />);

        // inject rendered app into final html and send
        return res.send(
            htmlData
                .replace('<div id="root"></div>', `<div id="root">${html}</div>`)
        );
    })
}

您需要bootstrap.js 来注入对某些软件包的支持。

// -- bootstrap.js
require('ignore-styles');
require('url-loader');
require('file-loader');
require('babel-register')({
    ignore: [/(node_modules)/],
    presets: ['es2015', 'react-app'],
    plugins: [
        'syntax-dynamic-import',
        'dynamic-import-node'
    ]
});

require("./index");

您可以在此处找到所有详细信息： https://blog.mytoori.com/react-served-by-express-running-in-docker-container