Jenkins & Nginx & Vue项目自动化部署-EW帮帮网

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>${ENV, var="JOB_NAME"}-第${BUILD_NUMBER}次构建日志</title>
</head>

<body leftmargin="8" marginwidth="0" topmargin="8" marginheight="4" offset="0">
    <div width="95%" cellpadding="0" cellspacing="0"
        style="font-size: 11pt; font-family: Tahoma, Arial, Helvetica, sans-serif">
        <div>本邮件由系统自动发出，无需回复！
            <br />
            <br>各位同事，大家好，以下为${PROJECT_NAME }自动化测试项目构建信息
            <br />
            <div>
                <font color="#CC0000">构建结果 - ${BUILD_STATUS}</font>
            </div>
        </div>
        <div>
            <h4>
                <font color="#0B610B">构建信息</font>
            </h4>
            <hr size="2" width="100%" />
            <ul>
                <li>项目名称 ： ${JOB_NAME}</li>
                <li>构建编号 ： 第${BUILD_NUMBER}次构建</li>
                <li>触发原因： ${CAUSE}</li>
                <li>构建状态： ${BUILD_STATUS}</li>
                <li>构建日志： <a href="${BUILD_URL}console">${BUILD_URL}console</a>
                <li>工作目录&nbsp;：&nbsp;<a href="${PROJECT_URL}ws">${PROJECT_URL}ws</a></li>
                </li>
                <li>构建 Url ： <a href="${BUILD_URL}">${BUILD_URL}</a>
                </li>
                <li>项目 Url ： <a href="${PROJECT_URL}">${PROJECT_URL}</a>
                </li>
            </ul>
        </div>
        <div>
            <h4>
                <font color="#0B610B">测试报告</font>
            </h4>
            <hr size="2" width="100%" />
            <b>点击查看测试报告： <a href="http://192.168.30.233:8080/job/ ${JOB_NAME}/${BUILD_NUMBER}/allure">http://192.168.30.233:8080/job/hbintrade-ui/${BUILD_NUMBER}/allure</a></b>
        </div>
        <!-- <div>
            <h4>
                <font color="#0B610B">测试结果</font>
            </h4>
            <hr size="2" width="100%" />
            <div>
                本次测试共执行<b>${TEST_COUNTS}</b>个用例，成功<b style="color: green">${TEST_COUNTS,var="pass"}</b>个，失败<b
                    style="color: red">${TEST_COUNTS,var="fail"}</b>个，跳过<b
                    style="color: #FFEB3B">${TEST_COUNTS,var="skip"}</b>个。
            </div>
        </div> -->
        <div>
            <h4>
                <font color="#0B610B">构建日志 (最后20行):</font>
                <hr size="2" width="100%" align="center" />
            </h4>
        </div>
        <div>
            <ul>
                <li>${BUILD_LOG, maxLines=22}</li>
            </ul>
        </div>
    </div>
</body>

</html>

默认构建失败发送邮件

配置邮件通知模块：

qq邮箱/账号与安全/获取授权码，用户名：发件邮箱密码：授权码

2.5 任务配置

选择自由风格创建项目
配置丢弃策略
分支参数。Git Parameter配置 name:branch_name,默认值：origin/master
源码管理。配置项目地址和Gitee账号凭证，指定分支为：$branch_name

构建步骤。新增Execute shell

cnpm install
npm run build:dev

构建后操作。新增Editable Email Notification 发邮件使用默认的即可，或者自定义内容模版

需要自动化部署的配置构建触发器

去Gitee webhook里新建填写url和密码

三、Nginx配置

3.1 配置路由转发

server {
        listen       80;
        server_name  192.168.30.233; ## 重要！！！修改成你的外网 IP/域名

        location / { ## 前端项目
            root   D:\JenkinsData\workspace\xxx-ui\dist;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }

        location /admin-api/ { ## 后端项目 - 管理后台
            proxy_pass http://192.168.30.233:48080/admin-api/;
            proxy_set_header Host $http_host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header REMOTE-HOST $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }

    }

四、部署项目

4.1 构建项目

选择hbintrade-ui项目
点击Build with Parameters
选择发布分支
点击Build
点进构建记录，查看日志

4.2 启动Nginx

./nginx

4.3 访问项目

ip:80

问题

nvm安装完node，node、npm命令无法使用

因为安装nvm时候配置的nodejs的路径不存在，导致环境变量配置有问题。解决：nvm/新建 nodejs 文件夹，修改环境变量指向 nvm/nodejs

执行 npm run 报错 Please verify that the package.json has a valid “main“ entry_please verify that the package.json has a valid "m-CSDN博客

删除node_module 重新执行命令打包

Jenkins & Nginx & Vue项目自动化部署

一、环境准备

1.1 Jenkins搭建

1.2 NVM和Nodejs安装

1.3 Nginx安装

二、Jenkins配置

2.1 相关插件安装

2.2 全局工具安装

2.3 环境变量配置

2.4 邮箱配置（构建后发送邮件）

2.5 任务配置

三、Nginx配置

3.1 配置路由转发

四、部署项目

4.1 构建项目

4.2 启动Nginx

4.3 访问项目

问题

网站公告

今日签到

热门文章

最新发布