前端項目利用Gitlab CI/CD流水線自動化打包、部署云服務

疊甲前言

本文僅作為個人學習GitLab的CI/CD功能記錄，不適合作為專業性指導，如有紕漏，煩請君指正。

Gitlab的CI/CD做什么用的

自工作以來，去過大大小小公司，有一些公司技術人員專業性欠佳，每當產品經理或測試人員需要最新或者某個版本的包時【比如安卓的apk包，IOS的ipa包，前端的打包靜態資源】，開發總是要停下手中的工作，去手動給測試打包，這類手動工作包括了打開某個項目，加載項目依賴，構建項目生成產物，然后部署產物讓測試人員得以看到效果；可這些步驟都需要時間，非常影響開發效率。
所以一些有經驗的開發人員會去構建一套自動化部署腳本，方便測試人員測試與產品經理驗收，如果公司項目倉庫用的是GitLab，那么CI/CD工具將是非常適合解決這類問題的。它可以通過腳本自由的配置打包部署流程，簡單說，就是代替你做這些事情，掌握這類工具的使用是非常有必要的。

Gitlab的CI/CD由什么構成

Gitlab的CI/CD主要是由流水線和Runner組成。

流水線：就是每當你提交代碼到GitLab倉庫后，會生成一個Job任務，這個任務可以自定義流程，也就是要完成什么事情，基本常見的就是：構建、測試、發布。

Runner：就是這個任務由誰來執行。你可以定義在哪臺主機執行，一般情況推薦使用專門用于打包工作的云主機，當然不是絕對的，這個取決于你公司的需求和業務。【因為之前有個公司就存在玄學說法：“安卓打包機器IP如果是國內的那么上架谷歌商店機審通過概率會很低”， 真假我就不去探究，我放云服務器上完全是為了方便部署】

準備工作

  1. 申請一個Gitlab個人賬號【需要有管理員權限的賬號，主要你也不能用公司的GitLab瞎搞呀】
  2. 購買一個云服務器, 并配置好Nodejs環境。
  3. 將前端項目的遠程地址切換為GitLab倉庫。

注意：國內Gitlab代理商的應該是極狐gitlab。此外姑且認為你對于Linux基本命令操作有一些了解，會使用一些基本部署工具。

配置Runner

云服務器下載安裝Runner
請按詳細文檔操作：安裝Runner
我的云服務器是 Linux的Ubuntu 24.0

curl -L "https://packages.gitlab.com/install/repositories/runner/gitlab-runner/script.deb.sh" | sudo bash

sudo apt install gitlab-runner

云服務器注冊Runner
請按詳細文檔操作：注冊Runner
這里，我注冊一個 群組Runner，這樣在gitlab的group下的所有項目都可以用這個Runner，具體看你個人需求。
在這里插入圖片描述
進入步驟：
GitLab -> project -> setting -> CI/CD -> Runner->創建 群組Runner
我的云服務器是 Linux的Ubuntu 24.0， 暫未使用Docker等部署容器
在這里插入圖片描述
在云主機上執行 提示命令
在這里插入圖片描述
注冊時，execute選擇 shell.
此時Runner就注冊好了，回到GitLab -> project -> setting -> CI/CD -> Runner，應該可以看到群組已經創建了Runner。
在這里插入圖片描述

配置流水線腳本

流水線腳本就是定義 任務具體要做哪些事情：

# 定義全局變量，之后腳本可以引用
variables:ProjectName: "webpack_study"BuildResult: buildResult.txt# 定義Job任務腳本流程順序：構建 -> 部署（測試） -> 發布（線上）
stages:- build- deploy- publish# 定義緩存，縮短每次拉取依賴的時間（前端項目主要緩存node_modules和package-lock.json）
cache:key: defaultCache # 緩存名字paths:- node_modules/- package-lock.json# 定義每次執行Job任務前 都會去執行 （主動拉取項目依賴）
before_script:- echo "初始化環境 更新依賴和配置..."- npm install- echo "環境初始化完成!"- echo "依賴和配置更新完成!"# 執行構建測試環境腳本
Build_Test_Job:stage: build     # 流程階段when: manual     # 手動觸發， 可以自定義條件觸發 only:- /^\d{8}$/    # 限制分支，正則表達式匹配只有分支名包含8個數字的才能生成此腳本【具體原因見末尾《1》】tags: - webPro       # tags匹配Runner，只有Runner具有這個Tag，任務才能在這個Runner上執行，【查看Runner-Tag見《2》】script:- echo "開始執行構建測試環境Web打包腳本..."    # echo 是輸出日志- npm run stage > $BuildResult         # 執行Package.json的腳本構建腳本，并將日志輸出到 buildResult.txt文件中【具體看你自己的前端項目配置的打包命令是什么】- echo "測試環境Web打包完成!"artifacts:paths:- $BuildResult       # gitlab平臺可見的打包產物：日志buildResult.txt文件- build              # gitlab平臺可見的打包產物：build文件夾【取決于你前端項目的腳本】Deploy_Test_Job:stage: deploywhen: manualonly:- /^\d{8}$/tags: - webProneeds: ["Build_Test_Job"] # 執行必要的前置條件script:- echo "開始執行部署測試環境Web打包產物到云服務器上的腳本..."- mkdir -p /var/www/web/build          # 云服務器 遞歸創建/var/www/web/build目錄，如果已有，則跳過【為何是這個目錄？請看《3》】- rm -rf /var/www/web/build/*          # 云服務器 移除/var/www/web/build目錄下的所有文件【需要授予gitlab-runner用戶讀寫權限，這里存在一定風險，建議使用DOCKER容器隔離】- cp -r build /var/www/web/ > $BuildResult # 將前端打包生成的build目錄【取決于你前端項目的腳本】文件移動到 /var/www/web 目錄- echo "測試環境Web發布完成!"artifacts:paths:- $BuildResult       # gitlab平臺可見的打包產物：日志buildResult.txt文件# 執行構建線上環境腳本
Build_Online_Job:stage: build     # 流程階段when: manual     # 手動觸發， 可以自定義條件觸發 only:- /^\d{8}$/    # 限制分支，正則表達式匹配只有分支名包含8個數字的才能生成此腳本【具體原因見末尾《1》】tags: - webPro       # tags匹配Runner，只有Runner具有這個Tag，任務才能在這個Runner上執行，【查看Runner-Tag見《2》】script:- echo "開始執行構建線上環境Web打包腳本..."    # echo 是輸出日志- npm run product > $BuildResult         # 執行Package.json的腳本構建腳本，并將日志輸出到 buildResult.txt文件中- echo "線上環境Web打包完成!"artifacts:paths:- $BuildResult       # gitlab平臺可見的打包產物：日志buildResult.txt文件- build_online              # gitlab平臺可見的打包產物：build文件夾Publish_Online_Job:stage: publishwhen: manualonly:- /^\d{8}$/tags: - webProneeds: ["Build_Online_Job"] # 執行必要的前置條件script:- echo "開始執行部署線上環境Web打包產物到云服務器上的腳本..."- mkdir -p /var/www/web/build_online          # 云服務器 遞歸創建/var/www/web/build_online目錄，如果已有，則跳過- rm -rf /var/www/web/build_online/*          # 云服務器 移除/var/www/web/build_online目錄下的所有文件【需要授予gitlab-runner用戶讀寫權限，這里存在一定風險，建議使用DOCKER容器隔離】- cp -r build_online /var/www/web/ > $BuildResult # 將前端打包生成的build_online目錄文件移動到 /var/www/web 目錄- echo "線上環境Web發布完成!"#《1》
# 需求決定：前端項目因為每周五都要發一次版本，分支名字就是 20250718，分支上線后會合并到main分支，main分支的代碼就是穩定的，所以打包構建分支只允許周分支生成Job
#《2》
# GitLab -> Project -> setting -> CI/CD -> Runner
#《3》
# /var/www/web/因為此目錄我配置了 Nginx訪問映射，只要訪問xx.xx.xx（云服務器公網IP）:端口就會自動去找 /var/www/web/build/index.html
# 云服務器前端項目部署的測試環境端口是：113.45.241.111:8087
# 云服務器前端項目部署的線上環境端口是：113.45.241.111:8089
# 當然你也可以用Nginx部署, 也可以用Docker，jetBains哪個你熟悉用哪個。

完整前端項目代碼：
前端項目地址

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/diannao/91791.shtml
繁體地址，請注明出處：http://hk.pswp.cn/diannao/91791.shtml
英文地址，請注明出處：http://en.pswp.cn/diannao/91791.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

基于typescript嚴格模式以實現undo和redo功能為目標的命令模式代碼參考

基于typescript嚴格模式以實現undo和redo功能為目標的命令模式代碼參考

下面是一個完整的、嚴格模式下的 TypeScript 實現，包含 CommandManager、Command 和 CompositeCommand 類，支持 undo/redo 功能。完整實現代碼1. Command 接口和基類// src/commands/ICommand.ts export interface ICommand {execute(): void;undo(): vo…
閱讀更多...
2022年CIE SCI2區TOP，NSGA-II+直升機-無人機搜救任務分配，深度解析+性能實測

2022年CIE SCI2區TOP，NSGA-II+直升機-無人機搜救任務分配，深度解析+性能實測

目錄1.摘要2.數學模型3.求解方法4.結果展示5.參考文獻6.代碼獲取7.算法輔導應用定制讀者交流1.摘要 無人機任務分配對于保障搜救活動高效有序開展具有重要意義，但現有研究較少考慮無人機作業環境與性能對任務分配的影響。針對低空風場和地形因素對無人機能耗與性能…
閱讀更多...
暑期算法訓練.4

暑期算法訓練.4

目錄 15.力扣 904.水果成籃 15.1 題目解析： 15.2 算法思路： 15.2.1 暴力解法： 15.2.1 滑動窗口 15.3代碼演示： 15.4 總結反思： 16 力扣 438.找出字符串中所有字母的異位詞 16.1 題目解析： 16.2算法…
閱讀更多...
關于個人博客系統的測試報告

關于個人博客系統的測試報告

1）項目背景2）項目功能介紹 登陸寫博客/編輯已存在博客刪除博客注銷 2）基于項目功能設計相關測試用例3）基于測試用例編寫自動化測試 準備工作登陸界面相關博客首頁相關博客詳情頁相關編輯博客相關刪除博客相關注銷相關 4&#xff0…
閱讀更多...
Spring Boot 與微服務詳細總結

Spring Boot 與微服務詳細總結

一、Spring Boot 核心概述 Spring Boot 是簡化 Spring 應用開發的框架，作為 Spring 技術棧的整合方案和 J2EE 開發的一站式解決方案，其核心優勢體現在： 快速創建獨立運行的 Spring 項目，輕松集成主流框架內置 Servlet 容器&…
閱讀更多...
輕松上手：從零開始啟動第一個 Solana 測試節點

輕松上手：從零開始啟動第一個 Solana 測試節點

嗨，各位技術愛好者們！ 大家是否對 Solana 的“光速”交易處理能力感到好奇？或者你是一名開發者，正準備在 Solana 上構建下一個殺手級 dApp？無論大家是出于學習目的還是實際開發需求，親手運行一個 Solana 節…
閱讀更多...
Gerrit workflow

Gerrit workflow

提交代碼 每次提交代碼前，先執行 git pull --rebase ，確保已經合并天上代碼，解決沖突 git add git commit -m git push origin HEAD:refs/for/{BRANCH_NAME} 可考慮設置 alias 方式，參考下文 CR-2 情況處理(verify-1情況一樣處理…
閱讀更多...
量化交易如何查詢CFD指數實時行情

量化交易如何查詢CFD指數實時行情

CFD即所謂的差價合約，是投資者在不擁有實際資產的情況下，交易金融市場的一種方式。最近筆者研究這一塊比較多，但查遍整個中文互聯網卻很少找到關于CFD實時行情的查詢教程。因此有了這篇文章。以下我將通過一個簡單的Python代碼示例&#xff0…
閱讀更多...
sql練習二

sql練習二

首先，建表。創建學生表和score表接著導入創建好基礎信息就可以開始做了。3、分別查詢student表和score表的所有記錄4、查詢student表的第2條到第5條記錄5、從student表中查詢計算機系和英語系的學生的信息6、從student表中查詢年齡小于22歲的學生信息7、從student表…
閱讀更多...
windows11下基于docker單機部署ceph集群

windows11下基于docker單機部署ceph集群

windows下基于docker單機部署ceph集群 創建ceph專用網絡 docker network create --driver bridge --subnet 172.20.0.0/16 ceph-network查看是否創建成功（查看創建狀態） docker network inspect ceph-network拉取鏡像：(鏡像源自行選擇) docke…
閱讀更多...
使用DataGrip連接安裝在Linux上的Redis

使用DataGrip連接安裝在Linux上的Redis

目錄 一、前言 二、開放防火墻端口 三、使用DataGrip連接安裝在Linux上的Redis 一、前言 在學習黑馬Redis從入門到實戰的視頻，完成了Redis在linux上的安裝配置之后，我們可以使用圖形化界面方便操作使用redis數據庫。在24年JavaWebAI學習時連接MySQL數…
閱讀更多...
MySQL的union、union all導致排序失效

MySQL的union、union all導致排序失效

今天練習SQL，使用union all 連接各個查詢導致我的各個查詢排序失效，最后發現使用union all后會忽略各個模塊的order by，只有最外層的order by才會生效原SQL如下：( selectexam_id tid,count(distinct uid) uv, count(uid) pv frome…
閱讀更多...
LVS 集群技術實踐：NAT 與 DR 模式的配置與對比

LVS 集群技術實踐：NAT 與 DR 模式的配置與對比

1 實驗環境規劃 實驗目標是搭建一個負載均衡集群，通過 LVS 調度器將流量分發到兩臺真實服務器（RS1 和 RS2）。2.網絡配置3 實驗步驟關閉防火墻和 SELinux安裝 HTTP 服務（在 RS21和 RS2 上）：sudo systemctl s…
閱讀更多...
YOLOv8中添加SENet注意力機制

YOLOv8中添加SENet注意力機制

注意力機制（Attention Mechanism）是深度學習中的一種方法，在圖像處理領域，尤其是在卷積神經網絡（CNN）和視覺Transformer等架構中。圖像數據具有局部相關性，注意力機制可以幫助模型聚焦于圖像中更重要的區域，從而提升處理效果。 SENet（Squeeze-and-Excitation Network）…
閱讀更多...
SpringBoot五分鐘快速入門指南

SpringBoot五分鐘快速入門指南

使用 Spring Boot 構建應用 本指南提供了關于Spring Boot如何幫助您加速應用開發的一些示例。隨著您閱讀更多 Spring 入門指南，您將看到 Spring Boot 的更多用例。本指南旨在讓您快速了解 Spring Boot。如果您想創建自己的基于 Spring Boot 的項目，請訪問 Spring Initializr…
閱讀更多...
docker，防火墻關閉后，未重啟docker，導致端口映射失敗

docker，防火墻關閉后，未重啟docker，導致端口映射失敗

首先，看這篇文章前，建議先把網上其他的文章說的方法嘗試一遍！！！ 1. 現象 docker啟動某一個容器，然后映射端口時顯示失敗2. 解決 把網上的方法嘗試一遍之后，最后發現是防火墻的問題！&…
閱讀更多...
事務處理與AOP(web后端筆記第四期)

事務處理與AOP(web后端筆記第四期)

p.s.這是萌新自己自學總結的筆記，如果想學習得更透徹的話還是請去看大佬的講解 目錄事務spring事物管理事物屬性--回滾事物屬性--傳播行為(propagation)AOP一些核心概念通知類型通知的執行順序切入點表達式executionannotation連接點事務 事物是一組操作的集合&…
閱讀更多...
第36周———— RNN實現阿爾茨海默病診斷

第36周———— RNN實現阿爾茨海默病診斷

目錄 前言 1.檢查GPU 2.查看數據 3.劃分數據集 4.創建模型與編譯訓練 ????5.編譯及訓練模型 6.結果可視化 7.模型預測 8.總結： 前言 🍨 本文為🔗365天深度學習訓練營中的學習記錄博客 🍖 原作者：K同學啊 1.檢查G…
閱讀更多...
equals和hashcode方法重寫

equals和hashcode方法重寫

在 Java 中，當你需要基于對象的內容而非引用地址來判斷兩個對象是否相等時，就需要重寫equals和hashCode方法。以下是具體場景和實現原則：一、為什么需要同時重寫這兩個方法？equals方法：默認比較對象的內存地址&#xf…
閱讀更多...
Excel批量生成SQL語句 Excel批量生成SQL腳本 Excel拼接sql

Excel批量生成SQL語句 Excel批量生成SQL腳本 Excel拼接sql

Excel批量生成SQL語句 Excel批量生成SQL腳本 Excel拼接sql一、情境描述在Excel中有標準的格式化數據，如何快速導入到數據庫中呢？有些工具支持Excel導入的，則可以快速導入數據---例如Navicat；如果不支持呢，如果將Excel表…
閱讀更多...
最新文章

Copyright @ 2022~2023