我如何在开发模式下运行这个 dockerized 应用程序？

Question

前端是用 create-react-app 制作的，后端是带有 Firebase 的 Node.js。 这是我的文件夹结构：

my-app
├── docker-compose.yml
├── client
│   ├── Dockerfile
│   ├── package.json
├── server
│   ├── Dockerfile
│   ├── package.json

docker-compose.yml

version: "3.8"
services:
  client:
    container_name: client
    build: ./client
    ports:
      - "3000:3000"
    tty: true

  server:
    container_name: server
    build: ./server
    ports:
      - "5000:5000"

client/package.json

{
  "name": "react-ui",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.19.2",
    "node-sass": "^4.14.1",
    "normalize.css": "^8.0.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-redux": "^7.2.1",
    "react-scripts": "^3.4.1",
    "redux": "^4.0.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "proxy": "http://server:5000",
  "secure": false
}

客户端/Dockerfile

FROM node:lts

WORKDIR /client

COPY package*.json /client/

RUN npm install

COPY . /client/

RUN npm run build

EXPOSE 3000

CMD [ "npm", "start" ]

server/package.json

{
  "name": "snake-react-node",
  "version": "3.0.0",
  "engines": {
    "node": "10.x"
  },
  "scripts": {
    "start": "node ./build/index.js",
    "build": "tsc",
    "dev": "nodemon ./src/index.ts"
  },
  "dependencies": {
    "@types/express": "^4.17.7",
    "cors": "^2.8.5",
    "dotenv": "^8.2.0",
    "express": "^4.17.1",
    "firebase-admin": "^9.0.0",
    "moment": "^2.27.0",
    "rimraf": "^3.0.2",
    "ts-node-dev": "^1.0.0-pre.56",
    "typescript": "^3.9.7"
  },
  "license": "MIT",
  "devDependencies": {
    "nodemon": "^2.0.4",
    "npm-run-all": "^4.1.5"
  }
}

服务器/Dockerfile

FROM node:lts

WORKDIR /server

COPY package*.json /server/

RUN npm install

COPY . /server/

RUN npm run build

EXPOSE 5000

CMD [ "npm", "start" ]

当我在根目录上运行 docker-compose up 时，会创建两个图像和两个容器，每个容器一个 Dockerfile。该应用程序完美运行并创建了生产版本，但我也希望能够使用 Docker 进行开发，并进行实时重新加载

Answer 1

由于您的server 容器将ports: 发布出去，您可以更改package.json 文件中的代理设置以指向此。在你的非 Docker 主机开发环境中，设置

"proxy": "http://localhost:5000"

然后您可以npm run dev 拥有一个完全普通的本地实时重载开发服务器，针对您在 Docker 中运行的后端服务。

尝试在 Docker 容器中模拟本地开发环境并没有真正的技术优势，尤其是对于基于浏览器的应用程序。典型的基于 Webpack 的构建工具链没有需要特殊设置的复杂原生依赖项，而且由于应用程序本身在浏览器中运行，它无法利用 Docker 网络，并且容器本身不提供任何应用程序的运行时环境。因此，在主机上运行开发服务器与在容器中运行开发服务器的唯一真正区别是 Webpack 构建使用的是哪个版本的 Node，希望这对您的应用程序没有实质性差异。

Answer 2

您可以使用绑定卷挂载进行开发实时重新加载。制作另一个开发组合文件，如 docker-compose-dev.yml 并添加 volumes: 部分。

每当使用您喜欢的 IDE 在主机上更改代码时，容器都会将其拾取并进行热重载。

注意：我没有测试过这个设置。只是建议你可以做的事情。

#docker-compose-dev.yml

version: "3.8"
services:
  client:
    container_name: client
    build: ./client
    volumes:
      - ./frontend-src:/client/src
    ports:
      - "3000:3000"
    tty: true

  server:
    container_name: server
    build: ./server
    ports:
      - "5000:5000"