docker 构建centos7+git+nvm镜像，实现自主切换node版本统一部署前端vue项目

背景

为什么选择使用nvm？

我们可能需要在服务器部署多个前端项目，而不同的项目所使用的node版本又是不一样的，不同版本的node的兼容性是不一样的。这种情况下，对于维护多个版本的node将会是一件非常麻烦的事情，而nvm就是为解决这个问题而产生的，他可以方便的在同一台设备上进行多个node版本之间切换。

前端项目部署基本上只需要node就可以了，为什么选择docker环境？

• 为了与宿主机解耦，docker容器相对独立。
• 现在使用的centos+git+nvm的环境，以后可以随时进行环境扩展。
• 统一前端的部署工具。

docker 构建centos7+git+nvm环境

1. 使用Dockerfile构建镜像

# 依赖centos环境
FROM centos:latest

#安装vim、git和nvm环境
RUN yum -y update \
    && yum -y install vim \
	&& yum -y install git \
	&& git --version \
	&& cd ~/ \
	&& git clone https://github.com.cnpmjs.org/nvm-sh/nvm.git .nvm \
	&& cd ~/.nvm && git checkout v0.35.3 \
	&& echo "source ~/.nvm/nvm.sh" >> ~/.bashrc && source ~/.bashrc

2. 编写初始化脚本，初始化docker容器，将“ /root/project ”目录（项目统一放置文件夹，位置可更换）映射进容器

#!/bin/bash

# 镜像名字
IMAGE_NAME=centos_git_nvm

# docker 容器名字或者jar名字，这里都命名为这个
SERVER_NAME=centos_git_nvm_node

#使用说明，用来提示输入参数
usage() {
    echo "Usage: sh 执行脚本.sh [init]"
    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 --name $SERVER_NAME -v /root/project:/project $IMAGE_NAME
	echo "$SERVER_NAME container build end"
}


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

3. 将文件上传到服务器指定目录，进入目录， 运行sh文件初始化容器
   sh文件暂定命名portal.sh（可自行更改）
   上传和进入目录命令省略

bash portal.sh init

4. 查看镜像和容器是否成功

# 如果有sh命名的镜像，说明构建成功
docker images

# 如果有sh命名的容器，说明容器启动成功
docker ps

5. 进入容器安装node

# 进入容器
docker exec -it centos_git_nvm_node bash
# 查看可用node版本
nvm list-remote
# 安装node，以安装v14.1.0为例
nvm install v14.1.0

如果需要切换node版本，可使用命令nvm use 版本。更多node命令使用可参看：https://github.com/nvm-sh/nvm

如果对docker构建服务器部署需要的环境不熟悉，例如Dockerfile和sh脚本的使用，可参看我另两篇博客（写的比较详细）：

• docker 构建git+maven+jdk8的centos7环境，实现轻量级的springboot项目的自动化部署
• Vue-CLI项目轻量级自动化部署

使用centos7+git+nvm的docker环境统一部署前端项目

前提

1. 宿主机统一将所有项目都放在一个目录下（例如 /root/project ），方便管理
2. docker安装nginx，共享宿主机端口，并且将 /root/project 映射到容器内部指定目录（例如 /var/www/html ）。
   docker+nginx统一管理项目的反向代理可参看我的另一篇博客：docker安装nginx规范所有项目的反向代理(一个项目一个反向代理的conf配置文件)
3. 项目下放置 “项目名.conf” 文件方便nginx统一反向代理。

部署流程

1. 宿主机git将代码clone到 /root/project 下。

cd /root/project
git clone 项目clone地址

2. 进入centos7+git+nvm的环境的容器

docker exec -it centos_git_nvm_node bash

3. 在容器中进入项目目录，执行npm install和npm run build

cd 映射的项目目录（/project/项目名）
npm install
npm run build

4. 将项目的conf文件复制到nginx的conf.d目录下（推荐使用如下建立软连接的方式，可以做到项目下的conf文件与nginx的conf.d的文件夹同步）

将server配置的conf文件放在conf.d下，nginx运行后会将其添加到nginx.conf文件，从而实现反向代理。（个人推测）。

项目conf文件参考示例：

server {
    listen       9021;
    server_name  localhost;
    location / {
      root   /var/www/html/项目名/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的conf.d文件现在是确实可使用，但是如果项目的conf文件出现改动，那么并不能与nginx的conf.d的conf文件同步。

可以进入nginx的项目容器，使用软连接的方式将conf文件与nginx的conf.d目录关联，实现同步。具体操作如下：

• 进入nginx容器，确定项目的conf路径（例如 /var/www/html/项目名/项目名的conf ）
• 将项目.conf 关联进 /nginx_conf/conf.d （这个目录曾经与 /etc/nginx/conf.d 建立过反向软连接，即/etc/nginx/conf.d移动到/nginx_conf，/nginx_conf/conf.d建立/etc/nginx的软连接，否则无法在宿主机操作。详细参看上文的前提下的nginx配置）

 ln -s /var/www/html/项目名/项目名的conf /nginx_conf/conf.d

• 建立软连接后，或者修改conf后需要重启nginx服务

#测试nginx，看是否成功
nginx -t
#重启nginx服务
nginx -s reload

至此部署完毕！以后部署前端项目，不需要在单独为前端项目构建一个docker容器，而是进入centos_git_nvm_node容器和nginx容器中统一部署前端项目。