基于docker容器的ReactJs开发

如何使用docker容器在windows上使用docker开发Reactjs

到目前为止，我已经能够运行我的应用程序，但livereload无法运行

应用程序/结构

• 建造
• 节点单元
• 公开的
• src
• docker-compose.yml
• Dockerfile

Dockerfile

FROM node:5.11.0-slim

# Prepare app directory
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app/

# Install dependencies
COPY package.json /usr/src/app/
RUN npm install --silent

ADD . /usr/src/app/

CMD [ "npm", "start" ]

docker-compose.yml：

version: "2"

services:
  frontend:
    container_name: "boilerplate"
    build: .
    environment:
      env_file: .env
      NODE_ENV: development
    ports:
      - '3000:3000'
    volumes:
      - .:/usr/src/app

这是Windows的一个已知限制（不要太担心，有一个很好的解决方法） 。以下是政府对这个问题的看法：

共享驱动器上的inotify不起作用

目前，inotify在Docker for Windows上不起作用。这将 例如，当应用程序需要读/写时变得明显 通过已安装的驱动器连接到容器。而不是依靠 文件系统inotify，我们建议为您的应用程序使用轮询功能 框架或编程语言

• nodemon和Node.js的解决方法-如果您将nodemon与Node.js一起使用，请尝试下面介绍的回退轮询模式：
• GitHub上的Windows Docker问题-请参阅问题

---

解决办法 但是，解决方法是使用轮询机制：

• -node.js fs.watch/fs.watchFile/fsevents的整洁包装
• -监视node.js应用程序中的任何更改，并自动重新启动服务器-非常适合开发
• -如果观看不适合您，请尝试轮询选项。在VirtualBox中，监视不适用于NFS和计算机
• 等等

---

完成Docker&React设置 就你的情况而言，我从Docker容器开始，livereload功能非常完美。通过创建.env配置文件，可以实现该目标

以下是我的配置（）：

Dockerfile

FROM node:6.9.4

# Prepare app directory
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app/

# Install dependencies
COPY package.json /usr/src/app/
RUN npm install --silent

ADD . /usr/src/app/

EXPOSE 3000
CMD [ "npm", "start" ]

docker compose.yml

version: "2"

services:
  frontend:
    container_name: "boilerplate"
    build: .
    environment:
      env_file: .env
      NODE_ENV: development
    ports:
      - '3000:3000'
    volumes:
      - .:/usr/src/app

.env

CHOKIDAR_USEPOLLING=true

剧本

• docker compose up-d

  -启动您的项目，该项目将在上提供

• docker compose run--rm-boilerplate/bin/bash

  -访问您的容器

---

当应用程序在容器中运行时，livereload有时不起作用，如果项目在虚拟机（如（由流浪者配置的）VirtualBox中运行，则在项目目录中创建一个.env文件（如果不存在），并将CHOKIDAR_USEPOLLING=true添加到该文件中。这可以确保下次运行npm start时，观察者在VM内使用轮询模式（如有必要）。

您不需要在dockerfile中公开或添加，因为您在compose中有它们。livereload监视的路径是什么？很好，我将在此处删除：）我想监视/srcI没有使用livereload，但看起来您需要设置server.watch（“/usr/src/app”），或者使用nodemon代替node，不需要任何额外设置即可进行实时重新加载。@ChrisTanner，nodemon为我工作：）但有点慢：（非常感谢你的邀请answer@BrunoReis你如何编辑你的代码？你使用git吗？酷！在运行上述容器（例如在centos7虚拟机内）时，如何将vscode与git集成？我可以使用ssh连接到此虚拟机并使用映射卷，但这会破坏所有容器的优点。这是我所不知道的，也是我的经验。答案是专注于在您的操作系统上本地运行Docker，以便开发人员拥有一个可复制的开发环境。我在.env中使用nodemon和CHOKIDAR_USEPOLLING=true进行了配置，它工作了，但我的虚拟机在分析更改时消耗了100%的CPU，有其他解决方案吗？