就在最近，我不得不使用Docker来开发我的React网络应用程序。在这里，我想给大家简单介绍一下如何实现它。首先，我们需要一个React应用。要么自己创建一个React应用，要么按照这个最小的React与Webpack设置指南。React + Webpack应用程序也可以在GitHub上找到。
注意：如果你使用create-react-app，而不是自定义的React设置（例如React与Webpack），请查看这个Docker与create-react-app教程。
在你设置好你的React项目后，在http://localhost:8080 ，看看渲染好的React应用。一切都应该按预期进行。
在我们继续使用Docker之前，我们需要修改package.json中的一行，以启动Webpack开发服务器。如果你想让开发服务器对外界开放，那么主机必须被指定为0.0.0.0，也就是说：让Docker访问它。
"start": "webpack --host 0.0.0.0 --config ./webpack.config.js --mode development",
现在，我们将使用Docker镜像在Docker容器中运送这个React应用程序。首先，创建一个所谓的Dockerfile。
touch Dockerfile
并在Dockerfile中输入以下内容：
# Docker Image which is used as foundation to create
# a custom Docker Image with this Dockerfile
FROM node:10
# A directory within the virtualized Docker environment
# Becomes more relevant when using Docker Compose later
WORKDIR /usr/src/app
# Copies package.json and package-lock.json to Docker environment
COPY package*.json ./
# Installs all node packages
RUN npm install
# Copies everything over to Docker environment
COPY . .
# Uses port which is used by the actual application
EXPOSE 8080
# Finally runs the application
CMD [ "npm", "start" ]
这个Dockerfile中的所有内容都会被Docker解释器逐行读取。最后，它是创建适合你的应用程序的自定义Docker镜像的蓝图。我们在这里使用的基础镜像（这里是FROM ）确保所有Node/npm命令在Docker文件中可用。否则，如果使用一个不相关的Node镜像，我们将需要在Dockerfile中自己安装Node，然后才能使用Node的特定命令。
可以选择创建一个*.dockerignore文件，将文件夹和文件从Docker进程中排除。例如，node_modules不需要包含在Docker镜像中，因为它们将被安装在npm install （见Dockerfile）的进程中。因此，.dockerignore*文件的内容可以是。
node_modules
接下来，在官方Docker Hub上创建一个账户。之后，你应该有一个Docker Hub用户名，可以用来构建你的第一个Docker镜像。
docker build -t <username>/my-custom-react-app .
如果这个命令之后的输出显示*"无法连接到位于unix://var/run/docker.sock的Docker守护进程。docker守护进程正在运行吗？"*，你需要确保所有与Docker相关的东西都已设置好并正常运行。即使在用docker-machine ls 打印所有Docker引擎时运行正常，你也可能需要再次为Docker引擎设置环境变量。
如果Docker镜像的构建运行成功，你应该可以用以下命令列出你的镜像：
docker images
REPOSITORY TAG IMAGE ID CREATED SIZE
<username>/my-custom-react-app latest 036d38e931e4 5 minutes ago 153MB
node alpine 532fd65ecacd 9 days ago 113MB
hello-world latest fce289e99eb9 13 months ago 1.84kB
这个Docker镜像是你在Docker容器中运行一个Docker应用程序所需要的一切。一个Docker镜像可以用来启动多个Docker容器，这有助于横向扩展应用程序的规模，或以不同的容器配置来运行应用程序。现在，我们将只在这个Docker镜像的基础上运行一个Docker容器。
docker run --name my-custom-react-app -p 4680:8080 -d <username>/my-custom-react-app
这个命令用一个特定的名字、两个端口的映射和一个Docker镜像创建并运行一个Docker容器。即使Dockerfile定义了一个特定的端口，我们也可以为这个特定的Docker容器将其重定向到一个自定义端口。在创建并运行基于Docker镜像的Docker容器后，我们应该能够列出所有的Docker容器。
docker ps
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
ab03066fb631 <username>/my-custom-react-app "docker-entrypoint.s…" 9 minutes ago Up 9 minutes 0.0.0.0:4680->8080/tcp/tcp my-custom-react-app
在我们能够在浏览器中访问我们的应用程序之前，我们需要找出我们运行的Docker引擎的IP地址。
docker-machine ip default
-> 192.168.99.100
最后你应该能够访问http://192.168.99.100:4680 。注意，你的IP地址和端口可能会有所不同。恭喜你，你已经在Docker容器中发布了你的第一个React网络应用。
