云服务器使用jenkins+nginx自动化构建部署vue3+gitee项目

一.环境

jenkins,

nodejs v18.18.0,

pnpm 9.4.0

云服务器使用的系统是ubuntu

二.云服务器相关环境安装

1.安装nodejs以及pnpm

更新包列表

sudo apt-get update

安装nodejs

（这里可以通过nvm去安装指定版本的nodejs，我的服务器连不上github，就只能用apt去安装最新的nodejs了）

sudo apt-get install -y nodejs

查看版本node -v：

装npm（按道理来说装了nodejs会连带安装npm，但我这里npm -v是没有版本信息的，只能手动装了）sudo apt install npm：

安装pnpm：

用npm去装（可能有点慢，多等等）：

sudo npm install -g pnpm

也可以通过apt去装：

sudo apt-get install pnpm

2.安装nginx

更新仓库

sudo apt update

安装nginx

sudo apt install nginx

确认y

查看nginx状态

sudo systemctl status nginx

创建一个nginx的配置文件

sudo nano /etc/nginx/sites-available/mywebsite

使用nano作为文本编辑器打开mywebsite文件，如图

配置：

server {
    listen 3333;
    server_name test;

    location / {
        root /var/www/html;
        index index.html index.htm;
    }

    //这里要注意的是根据具体的url匹配后端接口

    location /api/v1/ {
        proxy_pass http://后端IP:端口/;
        proxy_set_header Host $host; # 设置Host头为当前请求的域名
        proxy_set_header X-Real-IP $remote_addr; # 设置真实IP头
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; # 设置经过的代理头
        proxy_set_header X-Forwarded-Proto $scheme;
        add_header Access-Control-Allow-Methods *;
        add_header Access-Control-Allow-Origin $http_origin;
        proxy_read_timeout 86400;
    }

    # 其他配置...
}

按ctrl+X退出时，输入y保存，之后按enter确认写入

在/etc/nginx/sites-enabled/下创建符号链接启用配置

sudo ln -s /etc/nginx/sites-available/mywebsite /etc/nginx/sites-enabled/

禁用默认配置（可选）：

sudo rm /etc/nginx/sites-enabled/default

测试配置是否正确：

sudo nginx -t

重启服务：

sudo systemctl restart nginx

*nginx默认的webroot目录是/var/www/html，可以自己在上面的配置文件中指定，不指定就是使用默认

3.安装jenkins

添加jenkins GPG密钥

wget -q -O - https://pkg.jenkins.io/debian/jenkins.io.key | sudo apt-key add -

添加jenkins apt仓库

sudo sh -c 'echo deb https://pkg.jenkins.io/debian-stable binary/ > /etc/apt/sources.list.d/jenkins.list'

更新仓库

sudo apt update

安装jenkins

sudo apt-get install jenkins

启动服务

sudo systemctl start jenkins

开机自启动

sudo systemctl enable jenkins

获取初始密码

sudo cat /var/lib/jenkins/secrets/initialAdminPassword

登录jenkins查看，地址一般是http://服务器ip：8080（记得把服务器的防火墙规则改一下，放行8080端口的访问）

先选择推荐，后续有要用的自己加就好：

实例配置的jenkins URL改成内网的ip

配置什么的跳过也没关系，后面都可以再改：

把下面几个插件装上：

添加gitee

这里的验证方式有很多种，可以账户名密码或者ssl等

测试连接之后就可以创建job了

新建job之后相关配置如下：

选之前配好的gitee链接

写脚本：

具体如下：

pipeline {
    agent any
    stages {
        stage('Checkout') {
            steps {
                //这里写凭证的唯一识别ID，url是项目的git地址
                git credentialsId:'ID', url:'https://gitee.com/xxx.git'
            }
        }
        stage('Install Dependencies') {
            steps {
                script {
                    def pnpmInstalled = sh(returnStatus: true, script: 'pnpm -v') == 0
                    
                    if (!pnpmInstalled) {
                        // 如果 pnpm 未安装，使用 npm 安装 pnpm
                        sh 'npm install -g pnpm'
                    }
                    sh 'pnpm i'
                }
            }
        }
        stage('Build') {
            steps {
                script {
                    withEnv(["NODE_OPTIONS=--max-old-space-size=2048"]) {
                        sh 'pnpm build:prod'
                    }
                }
            }
        }
    }
    post {
        success {
            script {
                // 假设构建产物位于当前工作目录的dist文件夹下
                // 假设Nginx的webroot目录是/var/www/html
                // 将dist目录下的所有文件复制到Nginx的webroot目录
                // 具体jenkins拉取的项目文件目录可以自行更改
                sh 'cp -r /var/lib/jenkins/workspace/项目名/dist/* /var/www/html/'
                // 重启Nginx服务以应用更改
                //sh 'sudo systemctl restart nginx'
                // 发送构建成功的通知
                echo "Build successful and deployed!"
            }
        }
    }
}

这里勾选上，否则需要手动通过脚本审批

*需要注意的是，脚本里如果有sudo操作，需要额外配置密码或者ssh凭证，否则无法执行sudo操作

查看文件目录

有多种方式，一般情况下，云服务器有资源管理器，可以找一下jenkins的目录

创建用户组

www-data是用户组，jenkins是用户名，这里的用户名要和jenkins运行的用户一致，jenkins运行的用户可以查看进程启动者或者jenkins配置文件等

sudo usermod -a -G www-data jenkins

更改文件夹所有者

sudo chown -R jenkins:www-data /var/www/html/

修改/var/www/html文件夹的操作权限

sudo chmod -R 755 /var/www/html/

4.测试

现在可以尝试输入服务器外网ip：nginx配置的端口查看部署是否成功

三.结语

文章中有部分操作具有优化空间，如文件覆写权限等，对于jenkins的自动化流程也有多种选择，本文选择的仅是选择了其中一种方式，jenkinsfile文件还可以直接写在前端项目中，具体搭建部署过程中可以根据自身实际情况灵活选择调整。