TeamCity 自动化部署VUE前端工程

        记录一次通过TeamCity  自动化部署VUE前端工程，解决服务器NodeJs无法升级（服务器离线），或者低版本不兼容问题，通过Docker容器进行解决处理。

TeamCity安装部署自行Google

目录

1.下载Docker 安装包（可选），如果已经有Docker环境可以从第7步进行操作

2.解压安装包

3.将 docker 注册为 service 服务

4.启动docker

5.查看版本号

6.设置开机自启

7.上传node_modules文件夹到服务器，目录自定义。此目录为VUE项目本地环境或开发环境已经安装了全部插件的完整文件内容。也可以在服务器上生成此文件目录，通过Git拉取代码，并在项目目录下执行npm install命令自动生成。

8.创建Dockerfile文件

9.构建镜像

10.创建临时容器（已包含 node_modules）

11.将新代码复制到容器中

12.运行构建临时镜像（ 可选：保存更新后的镜像）

13.运行临时镜像并创建容器，编译前端文件

14.拷贝部署编译后的前端工程文件

15.删除临时容器

1.下载Docker 安装包（可选），如果已经有Docker环境可以从第7步进行操作

Index of linux/static/stable/x86_64/

2.解压安装包

tar -xvf docker-27.1.0.tgz
mv docker/* /usr/bin/

3.将 docker 注册为 service 服务

vim /etc/systemd/system/docker.service

docker.service内容如下：

[Unit]

Description=Docker Application Container Engine

Documentation=https://docs.docker.com

After=network-online.target firewalld.service

Wants=network-online.target



[Service]

Type=notify

# ExecStart=/usr/bin/dockerd

ExecStart=/usr/bin/dockerd -H tcp://0.0.0.0:2375  -H unix:///var/run/docker.sock

ExecReload=/bin/kill -s HUP $MAINPID

# Having non-zero Limit*s causes performance problems due to accounting overhead

# in the kernel. We recommend using cgroups to do container-local accounting.

LimitNOFILE=infinity

LimitNPROC=infinity

LimitCORE=infinity

# Uncomment TasksMax if your systemd version supports it.

# Only systemd 226 and above support this version.

#TasksMax=infinity

TimeoutStartSec=0

# set delegate yes so that systemd does not reset the cgroups of docker containers

Delegate=yes

# kill only the docker process, not all processes in the cgroup

KillMode=process

# restart the docker process if it exits prematurely

Restart=on-failure

StartLimitBurst=3

StartLimitInterval=60s



[Install]

WantedBy=multi-user.target

4.启动docker

chmod +x /etc/systemd/system/docker.service  -- 添加执行权限
systemctl daemon-reload --加载配置
systemctl start docker --启动docker

5.查看版本号

systemctl status docker  --查看状态
docker -v

6.设置开机自启

systemctl enable docker.service

7.上传node_modules文件夹到服务器，目录自定义。此目录为VUE项目本地环境或开发环境已经安装了全部插件的完整文件内容。也可以在服务器上生成此文件目录，通过Git拉取代码，并在项目目录下执行npm install命令自动生成。

8.创建Dockerfile文件

在node_modules同目录下创建Dockerfile文件

#Dockerfile文件内容
FROM node:20.18.0-alpine  #node版本根据自己项目需要进行调整
WORKDIR /app
RUN chmod -R +x node_modules/.bin/* #添加执行权限
COPY node_modules /app/node_modules #拷贝完成的插件文件到镜像中，后期编译文件不用重复拉取缩短编译时间（如果package.json有更新则需要更新node_modules文件夹，并重新构建镜像）

9.构建镜像

#在Dockerfile目录下执行
docker build -t vue-offline-builder-topcheck .

10.创建临时容器（已包含 node_modules）

进入TeamCity 配置的前端项目。

注：目录一般路径为：/data/TeamCity/buildAgent/work/XXXXXXXXX，XXXXXXXXX为TeamCity自动生成的项目目录，自行查找。

docker create --name build_topcheck-temp vue-offline-builder-topcheck

11.将新代码复制到容器中

docker cp . build_topcheck-temp:/app/

12.运行构建临时镜像（ 可选：保存更新后的镜像）

docker commit build_topcheck-temp build-topcheck-updated

13.运行临时镜像并创建容器，编译前端文件

docker run --name build_topcheck_update build-topcheck-updated npm run build

14.拷贝部署编译后的前端工程文件

docker cp build_topcheck_update:/app/web  /前端项目部署目录

15.删除临时容器

docker rm build_topcheck-temp
docker rm build_topcheck_update
docker rmi build-topcheck-updated:latest