文章目录
- 背景
- 为什么选择使用nvm?
- 前端项目部署基本上只需要node就可以了,为什么选择docker环境?
- docker 构建centos7+git+nvm环境
- 使用centos7+git+nvm的docker环境统一部署前端项目
- 前提
- 部署流程
背景
为什么选择使用nvm?
我们可能需要在服务器部署多个前端项目,而不同的项目所使用的node版本又是不一样的,不同版本的node的兼容性是不一样的。这种情况下,对于维护多个版本的node将会是一件非常麻烦的事情,而nvm就是为解决这个问题而产生的,他可以方便的在同一台设备上进行多个node版本之间切换。
前端项目部署基本上只需要node就可以了,为什么选择docker环境?
- 为了与宿主机解耦,docker容器相对独立。
- 现在使用的centos+git+nvm的环境,以后可以随时进行环境扩展。
- 统一前端的部署工具。
docker 构建centos7+git+nvm环境
- 使用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
- 编写初始化脚本,初始化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
- 将文件上传到服务器指定目录,进入目录, 运行sh文件初始化容器
sh文件暂定命名portal.sh(可自行更改)
上传和进入目录命令省略
bash portal.sh init
- 查看镜像和容器是否成功
# 如果有sh命名的镜像,说明构建成功
docker images
# 如果有sh命名的容器,说明容器启动成功
docker ps
- 进入容器安装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环境统一部署前端项目
前提
- 宿主机统一将所有项目都放在一个目录下(例如 /root/project ),方便管理
- docker安装nginx,共享宿主机端口,并且将 /root/project 映射到容器内部指定目录(例如 /var/www/html )。
docker+nginx统一管理项目的反向代理可参看我的另一篇博客:docker安装nginx规范所有项目的反向代理(一个项目一个反向代理的conf配置文件) - 项目下放置 “项目名.conf” 文件方便nginx统一反向代理。
部署流程
- 宿主机git将代码clone到 /root/project 下。
cd /root/project
git clone 项目clone地址
- 进入centos7+git+nvm的环境的容器
docker exec -it centos_git_nvm_node bash
- 在容器中进入项目目录,执行
npm install
和npm run build
cd 映射的项目目录(/project/项目名)
npm install
npm run build
- 将项目的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容器中统一部署前端项目。