使用 Docker 一次性运行 React 和 Node.js！

这是我上一篇文章的第二部分。如果你还没读过我的第一篇文章，请务必先阅读，因为它是本部分的基础。

连接并同时运行（第一篇文章）
使用 Docker（本文）

TL;DR | 如果你不了解 Docker，可以直接回头。但是，如果你仍然想读，那就继续阅读吧。

在本文中，我们将探讨使用 Docker 运行 React 和 Node.js 的方式。这是一种高级开发设置，我希望你已经安装并了解Docker和Docker-compose的基础知识。如果你想了解更多关于 Docker 的信息，请访问docker.com。

# 初始设置

$ mkdir awesome_project

这种方法不会污染根文件夹。客户端和服务器将保留在其专用文件夹中。这样，我们可以随时根据需要分离客户端和服务器，而不会破坏任何内容。为了使其正常工作，每个客户端和服务器都应该有一个Dockerfile，并且所有 Dockerfile 都将与 docker-compose 连接。

# 客户端设置 (React)

~ 创建 React 应用

$ cd awesome_project && npx create-react-app client

这将创建一个名为客户端的文件夹，其中包含我们的反应应用程序。

~ React 的 Dockerfile

在客户端Dockerfile文件夹中创建一个文件名并粘贴以下代码。

FROM node:lts-slim

RUN mkdir -p /usr/src/app

WORKDIR /usr/src/app

EXPOSE 3000

CMD [ "npm", "start" ]

这将是我们的 React 应用程序的 docker 镜像指令，我们的 React 应用程序将在其中编译和运行。

# 服务器设置（Node.js）

我们的服务器代码将保存在server根文件夹中的一个名为的文件夹中。在这里，您可以使用 Express 或您选择的任何其他框架来构建服务器。或者，您可以使用此示例快速设置服务器。

~ Node 服务器的 Dockerfile

在服务器Dockerfile文件夹中创建一个。并确保其中包含脚本。如果您运行服务器的脚本不同，您可以更改下面的指令。devpackage.jsonCMDDockerfile

FROM node:lts-slim

RUN mkdir -p /usr/src/app

WORKDIR /usr/src/app

EXPOSE 5000

# You can change this
CMD [ "npm", "run", "dev" ]

# 使用 docker-compose 运行

Docker-compose 帮助我们将多个 Dockerfile 组合并运行到单个网络容器中。在项目根目录docker-compose.yml中创建一个名为的文件并复制以下代码。

version: "3"
services:
    frontend:
        container_name: awesome_web
        build:
            context: ./client
            dockerfile: Dockerfile
        image: vikasraj/awesome_web
        ports:
            - "3000:3000"
        volumes:
            - ./client:/usr/src/app
    backend:
        container_name: awesome_server
        build:
            context: ./server
            dockerfile: Dockerfile
        image: vikasraj/awesome_server
        ports:
            - "5000:5000"
        volumes:
            - ./server:/usr/src/app

最后，我们将得到一个类似这样的文件夹结构。

> awesome_project
    > client # This is our react front-end
        > node_modules
        > src
        - Dockerfile
        - package.json
    > server # This is our Node.js server
        > node_modules
        - index.js
        - Dockerfile
        - package.json
    - docker-compose.yml

最后，您需要更改类似proxy字段client/package.json

{
     "proxy" : "http://backend:5000"
}

backend是 Compose 文件中后端服务的名称

现在我们可以通过运行以下命令来运行我们的项目。这将创建将在容器中运行的docker镜像和卷。

$ docker-compose up

如果您想在启动容器之前构建图像。

$ docker-compose up --build

这可能是一种繁琐的方法，因为你必须具备docker和docker-compose的知识。但它有一些优势：

一个设置适用于所有开发工作流程。
Docker 可以用于任何编程语言。
如果您在 DevOps 中使用 docker，生产部署将会变得轻而易举。
不需要 npm 包（尽管被 docker 取代）。

文章来源：https://dev.to/numtostr/running-react-and-node-js-in-one-shot-with-docker-3o09