jenkins+docker+nginx+nodejs持续集成部署vue前端项目

Jenkins+Docker+nginx+nodejs持续集成部署Vue前端项目

概述

这篇攻略主要讲解如何使用Jenkins、Docker、nginx和nodejs实现持续集成和部署Vue前端项目。下文将对Jenkins、Docker、nginx以及nodejs的相关概念、安装和使用作详细的介绍，并通过两个示例说明如何实现持续集成和部署。

Jenkins简介

Jenkins是一种基于Java的开源自动化服务器，可以实现自动化构建、测试和部署。在本攻略中，Jenkins用来管理代码仓库、执行构建、测试和部署任务。

Docker简介

Docker是一种开源容器技术，可以将应用及其依赖打包为一个容器，方便部署和移植。在本攻略中，Docker用来打包和运行Vue前端项目。

nginx简介

nginx是一种流行的高性能Web服务器和反向代理服务器，可以实现负载均衡、缓存、日志等功能。在本攻略中，nginx用来反向代理Vue前端项目的请求。

nodejs简介

nodejs是一种基于Chrome V8引擎的JavaScript运行环境，可以方便地开发和部署Web应用程序。在本攻略中，nodejs用来安装和运行Vue前端项目的依赖和启动应用程序。

安装Jenkins

在Ubuntu上安装Jenkins：

$ sudo apt update $ sudo apt install openjdk-8-jdk $ wget -q -O - https://pkg.jenkins.io/debian-stable/jenkins.io.key | sudo apt-key add - $ sudo sh -c 'echo deb https://pkg.jenkins.io/debian-stable binary/ > /etc/apt/sources.list.d/jenkins.list' $ sudo apt update $ sudo apt install jenkins

启动Jenkins服务：

$ sudo systemctl start jenkins

打开Jenkins Web管理界面，设置管理员密码，安装推荐插件，创建管理员用户。

安装Docker

在Ubuntu上安装Docker：

$ sudo apt update $ sudo apt install docker.io

将当前用户加入docker用户组：

$ sudo usermod -aG docker $USER

配置nginx

安装nginx：

$ sudo apt update $ sudo apt install nginx

配置nginx反向代理：

server { listen 80; server_name example.com; location / { proxy_pass http://127.0.0.1:8080; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; add_header Cache-Control "no-store"; add_header Pragma "no-cache"; expires -1; gzip_static on; gzip on; gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript image/svg+xml; gzip_vary on; } }

安装nodejs

在Ubuntu上安装nodejs：

$ sudo apt update $ curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash - $ sudo apt install nodejs

示例一：基于简单的Vue前端项目的持续集成和部署

以下为一个简单的Vue前端项目的目录结构：

my-vue-app/
├── public/
│   ├── index.html
│   └── ...
├── src/
│   ├── main.js
│   ├── router.js
│   └── ...
├── package.json
└── ...

将该项目上传至GitHub，设置Jenkins的Webhook。
在Jenkins中的项目配置页面中配置参数化构建：

npm install npm run build docker build -t my-vue-app . docker run -d -p 8080:80 my-vue-app

配置Jenkins的持续集成流水线：

node { stage('Build') { def image = docker.build("my-vue-app") } stage('Deploy') { docker.withRegistry('https://registry.hub.docker.com', 'docker-hub') { image.push('latest') } sh 'docker rm -f my-vue-app || true' sh 'docker run -d -p 8080:80 --name my-vue-app my-vue-app' } }

编写Dockerfile：

FROM nginx:alpine COPY dist/ /usr/share/nginx/html

编写Jenkinsfile：

pipeline { agent any stages { stage('Checkout') { steps { checkout([$class: 'GitSCM', branches: [[name: '*/master']], doGenerateSubmoduleConfigurations: false, extensions: [[$class: 'CleanCheckout']], submoduleCfg: [], userRemoteConfigs: [[url: 'https://github.com/username/my-vue-app.git']]]) } } stage('Test') { steps { sh 'npm install' sh 'npm run test' } } stage('Build') { steps { sh 'npm run build' sh 'docker build -t my-vue-app .' } } stage('Deploy') { environment { registry = 'docker-hub' registryCredential = 'docker-hub-credential' dockerImage = '' } steps { script { docker.withRegistry( '', registryCredential ) { dockerImage = docker.build( "my-vue-app" ) dockerImage.push() } sh "docker stop my-vue-app || true && docker rm my-vue-app || true" sh "docker run -d --name my-vue-app -p 80:80 ${dockerImage.imageName}" } } } } post { always { cleanWs() sh "docker rmi -f $(docker images -qf dangling=true) || true" } } }

示例二：基于复杂的Vue前端项目的持续集成和部署

在示例一的基础上，考虑更复杂的Vue前端项目，增加了一个使用Node.js和Express构建的后端API服务器。该项目的目录结构如下：

my-vue-app/
├── public/
│   ├── index.html
│   └── ...
├── src/
│   ├── main.js
│   ├── router.js
│   └── ...
├── api/
│   ├── server.js
│   ├── package.json
│   └── ...
├── package.json
└── ...

将该项目上传至GitHub，设置Jenkins的Webhook。
在Jenkins中的项目配置页面中配置参数化构建：

npm install npm run build docker build -t my-vue-app . docker build -t my-api-server ./api docker network create my-network docker run -d --name my-api-server --network my-network my-api-server docker run -d --name my-vue-app --network my-network -p 8080:80 my-vue-app

配置Jenkins的持续集成流水线：

pipeline { agent any stages { stage('Checkout') { steps { checkout([$class: 'GitSCM', branches: [[name: '*/master']], doGenerateSubmoduleConfigurations: false, extensions: [[$class: 'CleanCheckout']], submoduleCfg: [], userRemoteConfigs: [[url: 'https://github.com/username/my-vue-app.git']]]) } } stage('Test') { steps { sh 'npm install' sh 'npm run test' } } stage('Build') { steps { sh 'npm run build' sh 'docker build -t my-vue-app .' sh 'docker build -t my-api-server ./api' } } stage('Deploy') { steps { sh 'docker network rm my-network || true' sh 'docker network create my-network' sh 'docker rm -f my-api-server || true' sh 'docker run -d --name my-api-server --network my-network my-api-server' sh 'docker rm -f my-vue-app || true' sh 'docker run -d --name my-vue-app --network my-network -p 8080:80 my-vue-app' } } } post { always { cleanWs() sh "docker rmi -f $(docker images -qf dangling=true) || true" } } }