CICD持续集成，利用Jenkins自动化构建发布Docker容器【前端代码构建发布、整个微服务部署完成】（五）

前端搭建

目录

一、推送前端到Gitlab

1.安装TortoiseGit

2.设置中文

3.上传前端代码

①Gitlab创建前端项目

②上传代码

二、Nginx服务器部署

1.安装Nginx服务器

2.修改Nginx配置文件

三、配置Jenkins完成所有服务配置

1.安装NodeJs插件，并配置Nginx服务器

2.创建前端流水线项目

3.设置前端项目并上传

4.构建测试

---

一、推送前端到Gitlab

1.安装TortoiseGit

直接安装即可，这边用的版本是2.13.0.1

安装完之后顺便安装个简体中文补丁方便操作

2.设置中文

3.上传前端代码

①Gitlab创建前端项目

②上传代码

先到前端项目目录下

这就推送上去了。

二、Nginx服务器部署

1.安装Nginx服务器

yum install epel-release

yum -y install nginx

systemctl start nginx

访问网页测试nginx

2.修改Nginx配置文件

vim /etc/nginx/nginx.conf

    server {

        listen       90;

        listen       [::]:90;

        server_name  _;

        root         /usr/share/nginx/html;
    }

重启nginx

三、配置Jenkins完成所有服务配置

1.安装NodeJs插件，并配置Nginx服务器

Jenkins配置Nginx服务器

Manage Jenkins->Global Tool Configuration

应用并保存

2.创建前端流水线项目

填写脚本内容，语法生生之前文章有，请自行查找

//harbor的凭证

def  git_auth="520d10cb-e95e-48d5-8b84-ca1be098d23f"

node {

    stage('pull code') {

        //切换成变量，字符串符号使用双引号

        checkout([$class: 'GitSCM', branches: [[name: "*/${branch}"]], extensions: [], userRemoteConfigs: [[credentialsId: "${git_auth}", url: 'git@192.168.195.180:kgc_group/tensquare_front.git']]])

    }

    stage('make package,deploy') {

            //使用nodejs的npm打包

            nodejs('nodejs12'){

                sh '''

                    npm install

                    npm run build

                '''

            }

            //远程部署

            sshPublisher(publishers: [sshPublisherDesc(configName: 'master_server', transfers: [sshTransfer(cleanRemote: false, excludes: '', execCommand: '', execTimeout: 120000, flatten: false, makeEmptyDirs: false, noDefaultExcludes: false, patternSeparator: '[, ]+', remoteDirectory: '/usr/share/nginx/html', remoteDirectorySDF: false, removePrefix: 'dist', sourceFiles: 'dist/**')], usePromotionTimestamp: false, useWorkspaceInPromotion: false, verbose: false)])

    }

}

设置完之后，保存并应用

3.设置前端项目并上传

更改这个文件里的地址

等待上传完

4.构建测试

构建完成

访问网页

http://192.168.72.17:90

用户密码：admin/123456