Gitea + Jenkins 自動構(gòu)建前端項目并部署到服務(wù)器

https://juejin.im/post/6887751398499287054?utm_source=gold_browser_extension#heading-3

Gitea 用于構(gòu)建 Git 局域網(wǎng)服務(wù)器萤厅，Jenkins 是 CI/CD 工具，用于部署前端項目。

配置 Gitea

下載Gitea，選擇一個喜歡的版本，例如 1.13惰许，選擇gitea-1.13-windows-4.0-amd64.exe下載。

下載完后，新建一個目錄（例如 gitea）访递，將下載的 Gitea 軟件放到該目錄下，雙擊運行同辣。

打開localhost:3000就能看到 Gitea 已經(jīng)運行在你的電腦上了拷姿。

點擊注冊，第一次會彈出一個初始配置頁面旱函，數(shù)據(jù)庫選擇SQLite3响巢。另外把localhost改成你電腦的局域網(wǎng)地址，例如我的電腦 IP 為192.168.0.118棒妨。

填完信息后踪古，點擊立即安裝，等待一會，即可完成配置灾炭。

繼續(xù)點擊注冊用戶茎芋，第一個注冊的用戶將會成會管理員。

打開 Gitea 的安裝目錄蜈出，找到custom\conf\app.ini田弥，在里面加上一行代碼START_SSH_SERVER = true。這時就可以使用 ssh 進行 push 操作了铡原。

8. 如果使用 http 的方式無法克隆項目偷厦，請取消 git 代理。

git config --global --unset http.proxygit config --global --unset https.proxy復(fù)制代碼

配置 Jenkins

需要提前安裝 JDK燕刻，JDK 安裝教程網(wǎng)上很多只泼，請自行搜索。

打開Jenkins下載頁面卵洗。

安裝過程中遇到Logon Type時请唱，選擇第一個。

端口默認為 8080过蹂，這里我填的是 8000十绑。安裝完會自動打開http://localhost:8000網(wǎng)站，這時需要等待一會酷勺，進行初始化本橙。

按照提示找到對應(yīng)的文件（直接復(fù)制路徑在我的電腦中打開），其中有管理員密碼脆诉。

6. 安裝插件甚亭，選擇第一個。

創(chuàng)建管理員用戶击胜，點擊完成并保存亏狰，然后一路下一步。

8. 配置完成后自動進入首頁潜的，這時點擊Manage Jenkins->Manage plugins安裝插件骚揍。

9. 點擊可選插件，輸入 nodejs啰挪，搜索插件信不，然后安裝。10. 安裝完成后回到首頁亡呵，點擊Manage Jenkins->Global Tool Configuration配置 nodejs抽活。如果你的電腦是 win7 的話，nodejs 版本最好不要太高锰什，選擇 v12 左右的就行下硕。

創(chuàng)建靜態(tài)服務(wù)器

建立一個空目錄丁逝，在里面執(zhí)行npm init -y，初始化項目梭姓。

執(zhí)行npm i express下載 express霜幼。

然后建立一個server.js文件，代碼如下：

constexpress =require('express')constapp = express()constport =8080app.use(express.static('dist'))app.listen(port,() =>{console.log(`Example app listening at http://localhost:${port}`)})復(fù)制代碼

它將當(dāng)前目錄下的dist文件夾設(shè)為靜態(tài)服務(wù)器資源目錄誉尖，然后執(zhí)行node server.js啟動服務(wù)器罪既。

由于現(xiàn)在沒有dist文件夾，所以訪問網(wǎng)站是空頁面铡恕。

不過不要著急琢感，一會就能看到內(nèi)容了。

自動構(gòu)建 + 部署到服務(wù)器

下載 Jenkins 提供的 demo 項目building-a-multibranch-pipeline-project探熔，然后在你的 Gitea 新建一個倉庫驹针，把內(nèi)容克隆進去，并提交到 Gitea 服務(wù)器诀艰。

2. 打開 Jenkins 首頁柬甥，點擊新建 Item創(chuàng)建項目。

3. 選擇源碼管理涡驮，輸入你的 Gitea 上的倉庫地址暗甥。

你也可以嘗試一下定時構(gòu)建，下面這個代碼表示每 5 分鐘構(gòu)建一次捉捅。

選擇你的構(gòu)建環(huán)境，這里選擇剛才配置的 nodejs虽风。

6. 點擊增加構(gòu)建步驟棒口，windows 要選execute windows batch command，linux 要選execute shell辜膝。

輸入npm i && npm run build && xcopy .\build\* G:\node-server\dist\ /s/e/y无牵，這行命令的作用是安裝依賴，構(gòu)建項目厂抖，并將構(gòu)建后的靜態(tài)資源復(fù)制到指定目錄G:\node-server\dist\ 茎毁。這個目錄是靜態(tài)服務(wù)器資源目錄。

8. 保存后忱辅，返回首頁七蜘。點擊項目旁邊的小三角，選擇build now墙懂。

9. 開始構(gòu)建項目橡卤，我們可以點擊項目查看構(gòu)建過程。

10. 構(gòu)建成功损搬，打開http://localhost:8080/看一下結(jié)果碧库。

11. 由于剛才設(shè)置了每 5 分鐘構(gòu)建一次柜与，我們可以改變一下網(wǎng)站的內(nèi)容，然后什么都不做嵌灰，等待一會再打開網(wǎng)站看看弄匕。

12. 把修改的內(nèi)容提交到 Gitea 服務(wù)器，稍等一會沽瞭。打開網(wǎng)站粘茄，發(fā)現(xiàn)內(nèi)容已經(jīng)發(fā)生了變化。

使用 pipeline 構(gòu)建項目

使用流水線構(gòu)建項目可以結(jié)合 Gitea 的webhook鉤子秕脓，以便在執(zhí)行g(shù)it push的時候柒瓣，自動構(gòu)建項目。

點擊首頁右上角的用戶名吠架，選擇設(shè)置芙贫。

添加 token，記得將 token 保存起來傍药。

打開 Jenkins 首頁磺平，點擊新建 Item創(chuàng)建項目。

4. 點擊構(gòu)建觸發(fā)器拐辽，選擇觸發(fā)遠程構(gòu)建拣挪，填入剛才創(chuàng)建的 token。

5. 選擇流水線俱诸，按照提示輸入內(nèi)容菠劝，然后點擊保存。

6. 打開 Jenkins 安裝目錄下的jenkins.xml文件睁搭，找到<arguments>標(biāo)簽赶诊，在里面加上-Dhudson.security.csrf.GlobalCrumbIssuerConfiguration.DISABLE_CSRF_PROTECTION=true。它的作用是關(guān)閉CSRF驗證园骆，不關(guān)的話舔痪，Gitea 的webhook會一直報 403 錯誤，無法使用锌唾。加好參數(shù)后锄码，在該目錄命令行下輸入jenkins.exe restart重啟 Jenkins。

7. 回到首頁晌涕，配置全局安全選項滋捶。勾上匿名用戶具有可讀權(quán)限，再保存渐排。

打開你的 Gitea 倉庫頁面炬太，選擇倉庫設(shè)置。

點擊管理 web 鉤子驯耻，添加 web 鉤子亲族，鉤子選項選擇Gitea炒考。

目標(biāo) URL 按照 Jenkins 的提示輸入內(nèi)容。然后點擊添加 web 鉤子霎迫。

11. 點擊創(chuàng)建好的 web 鉤子斋枢，拉到下方，點擊測試推送知给。不出意外瓤帚，應(yīng)該能看到推送成功的消息，此時回到 Jenkins 首頁涩赢，發(fā)現(xiàn)已經(jīng)在構(gòu)建項目了戈次。

12. 由于沒有配置Jenkinsfile文件，此時構(gòu)建是不會成功的筒扒。所以接下來需要配置一下Jenkinsfile文件怯邪。將以下代碼復(fù)制到你 Gitea 項目下的Jenkinsfile文件。jenkins 在構(gòu)建時會自動讀取文件的內(nèi)容執(zhí)行構(gòu)建及部署操作花墩。

pipeline {? ? agent any? ? stages {? ? ? ? stage('Build') {? ? ? ? ? ? steps {? // window 使用 bat悬秉， linux 使用 sh? ? ? ? ? ? ? ? bat 'npm i'? ? ? ? ? ? ? ? bat 'npm run build'? ? ? ? ? ? }? ? ? ? }? ? ? ? stage('Deploy') {? ? ? ? ? ? steps {? ? ? ? ? ? ? ? bat 'xcopy .\\build\\* D:\\node-server\\dist\\ /s/e/y' // 這里需要改成你的靜態(tài)服務(wù)器資源目錄? ? ? ? ? ? }? ? ? ? }? ? }}復(fù)制代碼

每當(dāng)你的 Gitea 項目執(zhí)行push操作時，Gitea 都會通過webhook發(fā)送一個 post 請求給 Jenkins冰蘑，讓它執(zhí)行構(gòu)建及部署操作和泌。

小結(jié)

如果你的操作系統(tǒng)是 Linux，可以在 Jenkins 打包完成后祠肥，使用 ssh 遠程登錄到阿里云武氓，將打包后的文件復(fù)制到阿里云上的靜態(tài)服務(wù)器上，這樣就能實現(xiàn)阿里云自動部署了搪柑。具體怎么遠程登錄到阿里云聋丝，請看下文中的《Github Actions 部署到阿里云》一節(jié)。

Github Actions 自動構(gòu)建前端項目并部署到服務(wù)器

如果你的項目是 Github 項目工碾，那么使用 Github Actions 也許是更好的選擇。

部署到 Github Page

接下來看一下如何使用 Github Actions 部署到 Github Page百姓。

在你需要部署到 Github Page 的項目下渊额，建立一個 yml 文件，放在.github/workflow目錄下垒拢。你可以命名為ci.yml旬迹，它類似于 Jenkins 的Jenkinsfile文件，里面包含的是要自動執(zhí)行的腳本代碼求类。

這個 yml 文件的內(nèi)容如下：

name:BuildandDeployon:# 監(jiān)聽 master 分支上的 push 事件push:branches:-masterjobs:build-and-deploy:runs-on:ubuntu-latest# 構(gòu)建環(huán)境使用 ubuntusteps:-name:Checkoutuses:actions/checkout@v2.3.1with:persist-credentials:false-name:InstallandBuild# 下載依賴打包項目run:|

? ? ? ? ? npm install

? ? ? ? ? npm run build-name:Deploy# 將打包內(nèi)容發(fā)布到 github pageuses:JamesIves/github-pages-deploy-action@3.5.9# 使用別人寫好的 actionswith:# 自定義環(huán)境變量ACCESS_TOKEN:${{secrets.VUE_ADMIN_TEMPLATE}}# VUE_ADMIN_TEMPLATE 是我的 secret 名稱奔垦，需要替換成你的BRANCH:masterFOLDER:distREPOSITORY_NAME:woai3c/woai3c.github.io# 這是我的 github page 倉庫TARGET_FOLDER:github-actions-demo# 打包的文件將放到靜態(tài)服務(wù)器 github-actions-demo 目錄下復(fù)制代碼

上面有一個ACCESS_TOKEN變量需要自己配置。

打開 Github 網(wǎng)站尸疆，點擊你右上角的頭像椿猎，選擇settings惶岭。

>need-to-insert-img

點擊左下角的developer settings。

>need-to-insert-img

在左側(cè)邊欄中犯眠，單擊Personal access tokens（個人訪問令牌）按灶。

>need-to-insert-img

單擊Generate new token（生成新令牌）。

輸入名稱并勾選repo筐咧。

拉到最下面鸯旁，點擊Generate token，并將生成的 token 保存起來量蕊。

打開你的 Github 項目铺罢，點擊settings。

點擊secrets->new secret残炮。

創(chuàng)建一個密鑰韭赘，名稱隨便填（中間用下劃線隔開），內(nèi)容填入剛才創(chuàng)建的 token吉殃。

將上文代碼中的ACCESS_TOKEN: ${{ secrets.VUE_ADMIN_TEMPLATE }}替換成剛才創(chuàng)建的 secret 名字辞居，替換后代碼如下ACCESS_TOKEN: ${{ secrets.TEST_A_B }}。保存后蛋勺，提交到 Github瓦灶。

以后你的項目只要執(zhí)行g(shù)it push，Github Actions 就會自動構(gòu)建項目并發(fā)布到你的 Github Page 上抱完。

Github Actions 的執(zhí)行詳情點擊倉庫中的Actions選項查看贼陶。

具體詳情可以參考一下我的 demo 項目github-actions-demo。

>need-to-insert-img

構(gòu)建成功后巧娱，打開 Github Page 網(wǎng)站碉怔，可以發(fā)現(xiàn)內(nèi)容已經(jīng)發(fā)布成功。

Github Actions 部署到阿里云

初始化阿里云服務(wù)器

購買阿里云服務(wù)器禁添，選擇操作系統(tǒng)撮胧，我選的 ubuntu

在云服務(wù)器管理控制臺選擇實例->更多->密鑰->重置實例密碼（一會登陸用）

選擇遠程連接->VNC，會彈出一個密碼老翘，記住它芹啥，以后遠程連接要用（ctrl + alt + f1~f6 切換終端，例如 ctrl + alt + f1 是第一個終端）

進入后是一個命令行輸入root（默認用戶名）铺峭，密碼為你剛才重置的實例密碼

登陸成功墓怀，更新安裝源sudo apt-get update && sudo apt-get upgrade -y

安裝 npmsudo apt-get install npm

安裝 npm 管理包sudo npm install -g n

安裝 node 最新穩(wěn)定版sudo n stable

創(chuàng)建一個靜態(tài)服務(wù)器

mkdir node-server// 創(chuàng)建 node-server 文件夾cd node-server// 進入 node-server 文件夾npm init -y// 初始化項目npm i expresstouch server.js// 創(chuàng)建 server.js 文件vim server.js// 編輯 server.js 文件復(fù)制代碼

將以下代碼輸入進去（用 vim 進入文件后按 i 進行編輯，保存時按 esc 然后輸入 :wq卫键，再按 enter）傀履，更多使用方法請自行搜索。

constexpress =require('express')constapp = express()constport =3388// 填入自己的阿里云映射端口莉炉，在網(wǎng)絡(luò)安全組配置钓账。app.use(express.static('dist'))app.listen(port,'0.0.0.0',() =>{console.log(`listening`)})復(fù)制代碼

執(zhí)行node server.js開始監(jiān)聽碴犬，由于暫時沒有dist目錄，先不要著急官扣。

注意翅敌，監(jiān)聽 IP 必須為0.0.0.0，詳情請看部署Node.js項目注意事項惕蹄。

阿里云入端口要在網(wǎng)絡(luò)安全組中查看與配置蚯涮。

創(chuàng)建阿里云密鑰對

請參考創(chuàng)建SSH密鑰對和綁定SSH密鑰對，將你的 ECS 服務(wù)器實例和密鑰綁定卖陵，然后將私鑰保存到你的電腦（例如保存在 ecs.pem 文件）遭顶。

打開你要部署到阿里云的 Github 項目，點擊 setting->secrets泪蔫。

點擊 new secret

secret 名稱為SERVER_SSH_KEY枢劝，并將剛才的阿里云密鑰填入內(nèi)容介评。

點擊 add secret 完成笼沥。

在你項目下建立.github\workflows\ci.yml文件哪审，填入以下內(nèi)容：

name:Buildappanddeploytoaliyunon:#監(jiān)聽push操作push:branches:# master分支，你也可以改成其他分支-masterjobs:build:runs-on:ubuntu-lateststeps:-uses:actions/checkout@v1-name:InstallNode.jsuses:actions/setup-node@v1with:node-version:'12.16.2'-name:Installnpmdependenciesrun:npminstall-name:Runbuildtaskrun:npmrunbuild-name:DeploytoServeruses:easingthemes/ssh-deploy@v2.1.5env:SSH_PRIVATE_KEY:${{secrets.SERVER_SSH_KEY}}ARGS:'-rltgoDzvO --delete'SOURCE:dist# 這是要復(fù)制到阿里云靜態(tài)服務(wù)器的文件夾名稱REMOTE_HOST:'118.190.217.8'# 你的阿里云公網(wǎng)地址REMOTE_USER:root# 阿里云登錄后默認為 root 用戶餐曹，并且所在文件夾為 rootTARGET:/root/node-server# 打包后的 dist 文件夾將放在 /root/node-server復(fù)制代碼

保存逛拱，推送到 Github 上。

以后只要你的項目執(zhí)行g(shù)it push操作台猴，就會自動執(zhí)行ci.yml定義的腳本朽合，將打包文件放到你的阿里云靜態(tài)服務(wù)器上。

這個 Actions 主要做了兩件事：

克隆你的項目饱狂，下載依賴曹步，打包。

用你的阿里云私鑰以 SSH 的方式登錄到阿里云休讳，把打包的文件上傳（使用 rsync）到阿里云指定的文件夾中讲婚。

如果還是不懂，建議看一下我的demo俊柔。

作者：譚光志

鏈接：https://juejin.im/post/6887751398499287054

來源：掘金

著作權(quán)歸作者所有磺樱。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處婆咸。