带前端框架react的web应用部署到docker容器
build react前端工程
使用npm run build命令打包工程,打包后,在build文件夹下有三个文件,分别为index.html(静态页面)、bundle.js(压缩后的js文件)、zntd.css(引用的样式库)
运行nginx镜像
- docker pull nginx 拉取nginx镜像
- docker run -p 30083:80 -d nginx 创建一个新的容器并在后台运行,将80端口映射为3000
- netstat -anp | grep 3000 查看3000端口的服务有没有跑起来
- docker ps 查看nginx是否在容器中运行起来了,并把nginx的CONTAINER ID记录下来
- 在浏览器中输入服务器ip:3000,看是否可以看到nginx的欢迎页面
将前端工程拷贝到nginx容器中
- 把第一步的三个文件复制到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
- 进入容器:docker exec -it CONTAINER ID /bin/sh
- ls命令查看那几个文件有没有被拷进来,如果拷进来了,就可以直接访问了(访问方式:服务器ip:3000)