docker容器上的ReactJs开发

Question

如何使用 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

Answer 1

这是 Windows 的一个已知限制(不要太担心，有一个很好的解决方法)

This is a known limitation for Docker on Windows host .这是Docker's documentation谈到问题:

inotify on shared drives does not work

Currently, inotify does not work on Docker for Windows. This will become evident, for example, when an application needs to read/write to a container across a mounted drive. Instead of relying on filesystem inotify, we recommend using polling features for your framework or programming language.

• Workaround for nodemon and Node.js - If you are using nodemon with Node.js, try the fallback polling mode described here: nodemon isn’t restarting node applications
• Docker for Windows issue on GitHub - See the issue Inotify on shared drives does not work

---

解决方法

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

• chokidar - node.js fs.watch/fs.watchFile/fsevents 的简洁包装器。
• nodemon - 监控 node.js 应用程序中的任何更改并自动重启服务器 - 非常适合开发。
• webpack - 如果观看对您不起作用，请尝试投票选​​项。观看不适用于 NFS 和 VirtualBox 中的机器。
• 等等……

---

完成 Docker 和 React 设置

为了你的情况，我已经开始 react-create-app在 Docker 容器中，livereload 功能完美运行。问题是 enable chokidar polling通过创建 .env 配置文件。

这是我的配置(inspired by @haluvibe):

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 - 启动您的项目，它将在 http://localhost:3000 上可用.
• docker-compose run --rm 样板/bin/bash - 访问您的容器。