docker部署jenkins后,利用jenkins构建vue
时间: 2025-01-09 14:40:04 浏览: 53
### 使用 Docker 安装 Jenkins 并配置构建 Vue 项目
#### 环境准备
为了确保能够顺利使用 Jenkins 构建 Vue 项目,需先完成如下准备工作:
- **安装 Docker**:确保本地已成功安装并启动 Docker[^3]。
- **安装 Node.js 和 cnpm**:Node.js 是运行 Vue CLI 所必需的基础环境;而 cnpm 可加速依赖包下载速度。具体操作可参照官方文档或国内镜像站点说明。
- **Jenkins 插件安装**:进入 Jenkins 的插件管理页面,查找并安装 `NodeJS Plugin` 来支持前端项目的编译工作流[^1]。
#### 配置 Jenkins 工作空间
在 `/docker/jenkins/jenkins/jenkins_home/workspace/vue` 路径下准备好必要的资源文件,包括但不限于 Nginx 配置文件、用于打包应用的 Shell 脚本 (`vue.sh`) 以及定义容器化过程的 `Dockerfile` 文件[^2]。
```bash
# vue.sh 示例脚本内容
#!/bin/bash
npm install
npm run build
```
```dockerfile
# Dockerfile 示例内容
FROM nginx:latest
COPY ./dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
```
#### 创建 Jenkins Job 进行自动化构建
当上述前置条件满足后,在 Jenkins 中新建自由风格软件项目 (Freestyle project),依次设置以下选项:
- **全局变量配置**:设定一些公共使用的属性值,比如 Git 仓库地址等。
- **源码管理部分**:指定目标代码库 URL 地址,并选择合适的分支版本进行拉取更新。
- **构建触发器**:可以依据实际需求灵活调整触发机制,如定时任务或是监听特定事件的发生。
- **构建环境**:勾选 “Provide Node & npm bin/ folder to PATH”,从而让后续命令可以直接调用 node/npm 命令执行相应动作。
- **构建步骤**:
- 添加 shell 类型的任务项,输入路径指向之前提到过的自定义脚本位置(即 `./vue.sh`),这一步骤负责完成应用程序本身的打包流程。
最后保存更改即可实现整个 CI 流程的一键式处理逻辑。
阅读全文
相关推荐



















