Docker部署Vue程序

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端口