【问题标题】:node and react running with docker-compose.yml file节点并使用 docker-compose.yml 文件反应运行
【发布时间】:2019-02-23 12:18:59
【问题描述】:

我有一个示例应用程序,我正在使用 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 文件。如何根据环境使用相同的文件但不同的 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 它将需要而不是运行节点 index.js,但在生产中,如果我不提及任何 NODE_COMMAND,它将只需要节点 index.js。

5) 我是否需要每个客户端和服务器的 Dockerfile 中的 CMD,因为当我运行 docker-compose up 时,它将接受 docker-compose.yml 的命令。所以我认为优先级将来自 docker-compose.yml 文件。是吗?

6) docker-compose.yml 文件中需要卷的用途是什么?

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"

我可以重构什么,

任何帮助表示赞赏。

【问题讨论】:

  • 如果将其拆分为几个较小的问题,这将更容易回答。有些问题(如#5 和#6)你应该可以通过docs.docker.com 上的信息来回答。
  • 肯定会拆分那个,但我可以知道其他问题的解决方案

标签: docker jenkins docker-compose


【解决方案1】:

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

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


2) 同样,当我执行 sudo docker-compose up 时,它运行良好,但显示“使用 npm run build 创建生产构建”,基于 env 我该如何更改这个。我是否需要为每个环境创建不同的 docker-compose.yml 文件。如何根据环境使用相同的文件但不同的 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它需要而不是运行节点 index.js,但在生产中,如果我不提及任何 NODE_COMMAND,它将只需要节点 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并让nodejs通过localhost访问


8) 当我们创建一个容器时,我们有 3000、3001 之类的端口......所以容器端口和我们的应用程序端口如何匹配,通过使用 docker-compose.yml 中的导出环境和端口文件会解决这个问题吗?

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


更多详情:

【讨论】:

  • 感谢您的回复。因此,如果我托管一个在端口 3001 中运行的模拟服务器,那么我如何从服务器文件夹中调用 3001。当我尝试调用localhost:3001/data 时,我收到错误连接被拒绝错误。由于我们在容器中运行,因此无法访问原始 localhost:3001 端口。我该如何解决这个问题
  • 你需要通过docker进行端口映射,例如3001 -> 3000,所以当你从宿主机通过3001访问应用程序时,它会与容器上的3000对话,获取你需要的数据,但请确保应用程序本身实际上在端口 3000 上运行
  • 我有一个在 3000 中运行的客户端,我有一个在 4000 中运行的服务器节点 js。我有一个在 3001 中运行的节点模拟服务器。所以在我的 index.js 的服务器中我正在调用 fetch("localhost:3001/api/data")。我不希望将此模拟服务器添加到 docker-compose.yml 中,此模拟服务器用于 api 测试
  • 模拟服务器与您使用 docker-compose 的 docker 主机相同?
  • 当我遇到那个 api 时,我得到的响应是错误连接被拒绝?所以从docker容器我怎么能调用那个实际的模拟服务器api。如果 istart 在没有 docker 的情况下正常启动,我能够得到响应
【解决方案2】:

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

(如:http://localhost:5000/api 应改为/api),

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

PS:如果没有条目,请添加

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

到 package.json,('server' 是您在 docker-compose 文件中的 express 应用容器名称)

终于成功了。如果它可以帮助其他人,想分享这个

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多