Docker部署Vue程序
1、安装Nginx
我们部署Vue程序依赖Nginx,首先拉取Nginx的镜像,这里使用Nginx最新的镜像
docker pull nginx
如图所示
我们查看镜像
已经有了nginx镜像。
我们根据nginx镜像运行容器
docker run --name=nginx -d -p 4030:80 nginx
如图所示
然后在浏览器里面访问4030端口,验证容器是否运行正常
出现上面的截图,说明容器运行正常。
2、创建Vue程序
参考教程:https://www.jianshu.com/p/02b12c600c7b
安装npm
首先:先从 nodejs.org 中下载nodejs,一键next安装
安装成功后
D:\work>node -v
v12.16.3
D:\work>npm -v
6.14.4
安装vue-cli
cnpm install vue-cli -g //全局安装 vue-cli
查看vue-cli是否成功
vue list
创建vue项目
vue init webpack docker-vue
安装依赖
cd docker-vue
cnpm install
运行测试
cnpm run dev
在浏览器中访问http://localhost:8080/
利用vue-cil初始化构建vue项目,我们会获得一个初始化的文件夹结构
编译项目
cnpm run build
编译完成之后,在项目的根目录下面就会生成一个dist文件夹,里面是编译后的项目
构建镜像
上传dist文件夹到服务器,并编辑Dockerfile文件
# 设置基础镜像,这里使用最新的nginx镜像,前面已经拉取过了
FROM nginx
# 定义作者 deroy
MAINTAINER deroy
# 将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面
COPY dist/ /usr/share/nginx/html/
构建Vue程序的镜像
docker build -t dockervue .
运行镜像
我们根据上步构建的镜像去运行镜像
docker run --name=dockervue -d -p 7681:80 dockervue
我们在浏览器里面访问7681端口