Vue-CLI项目轻量级自动化部署

部署方式一：docker 构建git+node的centos7环境+nginx，实现轻量级的Vue-CLI项目的自动化部署

背景

之前我部署springboot项目的时候会采用docker+jenkins的持续集成部署，但是jenkins比较重，而且配置起来相对麻烦一些，而且配置与项目不一起，不方便统一管理。所以这次进行轻量级的部署docker 构建git+node的centos7环境，实现轻量级的Vue-CLI项目的自动化部署。

docker+jenkins的持续集成部署Vue-CLI项目（我的另一篇博客）：前端项目部署很头疼？不如使用jenkins+docker自动化部署前端项目

部署分析

为什么采用git+node的centos7的docker环境去部署Vue-CLI项目？

• 选用docker是因为docker在linux上安装镜像（软件）方便快速，而且不用复杂繁琐的配置，再者容器运行相对对立，不互相影响。
• git环境，主要是为了可能在GitLab、GitHub或者码云上可以随时拉去最新的项目，进行合作开发，随时部署。
• node.js环境，主要为了运行vue-cli项目

部署流程简要概括

1. linux上提前下载好Git，方便项目的第一次clone
2. 项目根目录下编写Dockerfile文件（方便后续的sh脚本构建docker镜像）
3. 项目根目录下编写sh脚本，用于初始化docker镜像和容器，以及完成自动化部署
4. 项目根目录下编写.dockerignore文件和nginx.conf（可按照“项目名.conf”命名）文件，并配置nginx容器
5. 将刚才编写好的项目上传到GIT仓库（GitLab/GitHub/码云）
6. 在linux服务器上使用git拉取项目代码
7. 执行sh脚本的init方法，初始化docker镜像、容器，并进行项目部署（后续会详细说明）

项目部署

1.linux服务器下载Git

这里使用yum快速下载安装：

sudo yum install -y git

查看git版本（判断是否安装成功）

git --version

2.项目根目录下编写Dockerfile文件

# 安装centos环境
FROM centos:7
RUN yum -y update \
    && yum -y install vim \
    && yum -y install git

# 安装node环境，如果没有会直接docker pull拉取
FROM node

3.项目根目录下编写sh脚本

如果不懂这些shell，可参考docker 构建git+maven+jdk8的centos7环境，实现轻量级的springboot项目的自动化部署，这篇文章有详细的讲解

#!/bin/bash

# 镜像名字
IMAGE_NAME=centos7_git_node

# docker 容器名字或者jar名字，这里都命名为这个
SERVER_NAME=common-eladmin-web

#使用说明，用来提示输入参数
usage() {
    echo "Usage: sh 执行脚本.sh [init|start|pull]"
    exit 1
}

#初始化——构建镜像和容器(在宿主机执行)
init(){
  #容器id
  CID=$(docker ps | grep "$SERVER_NAME" | awk '{print $1}')
  #镜像id
  IID=$(docker images | grep "$IMAGE_NAME" | awk '{print $3}')
	# 构建docker镜像
	if [ -n "$IID" ]; then
		echo "Exit $IMAGE_NAME image，IID=$IID"
	else
		echo "NOT exit $IMAGE_NAME image，start build image..."
		# 根据项目个路径下的Dockerfile文件，构建镜像
		docker build -t $IMAGE_NAME .
		echo "$IMAGE_NAME image has been builded"
	fi

	if [ -n "$CID" ]; then
			echo "Exit $SERVER_NAME container，CID=$CID.   ---Remove container"
			docker stop $SERVER_NAME   # 停止运行中的容器
			docker rm $SERVER_NAME     ##删除原来的容器
	fi

	# 构建容器
	echo "$SERVER_NAME container,start build..."
	# 运行容器
	 # --name 容器的名字
	 #   -d   容器后台运行
	 #   -p   指定容器映射的端口和主机对应的端口
	 #   -v   将主机的目录挂载到容器的目录中（不可少）
	docker run -e TZ="Asia/Shanghai" -id -m 512M --memory-swap=1G --name $SERVER_NAME -v $PWD:/project/$SERVER_NAME $IMAGE_NAME
	echo "$SERVER_NAME container build end"
}

#检查程序是否进行npm install
is_install(){
  if [ ! -d "./node_modules" ];then
    return 1
  else
    return 0
  fi
}

#启动方法
start(){
  is_install
  if [ $? -eq "0" ]; then
    echo "${SERVER_NAME} is already npm install..."
  else
    # 没有node_modules文件夹，进行npm install
    npm install
  fi
  # 运行vue项目，命令根据package.json去判断
  npm run build:prod
}

#mvn
pull(){
  echo "----------git：find status---------"
  git status
  echo "----------git：pull new coads---------"
  git pull origin develop
  if [ $? -ne 0 ]; then
    exit
  fi
  # 启动
  start
}

#根据输入参数，选择执行对应方法，不输入则执行使用说明
case "$1" in
  "init")
    init
    ;;
  "start")
    start
    ;;
  "pull")
    pull
    ;;
  *)
    usage
    ;;
esac

4.项目根目录下编写.dockerignore文件和nginx.conf（可按照“项目名.conf”命名）文件，并配置nginx容器

参看vue-cli的官方文档配置：Docker (Nginx)配置Vue-cli

详细的nginx容器配置请参看另一篇博客：docker安装nginx规范所有项目的反向代理(一个项目一个反向代理的conf配置文件)

在项目根目录创建 .dockerignore 文件
设置 .dockerignore 文件能防止 node_modules 和其他中间构建产物被复制到镜像中导致构建问题。

**/node_modules
**/dist

在项目根目录创建 nginx.conf （可按照“项目名.conf”命名）文件

server {
    listen       8013;
    server_name  localhost;
    location / {
      root   /var/www/html/project/common-eladmin-web/dist;
      index  index.html;
      try_files $uri $uri/ /index.html;
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
      root   /usr/share/nginx/html;
    }
}

或者嫌麻烦可以直接在服务器直接编写nginx的配置文件，不直接在nginx.conf配置，只是为了方便项目管理，每个项目对应一个nginx配置文件。

5.git去clone项目到linux服务器

git clone 你的仓库的http方式的clone地址

以GitLab仓库为例：

我这里采用http的方式，这样比较简单，如果对安全性要求比较高，也可以采用ssh方式clone，但是相对麻烦一些。

6.进入clone项目后的根目录执行sh脚本，初始化docker镜像和容器

如果sh文件不再根目录，也可以进入相对应的目录

bash test.sh init

解析

• sh脚本暂时命名为test.sh
• 执行sh脚本的时候，输入第二个参数init，用于构建镜像和容器

判断是否构建成功

判断镜像是否存在

docker images

判断容器是否运行

docker ps

如果没有成功，说明构建命令没有配置对，需要修改一下。

7.进入容器，执行相应的sh脚本的命令

进入项目容器，假设容器名为test

docker exec -it test bash

进入挂载目录

即项目根目录（上文我挂载的是 /project/common-eladmin-web ，运行容器有挂载目录，会在容器运行时自动创建）

cd /project/xiaoyun

sh脚本运行命令大全

①启动项目

bash test.sh start

②拉取最新代码，打包，并启动项目

bash test.sh pull

小结

到此docker构建git+maven+jdk8的centos7环境，实现轻量级的springboot项目的自动化部署已经完成。

缺点

还是有一些美中不足

• linux服务器要预先安装Git，进行第一次clone代码（yum方式安装也只是需要执行一行代码，也比较方便）
• 相对于jenkins不是完全自动化，还是要手动输入一些命令（不过命令都比较简单）

总体来看还是很nice的。

优点

• 有了这个配置，从项目初期就可以进行服务器部署了，省去了部署时大量的繁琐操作。
• 项目部署配置与项目一起统一管理，方便后期的维护。
• 有了部署更改要求，直接更改sh脚本即可，非常方便
• …

参考：Vue-cli官方docker+nginx部署
不采用在项目容器内部使用nginx，主要原因是想要让一个nginx容器共享宿主机端口，统一管理所用项目的反相代理。

部署方式二：yum下载Git和node.js+nginx，运行sh脚本完成部署

部署流程概括

1. centos7通过yum下载Git和node.js
2. 项目根目录下新建nginx的conf文件
3. 项目根目录下新建sh文件，用于自动化部署
4. git上传本地代码，服务器拉取clone仓库代码
5. 运行sh文件实现项目部署

部署

1.centos7通过yum下载Git和node.js

yum下载Git

sudo yum install -y git

查看git版本（判断是否安装成功）

git --version

yum下载node.js

yum install -y nodejs

查看node.js版本（判断是否安装成功）

node -v

设置node.js在淘宝镜像上install

npm config set registry "https://registry.npm.taobao.org"

想知道是否配置淘宝镜像成功运行npm config get registry，如果出现https://registry.npm.taobao.org/，说明设置成功。

2.项目根目录下新建nginx的conf文件

参看上文部署方式一的nginx及其配置（默认采用docker安装的nginx，当然如果用宿主机也可以，思想都是一样的）

项目名.conf文件参看上文

详细的nginx容器配置请参看另一篇博客：docker安装nginx规范所有项目的反向代理(一个项目一个反向代理的conf配置文件)

3.项目根目录下新建sh文件，用于自动化部署

与方式一的sh文件不同（但也大差不差）
这个sh文件还是很完善，后续会进行再次优化。

#!/bin/bash

# 一般sh和nginx的配置文件都用项目名命名
SERVER_NAME=common-eladmin-web

#使用说明，用来提示输入参数
usage() {
    echo "Usage: sh 执行脚本.sh [init|start|pull]"
    exit 1
}

#初始化(在宿主机执行)
init(){
  # 复制项目根路径下nginx的conf的配置文件   /root/nginx/conf.d 为nginx容器的挂载项目配置文件
  cp common-eladmin-web.conf /root/nginx/conf.d
  # 重启nginx（一般需要根据实际情况看）  
  # 建议先进行nginx -t测试配置文件是否正常，在进行nginx -s reload重启容器(如果是docker容器，进入容器后执行这两条命令)
  # 这里我直接先暴力使用docker的重启容器的方式来重启nginx了（nginx-test为当前nginx容器名）
  docker restart nginx-test
  
  # 直接运行vue项目，调用start方法
  start
}

#检查程序是否进行npm install
is_install(){
  if [ ! -d "./node_modules" ];then
    return 1
  else
    return 0
  fi
}

#启动方法
start(){
  is_install
  if [ $? -eq "0" ]; then
    echo "node_modules is already npm install..."
  else
    # 没有node_modules文件夹，进行npm install
    npm install
  fi
  # 运行vue项目，命令根据package.json去判断
  npm run build:prod
}

#mvn
pull(){
  echo "----------git：find status---------"
  git status
  echo "----------git：pull new coads---------"
  git pull origin develop
  if [ $? -ne 0 ]; then
    exit
  fi
  # 启动
  start
}

#根据输入参数，选择执行对应方法，不输入则执行使用说明
case "$1" in
  "init")
    init
    ;;
  "start")
    start
    ;;
  "pull")
    pull
    ;;
  *)
    usage
    ;;
esac

4.git上传本地代码，服务器拉取clone仓库代码

服务器git命令拉取代码

git clone xxx.git

如果只想拉取某个分支的代码

git clone -b 分支名 xxx.git

5. 运行sh文件实现项目部署

进入项目根路径，运行sh
假设sh文件名为test.sh

bash test.sh init

第二种方式，其实不使用sh文件也可以部署，无非也就是git命令和node.js的命令。

两种方式对比

使用docker的方式不用太过在意宿主机的环境配置，便于所有项目进行管理，因为每个容器都是相互独立，并且与宿主机也是独立的。
使用宿主机这种方式，对于vue-cli这样部署不是很复杂的情况来说，略微简单一点

备注：因为时间久了项目会越来越多，所以一般采用统一管理，遵从相关的约定会比较好一点

方式三：Vue-CLI官方推荐docker+nginx配置方式

参看链接：https://cli.vuejs.org/zh/guide/deployment.html#docker-nginx

这样的方式也可以，但是nginx没有统一管理所有项目的反向代理，而是vue前端项目自己管理自己nginx配置，如果是个人开发，或者对规范要求不高可以使用。

nginx统一管理所有项目反向代理配置请参看另一篇博客：docker安装nginx规范所有项目的反向代理(一个项目一个反向代理的conf配置文件)