微服务持续集成之部署前端静态web网站(前后端对接)

微服务持续集成之部署前端静态web网站

在生产服务器安装配置nginx

生成服务器安装nginx

yum -y install epel-release
yum -y install nginx

修改nginx端口,将端口修改为9090,防止端口冲突

vim /etc/nginx/nginx.conf
--------
    server {
        listen       9090;
        listen       [::]:9090;
        server_name  _;
        root         /usr/share/nginx/html;
---------

image-20220303150844161

关闭selinux,启动nginx

setenforce 0
 sed -i '/^SELINUX/ s/enforcing/disabled/' /etc/selinux/config
 systemctl disable firewalld --now
 
 systemctl enable nginx --now
 netstat -natp |grep 9090

浏览器访问测试

image-20220303152155471

jenkin安装NodeJs插件

安装NodeJs插件

image-20220303151733405

image-20220303152225350

jenkins 配置nginx服务

Manage Jenkins->Global Tool Configuration

image-20220303152338302

image-20220303152419219

创建前端流水线项目

创建前端流水线项目

image-20220303152535209

image-20220303152833486

image-20220303232753396

//harbor的凭证
def  git_auth="f3268a97-e838-4da4-ba6a-5a4ef6f12c4b"

node {
    stage('pull code') {
        //切换成变量,字符串符号使用双引号
        checkout([$class: 'GitSCM', branches: [[name: '*/master']], extensions: [], userRemoteConfigs: [[credentialsId: "${git_auth}", url: 'git@192.168.23.10:my_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)])
    }
}

凭证的id获取方式:在凭证管理,点击对应的凭证-->点击update--->找到id栏

image-20220303235826378

image-20220303235839978

image-20220303235852072

使用流水线语法,生成代码

image-20220303232955849

image-20220303233255926

image-20220303233307376

注意nodejs的名字需要和全局工具里配置的nodejs的name一致

image-20220303233445689

片段生成器生成代码:

image-20220304000531762

image-20220304000631168

image-20220304000842442

image-20220304000901377

修改前端项目配置的网关地址

修改前端项目的配置文件,配置网关地址

tensquareAdmin-->config--->prod.env.js

image-20220303234401207

image-20220303234513105

保存后提交

image-20220303234621945

image-20220303234633026

image-20220303234646235

image-20220303234703787

构建项目

image-20220303235021366

image-20220303235702109

在生产服务器的站点目录/usr/share/nginx/html下查看

image-20220303235623029

访问站点

访问生产服务器的 9090端口,账号是 admin/123456

image-20220304001202735

登录进入后,点击左侧的活动信息管理,可以看到活动信息。网站部署成功

image-20220304001348658

image-20220304001253423

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值