使用 Docker “创建 React 应用程序”答案

【问题标题】："Create React App" with Docker使用 Docker “创建 React 应用程序”
【发布时间】：2016-08-04 04:11:49
【问题描述】：

我想知道是否有人有使用带有 docker 的 create-react-app 的经验。我能够使用 Dockerfile 来设置它：

from node
RUN mkdir /src
WORKDIR /src
ADD package.json /src/package.json
RUN npm install
EXPOSE  3000
CMD [ "npm", "start" ]

然后使用 docker-compose 文件，如：

app:
  volumes:
    - "./app:/src"
  ports:
    - "3000:3000"
    - "35729:35729"
  build: ./app

这让我可以启动容器并查看应用程序。但是在挂载的卷中保存文件时 livereload 不起作用，并且 webpack 在 src 目录中创建了几个 .json.gzip 文件。

有什么建议可以让它正常工作吗？

【问题讨论】：

我认为 docker 不是您想要的工具。只需在您的机器上使用实时重新加载和您喜欢的其他功能进行开发，并为发布版本或自动测试构建容器/图像...目前尚不清楚为什么您需要 docker 在这里进行开发...
livereload 如果你在 Mac 上使用 Docker，或者在 linux 上使用 docker，那么 livereload 应该可以工作。如果您仍在使用 Docker Toolbox（带有 VM），据报道文件监视通常不起作用。
@dnephin 感谢您将提示切换到 Docker for Mac 并且一切正常。
@aholbreich 我认为您可能是对的，我的想法是将所有内容（包括我正在处理的后端）包装在 docker compose 设置中以处理 CORS，但我认为这可能是矫枉过正。

标签： reactjs docker webpack docker-compose livereload

【解决方案1】：

是的，正如 aholbreich 所提到的，我会在我的机器上本地使用 npm install / npm start 进行开发，只是因为它非常简单。 docker-compose，安装卷等可能也可以，但我认为设置起来可能有点繁琐。

对于部署，您可以非常轻松地使用 Dockerfile。这是我正在使用的示例 Dockerfile：

FROM node:6.9

# Create app directory
RUN mkdir -p /src/app
WORKDIR /src/app

# to make npm test run only once non-interactively
ENV CI=true

# Install app dependencies
COPY package.json /src/app/
RUN npm install && \
    npm install -g pushstate-server

# Bundle app source
COPY . /src/app

# Build and optimize react app
RUN npm run build

EXPOSE 9000

# defined in package.json
CMD [ "npm", "run", "start:prod" ]

您需要将start:prod 选项添加到您的package.json：

"scripts": {
  "start": "react-scripts start",
  "start:prod": "pushstate-server build",
  "build": "react-scripts build",
  "test": "react-scripts test --env=jsdom",
  "eject": "react-scripts eject"
},

您可以通过以下方式在 CI 服务上运行测试：

docker run <image> npm test

没有什么可以阻止您在本地运行此 docker 容器，以确保一切按预期工作。

【讨论】：

我对此投了反对票，因为它没有回答问题。
这怎么不能回答问题？这是一个有用的答案，其中包含“使其正常工作的建议”。

【解决方案2】：

我最近做了一个名为 hello-docker-react 的小项目，它只是做 op 正在寻找的东西。

它由 docker-compose、create-react-app、yarn、一个节点映像和一个小入口点脚本组成。

实时重新加载工作完美无缺，我还没有发现任何问题。

https://github.com/lopezator/hello-docker-react

【讨论】：

【解决方案3】：

这是一个很好的指导 https://mherman.org/blog/dockerizing-a-react-app/

开发

# base image
FROM node:9.6.1

# set working directory
RUN mkdir /usr/src/app
WORKDIR /usr/src/app

# add `/usr/src/app/node_modules/.bin` to $PATH
ENV PATH /usr/src/app/node_modules/.bin:$PATH

# install and cache app dependencies
COPY package.json /usr/src/app/package.json
RUN npm install --silent
RUN npm install react-scripts@1.1.1 -g --silent

# start app
CMD ["npm", "start"]

用于生产

# build environment
FROM node:9.6.1 as builder
RUN mkdir /usr/src/app
WORKDIR /usr/src/app
ENV PATH /usr/src/app/node_modules/.bin:$PATH
COPY package.json /usr/src/app/package.json
RUN npm install --silent
RUN npm install react-scripts@1.1.1 -g --silent
COPY . /usr/src/app
RUN npm run build

# production environment
FROM nginx:1.13.9-alpine
COPY --from=builder /usr/src/app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

【讨论】：

你将如何区分 dev 和 prod 的 docker 文件？用不同的名字？
是的，名称或不同的文件夹

【解决方案4】：

在通过 create-react-app 在开发中使用 docker 时，我发现可以通过在 .env 文件中添加 CHOKIDAR_USEPOLLING=1 来覆盖 webpackDevServer 配置。这将使文件监视再次工作。它甚至会刷新主机上的浏览器页面！我唯一发现的是它不会自动打开网页。

我还可以建议将tty: true 添加到您的服务中，以便将原始控制台输出返回到您的终端。要删除日志中的容器名称前缀，您可以在运行 docker-compose up -d 后运行类似这样的内容：

docker-compose logs -f --tail=100 client | cut -f2 -d \"|\""

【讨论】：

【解决方案5】：

使用 CRA 4.0 和许多依赖项运行

.dockerignore

.git
.gitignore
node_modules
build

Dockerfile.dev

FROM node:alpine

WORKDIR /app

COPY package.json /app

RUN yarn install

COPY . .

CMD ["yarn", "start"]

docker-compose.dev.yml

version: "3.8"
services:
  print:
    stdin_open: true
    build:
      context: .
      dockerfile: Dockerfile.dev
    ports:
      - "3000:3000"
    volumes:
      - ".:/app"
      - "/app/node_modules"

Dockerfile.prod

FROM node:alpine as build

WORKDIR /app

COPY package.json /app

RUN yarn install

COPY . /app

RUN yarn run build

FROM nginx:stable-alpine
COPY ./nginx/nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=build /app/build /usr/share/nginx/html

docker-compose.prod.yml

version: "3.8"
services:
  print:
    stdin_open: true
    build:
      context: .
      dockerfile: Dockerfile.prod
    ports:
      - "80:80"

nginx.conf

server {  
  listen 80;
  server_name frontend;
  location / {
    root /usr/share/nginx/html;
    index index.html;
    try_files $uri /index.html;
  }
}

运行

docker-compose.exe -f .\docker-compose.yml up --build

或

docker-compose.exe -f .\docker-compose.dev.yml up --build

【讨论】：

【解决方案6】：

不完全是作者代码的直接改进，但我能够使用很少的代码获得一个开发环境 - 并且不直接依赖于我机器上的节点 - 就像这样：

docker-compose.yml

services:
  node:
    image: node:16
    user: "node"
    command: "npm start"
    working_dir: /app
    volumes:
      - ./:/app
    ports:
      - 3000:3000

这样，您可以避免从 Dockerfile 创建 docker 映像。

用法一般是这样的：

运行前安装依赖：docker compose run node npm install
运行开发环境：docker compose up
安装新的依赖：docker compose run node npm install [package name]
清理使用compose run创建的docker实例：docker compose rm

【讨论】：