带前端框架react的web应用部署到docker容器

build react前端工程

使用npm run build命令打包工程，打包后，在build文件夹下有三个文件，分别为index.html(静态页面)、bundle.js(压缩后的js文件)、zntd.css(引用的样式库)

运行nginx镜像

1. docker pull nginx 拉取nginx镜像
2. docker run -p 30083:80 -d nginx 创建一个新的容器并在后台运行，将80端口映射为3000
3. netstat -anp | grep 3000 查看3000端口的服务有没有跑起来
4. docker ps 查看nginx是否在容器中运行起来了，并把nginx的CONTAINER ID记录下来
5. 在浏览器中输入服务器ip:3000，看是否可以看到nginx的欢迎页面

将前端工程拷贝到nginx容器中

1. 把第一步的三个文件复制到nginx镜像运行的容器中，具体步骤如下：

    docker cp index.html CONTAINER ID://usr/share/nginx/html
    docker cp bundle.js CONTAINER ID://usr/share/nginx/html
    docker cp zntd.css CONTAINER ID://usr/share/nginx/html

2. 进入容器：docker exec -it CONTAINER ID /bin/sh
3. ls命令查看那几个文件有没有被拷进来，如果拷进来了，就可以直接访问了（访问方式：服务器ip:3000)