Jenkins 部署前端项目在讲jenkins部署前端项目前，我们先讲一下nginx 什么是 Nginx？ Nginx（

在讲jenkins部署前端项目前，我们先讲一下nginx

什么是 Nginx？

Nginx（发音为 "engine-ex"）由 Igor Sysoev 于 2004 年开发并公开发布，最初设计目的是解决 C10K 问题，即如何处理一台服务器同时处理1万并发连接的问题。Nginx 的架构特别适合处理大量的并发连接，因此在性能和稳定性方面表现尤为出色。

Nginx 的主要功能

Web 服务器：Nginx 能够作为静态文件服务器，快速高效地提供 HTML、CSS、JavaScript 等静态资源。
反向代理服务器：Nginx 可以作为前端服务器，将客户端的请求转发给后端的服务器群组，从而实现负载均衡。
负载均衡：通过多种负载均衡策略（如轮询、IP 哈希等），Nginx 能够有效分配流量，确保服务器的稳定性和性能。
缓存功能：Nginx 支持多级缓存，加快响应速度，减轻后端服务器的压力。
HTTPS 和 SSL/TLS：Nginx 可以轻松配置 SSL/TLS，为网站提供 HTTPS 加密连接。

我们拿Ubuntu快速安装Nginx

首先我们先安装Docker在Docker容器中安装Nginx

sudo apt update
sudo apt install docker-ce
sudo systemctl start docker
sudo docker pull nginx

Nginx已经安装完成, 注意设置防火墙，文件权限，以及docker compose的安装等，这里不是本文的关键就不详细讲了这里我们使用docker compose 启动nginx 首先我们创建docker-compose.yml 文件, 具体内容如下我们映射一下nginx的配置与证书这里是我的nginx配置

    listen       80;
    # 绑定的域名
    server_name xxx;
    
    charset utf-8;

    #access_log  /var/log/nginx/host.access.log  main;
    
    # 监听的路径 
    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }
    
    location /app/ {
        root /usr/share/nginx/html;
        index  index.html index.htm;
    }
    
    location /dist/ {
        root /usr/share/nginx/html;
        index  index.html index.htm;
    }
   
    #error_page  404              /404.html;
 
    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}
server {
     listen 443 ssl;
     
     #填写证书绑定的域名
     server_name xxx;
     
     charset utf-8;
     
     #填写证书文件绝对路径
     ssl_certificate /etc/nginx/cert/dongxie.top.pem;
     
     #填写证书私钥文件绝对路径
     ssl_certificate_key /etc/nginx/cert/dongxie.top.key;
 
  
    # 监听的路径
     location / {
        root   /usr/share/nginx/html/dist;
        index  index.html index.htm;
     } 

     location /app/ {
        root /usr/share/nginx/html;
        index  index.html index.htm;
     }

     location /dist/ {
        root /usr/share/nginx/html;
        index  index.html index.htm;
     }
}

然后我们启动nginx sudo docker-compose up -d 在浏览器里访问我们的域名，就会访问/usr/share/nginx/html/dist目录下的index.html 我们要做的就是把dist文件到/usr/share/nginx/html目录下就可以啦看一下成果

Jenkins安装与使用

安装并且启动jenkins

brew install jenkins
brew services start jenkins

浏览器输入127.0.0.1:8080你会看到这样的界面，这里由于我已经配置过

新建一个自由风格软件项目

添加Gitlab仓库并配置凭据

配置凭据你可以选择账号密码或者SSH key都可以然后执行shell

保存立即构建就可以了

如何配置webhook

只需要在gitlab设置webhook把这个路径填写就去就可以了，这里值得注意的是gitlab社区版不用许访问本地网络。我们使用cpolar内网穿透这是cpolar官网地址，按照官网步骤下载安装，进行映射把http:127.0.0.1:8080替换成16108e91.r10.vip.cpolar.cn填写到webhook上就可以了

这时webhook就设置成功了，提交一下代码试一下，你会发现jenkins运行啦

如何远程构建

不带参数构建 http://127.0.0.1:8080/job/web-app/build?token=TOKEN_NAME

带参数构建http://127.0.0.1:8080/job/web-app/buildWithParameters?token=TOKEN_NAME

这里我们重点讲一下带参数构建，只须要按照这个规则填写路径，不需要拼接&value=value

然后勾选参数化构建过程

这样jenkins参数化构建就设置完成了，我们来远程调用一下试试

无参数构建

curl -u admin:token -X POST "http://127.0.0.1:8080/job/web-app/build\?token\=xxxxxx"

参数构建

curl -u admin:token -X POST http://127.0.0.1:8080/job/web-app/buildWithParameters\?env\=dev\&phone\=xxxxxxx

这里的admin是指你的jenkins用户，token是指你的jenkins APIToken 我们执行试一下

我们在控制台看一下已经拿到我们的构建参数了

如何钉钉机器人推送

首先我们在jenkins插件管理安装DingTalk插件

安装成功后在系统管理配置钉钉，点进去填写webhook和加密

如何获取webhook和加密，在钉钉客户端群聊添加自定义机器人

然后回到构建配置就会出现钉钉机器人

我们在触发一下远程构建，钉钉就会收到消息啦

Jenkins 部署前端项目