前端搭建
目录
一、推送前端到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.构建测试
构建完成
访问网页
用户密码:admin/123456