如何使用create-react-app进行Docker操作

173 阅读4分钟

就在最近,我不得不使用Docker来开发我的create-react-app网络应用程序。在这里,我想给大家简单介绍一下如何实现它。首先,我们需要一个React应用。你可以自己用create-react-app创建一个React应用,或者按照这个React MacOS设置指南或这个React Windows设置指南

注意:如果你使用的是自定义的React设置(例如React与Webpack),而不是create-react-app,请查看这个Docker与React教程。

在你设置好你的 create-react-app 项目之后,在http://localhost:3000 上访问它,看看渲染好的 React 应用。一切都应该按预期进行。现在,我们将使用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 3000

# 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 images

REPOSITORY                       TAG                 IMAGE ID            CREATED             SIZE
<username>/my-react-app          latest              036d38e931e4        5 minutes ago       153MB
node                             alpine              532fd65ecacd        9 days ago          113MB
hello-world                      latest              fce289e99eb9        13 months ago       1.84kB

如果这个命令之后的输出显示*"无法连接到位于unix://var/run/docker.sock的Docker守护进程。docker守护进程正在运行吗?"*,你需要确保所有与Docker相关的东西都已设置好并正常运行。即使在用docker-machine ls 打印所有Docker引擎时运行正常,你也可能需要再次为Docker引擎设置环境变量。

如果Docker镜像的构建运行成功,你应该可以用以下命令列出你的镜像。

docker images
REPOSITORY                       TAG                 IMAGE ID            CREATED             SIZE<username>/my-react-app          latest              036d38e931e4        5 minutes ago       153MBnode                             alpine              532fd65ecacd        9 days ago          113MBhello-world                      latest              fce289e99eb9        13 months ago       1.84kB

这个Docker镜像是你在Docker容器中运行一个Docker应用程序所需要的一切。一个Docker镜像可以用来启动多个Docker容器,这有助于横向扩展应用程序的规模,或以不同的容器配置来运行应用程序。现在,我们将只在这个Docker镜像的基础上运行一个Docker容器。

docker run --name my-react-app -p 4680:3000 -d <username>/my-react-app

这个命令用一个特定的名字、两个端口的映射和一个Docker镜像创建并运行一个Docker容器。即使Dockerfile定义了一个特定的端口,我们也可以为这个特定的Docker容器将其重定向到一个自定义端口。在创建并运行基于Docker镜像的Docker容器后,我们应该能够列出所有的Docker容器。

docker ps
CONTAINER ID        IMAGE                       COMMAND                  CREATED             STATUS              PORTS                         NAMESab03066fb631        <username>/my-react-app     "docker-entrypoint.s…"   9 minutes ago       Up 9 minutes        0.0.0.0:4680->3000/tcp/tcp   my-react-app

在我们能够在浏览器中访问我们的应用程序之前,我们需要找出我们运行的Docker引擎的IP地址。

docker-machine ip default
-> 192.168.99.100

最后你应该能够访问http://192.168.99.100:4680 。请注意,你的IP地址和端口可能会有所不同。恭喜你,你已经在Docker容器中发布了你的第一个create-react-app网络应用。