微服務持續整合之部署前端靜態web網站

• 在生產伺服器安裝配置nginx
• jenkin安裝NodeJs外掛
• 建立前端流水線專案
• 修改前端專案配置的閘道器地址
• 構建專案
• 訪問站點

在生產伺服器安裝配置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;
---------

 

關閉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

瀏覽器訪問測試

jenkin安裝NodeJs外掛

安裝NodeJs外掛

jenkins 配置nginx服務

Manage Jenkins->Global Tool Configuration

建立前端流水線專案

建立前端流水線專案

//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: '[email protected]: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欄

使用流水線語法，生成程式碼

注意nodejs的名字需要和全域性工具裡配置的nodejs的name一致

片段生成器生成程式碼：

修改前端專案配置的閘道器地址

修改前端專案的配置檔案，配置閘道器地址

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

儲存後提交

構建專案

在生產伺服器的站點目錄/usr/share/nginx/html下檢視

訪問站點

訪問生產伺服器的 9090埠，賬號是 admin/123456

登入進入後，點選左側的活動資訊管理，可以看到活動資訊。網站部署成功