Jenkins结合Docker与Nginx部署Vue前端项目实战

作者：望舒时间：2026-10-25 10:18:29浏览：204

本文详细记录了使用Jenkins、Docker、Nginx和Node.js构建Vue前端项目持续集成与部署环境的具体步骤。内容涵盖从Jenkins自由风格Job配置、Node.js工具设置，到Shell脚本执行构建、Dockerfile编写及Nginx配置文件调整的全过程。通过实际案例展示了如何在单服务器环境下完成从代码拉取、编译打包到镜像构建与容器启动的完整流程，并简要提及了涉及Harbor仓库的多节点部署方案。

近期空闲时间较多，尝试利用Docker技术部署业务测试环境中的前端Vue项目，特此整理记录。

本次部署架构采用Jenkins、Docker、Harbor及Nginx组合。由于当前项目节点已加入Jenkins，构建与部署操作均在同一台服务器上完成，因此未实际使用Harbor仓库。但在生产环境中，若构建节点与部署节点分离，则需先将镜像推送至Harbor，后续章节将补充相关详细步骤。

前置条件

1. 已完成Jenkins的安装；2. 项目服务器已以Node节点形式加入Jenkins集群；3. 项目节点服务器已安装Docker环境；4. 源代码中需包含Dockerfile文件以及Nginx相关配置文件。

整体思路

首先通过Jenkins从Git仓库拉取代码，利用Node.js环境对Vue资源进行打包编译；接着依据Dockerfile构建业务镜像；同时提前准备好Nginx配置文件及自定义文件，并上传至Harbor仓库，以便其他节点下载和使用。

具体实施步骤

创建自由风格的Job（若需更复杂流程可使用流水线，此处因步骤简单省略流水线配置）。

前置条件

在General设置中选择参数化构建，使用文本参数来定义每次构建的版本号。

前置条件

在构建环境部分，需选择全局工具中已配置的Node.js，用于执行Vue的编译打包操作。

前置条件

配置Node.js工具

参考相关截图，选择并自动安装所需版本的Node.js即可。

前置条件

在构建步骤中，选择执行Shell脚本。

前置条件

#!/bin/bash
pwd
npm install
npm run build -- prerelease #编译项目
echo "npm finish "
echo $version
docker build -t nginx-agent:$version .
#部署和构建是一台
docker images 
docker stop nginx-agent
docker rm nginx-test
docker run --name nginx-agent -p 8001:80 -d nginx-agent:$version
#部署和构建不在一台，或者多台构建，harbor
# docker tag nginx-agent:$version 192.168.80.133:8000/test/nginx-agent:$version
# docker push 192.168.80.133:8000/test/nginx-agent:$version
# ssh 192.168.80.** "docker pull 192.168.80.133:8000/test/nginx-agent:$version"
# ssh 192.168.80.** "docker stop nginx-agent;docker rm nginx-agent;docker start "
# ssh 192.168.80.** "docker run --name nginx-test -p 8001:80 -d 192.168.80.133:8000/test/nginx:$version"

由于当前环境构建与部署均在一台服务器上，故未使用Harbor。注释部分的代码段展示了部署至另一台服务器的简单示例。

保存Job配置，准备开始构建。

Git代码文件目录结构如下

此处查看三个关键文件的内容：Dockerfile用于构建Docker镜像；nginx.conf用于替换镜像内默认的主配置文件；default.conf用于替换镜像内默认的用户配置文件。

前置条件

Dockerfile文件具体内容

root@jenkins test-agent]# cat Dockerfile 
FROM nginx
COPY ./dist/index.html /app/
COPY ./dist/static/js /app/static/js
COPY ./dist/static/css /app/static/css
COPY ./dist/static/fonts /app/static/fonts
COPY ./dist/static/img /app/static/img
COPY ./nginx.conf /etc/nginx/conf/nginx.conf
COPY ./default.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

注意事项

若前端文件区分目录，需单独编写步骤逐一复制，否则Docker的COPY命令仅复制文件而不会保留目录结构，导致镜像内目录结构不一致。Nginx镜像默认包含两个文件：主配置文件nginx.conf和自定义配置文件default.conf。通常可提前准备这两个对应配置文件，主配置文件多数项目可通用，而自定义文件需根据具体前端项目需求编写，可能涉及server_name设置及后端接口转发配置。

nginx.conf主配置文件内容

[root@jenkins docker]# cat nginx.conf 
user  nginx;
worker_processes  auto;
error_log  /var/log/nginx/error.log notice;
pid        /var/run/nginx.pid;
events {
    worker_connections  65535;
}
http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';
    access_log  /var/log/nginx/access.log  main;
    sendfile        on;
    #tcp_nopush     on;
    keepalive_timeout  65;
    #gzip  on;
    include /etc/nginx/conf.d/*.conf;
}

default.conf自定义配置文件内容如下

[root@jenkins docker]# cat default.conf 
server {
        listen  80;
        server_name localhost; #如果有需要监听的域名，这里也需要修改
        location / {
                root  /app;
                try_files $uri $uri/ /index.html;
                index  index.html index.htm;
                }
        location /api {
			if ($request_method = 'OPTIONS') {
                        return 204;
                }
                rewrite  ^/api/(.*)$ /$1 break;
                #后端接口域名，这里需要根据你自己的具体后端来填写
                proxy_pass https://*****.com/;
        }}

所有准备工作就绪，开始构建并查看效果。

前置条件

构建输出日志如下

前置条件

从输出可见构建已成功，登录服务器检查是否生成了对应的镜像和容器。

[root@jenkins docker]# docker images
REPOSITORY                       TAG          IMAGE ID       CREATED         SI
nginx-agent                      V4           af8b50d515f5   2 minutes ago   150MB
192.168.80.133:8000/test/nginx   V3           19186858893b   22 hours ago    141MB

[root@jenkins docker]# docker ps 
CONTAINER ID   IMAGE                                COMMAND                  CREATED         STATUS                  PORTS                                                  NAMES
8b3e8ae77b88   nginx-agent:V4                       "/docker-entrypoint.…"   9 seconds ago   Up 8 seconds            0.0.0.0:8001->80/tcp, :::8001->80/tcp                  nginx-agent