Kubernetes部署微服务实战（一）打包VUE项目

在这里的话，我们来演示下使用kubernetes部署微服务实战系列，本系列会演示从前端服务到后端服务的全流程。

本文主要介绍下打包VUE前端镜像，并且上传到docker hub上。下面直接开始。

1）打包VUE项目

这里我们需要使用node打包vue项目，打包后会生成一个dist.zip的压缩包，这里我们使用node打包的过程给忽略掉。默认为已经使用node打包好了dist.zip文件，然后我们把这个文件给解压缩出来。如下图：

2）创建nginx的conf文件

这里我们在与解压缩后的dist同级目录下创建一个default.conf文件，示例如下：

然后我们把nginx的配置信息复制到这个default.conf文件里面去：

server {
	
	listen 9000;
	server_name localhost;

	location / {
    	root   /www/test/;
    	proxy_set_header Host  $host;
    	try_files $uri $uri/ /index.html;
    	index  index.html index.htm;
	}

	location /school {
    	proxy_redirect off;
    	proxy_set_header Host $host;
    	proxy_set_header X-Real-IP $remote_addr;
    	proxy_set_header x-Forwarded-For $proxy_add_x_forwarded_for;
    	proxy_pass http://192.168.31.200:32081;
	}

	error_page   500 502 503 504  /50x.html;
	
	location = /50x.html {
    	root   html;
	}

}

这里的配置文件我们按照实际情况进行部署修改即可，例如我们这里前端的项目是放在/www/test文件夹下的，后端的路径转发到对应的web服务里面去。

3）创建Dockerfile

然后在这里我们在与dist同级的目录下创建一个Dockerfile文件，示例如下：

然后我们把如下的内容复制到这个Dockerfile文件里面去，示例如下：

FROM nginx:latest

MAINTAINER "admin"

LABEL description="docker show test"

COPY dist/ /www/test/

COPY default.conf /etc/nginx/conf.d/default.conf

env.UTF-8

这里的文件比较简单，主要是把dist的文件拷贝到/www/test/路径下，这个路径与前面nginx配置的路径是一样的。

然后我们再把nginx的conf文件拷贝到容器的nginx配置文件下即可。

4）安装docker

这里我们需要在存放上面3个文件的服务器上安装部署docker，这里部署docker比较简单，例如：

yum install -y docker-io

这里暂不演示安装docker，默认已经部署完毕了docker。

5）构建镜像

此时我们使用docker构建下刚才的前端项目，构建的语法如下：

docker buil;d -t ${image_name}:tag .

例如我们这里打包的命令如下：

docker build -t show-web:1.0 .

当看到如下的界面就代表打包完毕了

此时我们就可以看到镜像已经打包完毕了。

6）校验镜像

这里我们使用如下的命令可以看到刚才打包好的镜像：

docker images

7）把当前的镜像上传到dockerhub中去

这里我们首先使用docker login 命令登录到dockerhub中去：

可以看到登录成功了，然后我们使用浏览器登陆dockerhub，创建一个仓库：

这里只是演示，因此我们创建的是共有仓库，如果是正式项目的话，建议使用harbor或者私有仓库。

然后我们把刚才的show-web:1.0的镜像上传到dockerhub上。

首先我们把刚才的镜像打个标签：这里打标签的语法命令是：

docker tag IMAGEID(镜像 id) REPOSITORY:TAG(仓库: 标签)

如果我们要上传到dockerhub的话，那么这里的仓库信息需要在dockerhub上查找，点击我们刚才创建的仓库：

可以看到我们这里的仓库信息是：

所以这里我们的show-web的镜像打标签的话就需要结合这里面的信息：

docker tag cf29208455a0 a85791d9bf0b9ade/k8s-show:1.0

这里的镜像id获取主要是通过docker images命令获取：

执行完当前的命令就打包好了，然后我们可以使用docker images命令去查看是否生成了一个新的镜像：

可以看到生成了新的镜像，然后我们使用如下的命令把这个镜像给推送到docker hub上：

docker push a85791d9bf0b9ade/k8s-show:1.0

执行之后就会开始上传，等到出现如下的界面就代表上传成功了

然后我们去到docker hub的网页上，查看下镜像是否已经上传上去了：

可以看到完全没有问题。

以上就是我们打包VUE项目镜像，并且把它上传到dockerhub的案例。