节点和反应运行与 docker-compose.yml 文件

Question

我有一个示例应用程序，我使用的是 nodejs 和 reactjs，所以我的项目文件夹由客户端和服务器文件夹组成。 客户端文件夹是使用 create-react-app 创建的。

我为每个文件夹创建了两个 Dockerfile，并且我在项目的根目录上使用了 docker-compose.yml。

一切正常。 现在我只想托管这个应用程序。 我正在尝试使用詹金斯。

因为我对 devops 知之甚少。 我有些疑惑

1) 如果我为客户端使用两个 docker 文件并做出反应，并且它是由 docker-compose.yml 启动的，它会在两个不同的容器中运行还是在单个容器中运行？ 从我读过的内容来看，我认为这将需要两个容器，即使用 docker-compose.yml 文件。 对此有点困惑？

2) 同样，当我执行 sudo docker-compose up 时，它运行得很好，但它显示“使用 npm run build 创建生产构建”，基于 env 如何更改这个。 我是否需要为每个环境创建不同的 docker-compose.yml 文件。 如何基于 env 使用相同的文件但不同的 npm start 或 npm run build ？

3）我可以使用 docker-compose.yml 文件在 jenkins 中构建管道还是我需要在项目根目录中使用 Dockerfile。 我见过大多数项目都有一个 Dockerfile。 是不是我不能使用 docker-compose.yml 来托管应用程序？

4）为什么我在 docker-compose.yml 文件的 Command 属性中为服务器使用 NODE_COMMAND 是因为当我在本地运行应用程序时我需要自动重新加载，所以在终端中如果我放置 NODE_COMMAND = nodemon 它将需要而不是运行node index.js 但在生产中，如果我没有提到任何 NODE_COMMAND，它将只需要 node index.js。

5) 我是否需要每个客户端和服务器的 Dockerfile 中的 CMD，因为当我运行 docker-compose up 时，它将采用 docker-compose.yml 的命令。 所以我认为优先级将从 docker-compose.yml 文件中获取。 是吗 ？

6) docker-compose.yml 文件中是否需要使用volumes？

7) 在 env 文件中，我使用 API_HOST 和 APP_SERVER_PORT 它是如何在内部使用 package.json 的？ 它在做代理的事情。 当我们需要访问 nodejs 时，我们通常会给出 "proxy": " http://localhost:4000 "，但这里将如何获取http://server:4000 。 这东西如何运作？

8）当我们创建一个容器时，我们有像 3000、3001 这样的端口......所以容器端口和我们的应用程序端口如何匹配，通过使用 docker-compose.yml 文件中的导出环境和端口将处理这些?

请看下面的文件夹结构

movielisting
   client
     Dockerfile
     package.json
     package.lock.json
     ... other create-react-app folders like src..
   server
     Dockerfile
     index.js
   docker-compose.yml
   .env

Dockerfile -- 客户端

FROM node:10.15.1-alpine

#Create app directory and use it as the working directory
RUN mkdir -p /srv/app/client
WORKDIR /srv/app/client

COPY package.json /srv/app/client
COPY package-lock.json /srv/app/client

RUN npm install

COPY . /srv/app/client

CMD ["npm", "start"]

Dockerfile -- 服务器

FROM node:10.15.1-alpine

#Create app directory
RUN mkdir -p /srv/app/server
WORKDIR /srv/app/server

COPY package.json /srv/app/server
COPY package-lock.json /srv/app/server

RUN npm install

COPY . /srv/app/server

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

docker-compose.yml -- 项目根目录

version: "3"

services:
  #########################
  # Setup node container
  #########################
  server:
    build: ./server
    expose:
      - ${APP_SERVER_PORT}
    environment:
      API_HOST: ${API_HOST}
      APP_SERVER_PORT: ${APP_SERVER_PORT}
    ports:
      - ${APP_SERVER_PORT}:${APP_SERVER_PORT}
    volumes:
      - ./server:/srv/app/server
    command: ${NODE_COMMAND:-node} index.js

    ##########################
    # Setup client container
    ##########################

  client:
    build: ./client
    environment:
      - REACT_APP_PORT=${REACT_APP_PORT}
    expose:
      - ${REACT_APP_PORT}
    ports:
      - ${REACT_APP_PORT}:${REACT_APP_PORT}
    volumes:
      - ./client/src:/srv/app/client/src
      - ./client/public:/srv/app/client/public
    links:
      - server
    command: npm run start

.env

API_HOST="http://localhost:4000"
APP_SERVER_PORT=4000
REACT_APP_PORT=3000

package.json -- 客户端

"proxy": "http://server:4000"

我可以重构什么，

任何帮助表示赞赏。

Answer 1

1）如果我为客户端使用两个 docker 文件并做出反应，并且它是由 docker-compose.yml 启动的，它会在两个不同的容器中运行还是在一个容器中运行？ 从我读过的内容来看，我认为这将需要两个容器，即使用 docker-compose.yml 文件。 对此有点困惑？

每个 dockerfile 都会构建一个 docker 镜像。 所以最后你会有两张图片，一张用于反应应用程序，另一张用于后端，即 nodejs 应用程序

---

2) 同样，当我执行 sudo docker-compose up 时，它运行良好，但显示“使用 npm run build 创建生产构建”，基于 env 如何更改此构建。 我是否需要为每个环境创建不同的 docker-compose.yml 文件。 如何基于 env 使用相同的文件但不同的 npm start 或 npm run build ？

您需要按照 Dockerfile 中的步骤构建 react 应用程序，以便能够将其用作普通应用程序。 您也可以使用环境变量在构建期间使用build-args自定义图像，例如传递自定义路径或其他任何内容。

---

3）我可以使用 docker-compose.yml 文件在 jenkins 中构建管道还是我需要在项目根目录中使用 Dockerfile。 我见过大多数项目都有一个 Dockerfile。 是不是我不能使用 docker-compose.yml 来托管应用程序？

如果您将 dockerfile(s) 与 jenkins 一起使用以构建图像并保留 docker-compose.yml 文件以在不使用 build 关键字的情况下部署应用程序本身会更好

---

4）为什么我在 docker-compose.yml 文件的 Command 属性中为服务器使用 NODE_COMMAND 是因为当我在本地运行应用程序时我需要自动重新加载，所以在终端中如果我放置 NODE_COMMAND = nodemon 它将需要而不是运行node index.js 但在生产中，如果我没有提到任何 NODE_COMMAND，它将只需要 node index.js。

在 docker-compose.yml 文件中使用command将覆盖在构建步骤中设置的 dockerfile 的CMD

---

5) 我是否需要每个客户端和服务器的 Dockerfile 中的 CMD，因为当我运行 docker-compose up 时，它将采用 docker-compose.yml 的命令。 所以我认为优先级将从 docker-compose.yml 文件中获取。 是吗 ？

一般来说是的，你需要它，但是只要你想从 docker-compose 文件中覆盖它，你就可以将它添加为CMD ["node", "--help"]或其他东西

---

6) docker-compose.yml 文件中是否需要使用volumes？

如果您在容器之间共享文件或需要在主机上保留数据，则需要卷

---

7) 在 env 文件中，我使用 API_HOST 和 APP_SERVER_PORT 它是如何在内部使用 package.json 的？ 它在做代理的事情。 当我们需要访问 nodejs 时，我们通常会给出 "proxy": " http://localhost:4000 "，但在这里它将如何使用http://server:4000 。 这东西如何运作？

server是启动应用程序后 docker 网络中 nodejs 容器的别名。 为什么命名server ？ 因为你在这部分的 docker-compose.yml 文件中有它：

services:
  server:

但是当然您可以通过在 docker-compose.yml 文件中的network关键字中添加别名来更改它

注意：React 本身是一个客户端，这意味着它通过浏览器本身工作，因此它无法通过 docker 网络联系 nodejs 应用程序，您可以使用 ip 本身或使用localhost并通过localhost访问 nodejs

---

8）当我们创建一个容器时，我们有像 3000、3001 这样的端口......所以容器端口和我们的应用程序端口如何匹配，通过使用 docker-compose.yml 文件中的导出环境和端口将处理这些?

Docker 本身不知道您的应用程序正在使用哪个端口，因此您必须让它们都使用相同的端口。 在 nodejs 中，这可以通过使用环境变量来实现

---

更多细节：

• https://docs.docker.com/engine/reference/commandline/build/#set-build-time-variables---build-arg
• https://docs.docker.com/compose/networking/
• https://docs.docker.com/compose/compose-file/#aliases
• https://docs.docker.com/compose/compose-file/#command
• https://facebook.github.io/create-react-app/docs/deployment

Answer 2

如果任何人在连接 react 和 express 时遇到问题，请确保客户端代码中没有本地主机附加到服务器 api 地址

（例如：http://localhost:5000/api 应该改为/api），

因为代理条目在 package.json 文件中。

PS：如果没有条目，请添加

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

到 package.json，（'server' 是您在 docker-compose 文件中的快速应用容器名称）

终于让它工作了。 如果它对其他人有帮助，就考虑分享它