回顾上期,明哥打包好了一个前端镜像
第一期内容回顾:https://www.jianshu.com/p/d7718adee07e
docker容器内运行vue项目:
1.找到上回我们打包好的镜像,启动!
docker run -it -p3000:80 my_vue:2.0 /bin/bash
-p:端口映射:主机(宿主)端口:容器端口
我们访问服务器的3000端口实际上是访问容器的80端口
2. 容器内打包vue项目
还有印象的小伙伴应该记得test2是我们上次clone的vue项目
执行npm run build 得到dist文件夹
3.修改容器内nginx配置文件
找到nginx配置文件中的server(虚拟主机) ps:居然还include文件。有点难找。。
将nginx虚拟主机网页根目录指向list
listen:虚拟主机的服务端口(默认80)
root:用于指定虚拟主机的网页根目录(改为指向dist)
try_files: 按顺序检查文件是否存在,返回第一个找到的文件
4. 重启容器中的nginx(nginx -t排错)
成功访问到明哥的vue项目!
日常开发:
docker run -it -p宿主机端口:容器端口 -v宿主机文件夹:容器文件夹 my_vue:2.0 /bin/bash
我们-v绑定后,在本机中修改文件,容器中文件也会对应修改。
完结撒花!