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
  1. 编写初始化脚本,初始化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



  1. 将文件上传到服务器指定目录,进入目录, 运行sh文件初始化容器
    sh文件暂定命名portal.sh(可自行更改)
    上传和进入目录命令省略
bash portal.sh init
  1. 查看镜像和容器是否成功
# 如果有sh命名的镜像,说明构建成功
docker images

# 如果有sh命名的容器,说明容器启动成功
docker ps
  1. 进入容器安装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脚本的使用,可参看我另两篇博客(写的比较详细):

使用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地址
  1. 进入centos7+git+nvm的环境的容器
docker exec -it centos_git_nvm_node bash
  1. 在容器中进入项目目录,执行npm installnpm run build
cd 映射的项目目录(/project/项目名)
npm install
npm run build
  1. 将项目的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容器中统一部署前端项目。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:博客之星2021 设计师:Hiro_C 返回首页
评论 2

打赏作者

Duktig丶

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值