Ⅰ gitLab CI/CD docker自動部署vue前端項目
查詢了好多資料，都沒有找到可以直接應用的，綜合了好多，配置runner之後，前端項目裡面需要在項目根目錄配置三個文件：
1..gitlab-ci.yml 文件
stages:
- build
- deploy
# 設置緩存
cache:
paths:
- node_moles/
- dist/
# 安裝依賴 before_script 會在每個 stages 執行之前運行
before_script:
- npm install
# 編譯 這里對應上方 stages ，
build:
stage: build
script:# script 為要執行的命令，可以多條按順序執行
- npm run build:prod
docker-deploy:
stage: deploy
# 執行Job內容
script:
# 通過Dockerfile生成pactera_pflife_ui鏡像
- sudo docker build -t pactera_pflife_ui .
# 刪除已經在運行的容器
- if [ $(docker ps -aq --filter name= pactera_pflife_ui) ]; then sudo docker rm -f pactera_pflife_ui;fi
# 通過鏡像啟動容器
- sudo docker run -d -p 8085:80 --name pactera_pflife_ui pactera_pflife_ui
tags:
# 執行Job的伺服器
- pflife-web
only:
# 只有在master分支才會執行
- dev_xht
2.Dockerfile 文件
# 設置基礎鏡像
FROM nginx:latest
# 將dist文件中的內容復制到 /usr/share/nginx/html/ 這個目錄下面
COPY dist/ /usr/share/nginx/html
# 用本地的 default.conf 配置來替換nginx鏡像里的默認配置
COPY default.conf/etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx","-g","daemon off;"]
3.default.conf文件
server {
listen 80;
server_name 39.100.9.6; # localhost修改為docker服務宿主機的ip
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html =404;
}
location /api/{
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://39.100.9.6:8090/;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
總之，三個文件部署之後運行正常
Ⅱ Jenkins自動部署筆記（二）全局工具配置
前提條件：
1.已安裝並啟動Jenkins。
2.已安裝下列插件。
（1）Git plugin 可能默認已經安裝
（2）Git client plugin 可能默認已經安裝
（3）Maven Integration plugin
（4）Publish Over SSH 用於遠程部署
（5）Gitlab Hook Plugin 用於gitlab提交觸發自動部署
以上內容在Jenkins自動部署筆記（一）中有詳細介紹
進入系統管理。
進入全局工具配置。
1.JDK
（1）點擊「JDK安裝...」
（2）點擊新增JDK按鈕，填寫別名（隨便起）、JDK安裝路徑即可。JDK在上一節已安裝，所以這里我們直接選擇安裝路徑。
2.Git
填寫名稱（隨便起）、安裝路徑即可。
3.Maven
點擊新增Maven按鈕，勾選自動安裝，在「從Apache安裝」下拉列表中選擇一個版本即可。
4.NodeJS（主要用於vue前端項目的自動打包部署）
點擊新增NodeJS按鈕，填寫名稱（隨便起），勾選自動安裝，在版本下拉框中選擇一個NOdeJS版本。
5.點擊保存按鈕後，剛才選擇自動安裝的工具會在後台自動安裝。到此，全局工具配置基本結束。
Ⅲ 前端自動化6部是個車間還是個什麼意思
先來說說為什麼要自動化。凡是要考慮到自動化時，你所做的工作必然是存在很多重復乏味的勞作，很有必要通過程序來完成這些任務。這樣一來就可以解放生產力，將更多的精力和時間投入到更多有意義的事情上。隨著前端開發不再是簡單的作坊式作業，而成為一個復雜的工程時，還涉及到性能優化一系列工作等等，這時自動化已然是迫切的需求。
早期的網站開發
在還沒有前端工程師這種分工如此明確的崗位時，大家所理解的前端工作無非就是製作網頁的人，包括html、css、js等。稍微高級點的可能就是php了，可以讀寫資料庫，可以稱之為動態的網頁。通過近幾年的發展，分工越來越細，在大公司如BAT三家，基本是把前端分開來了，有專門的人寫js，有專門的人寫css。以前一個網頁可以一個人搞定，包括切圖，寫頁面到寫邏輯，無非是幾個資源鏈接拼湊起來。當然邏輯性不強，頁面不重。
最簡單的頁面如下：
<!DOCTYPE html>
<html>
<head>
<style>....</style>
</head>
<body>
hello world
</body>
<script>
....
</script>
</html>
這樣幾個html標簽就能展示成網頁了。順便寫幾個邏輯，填寫幾個表單就差不多了。這就是早期的網頁。
javascript庫
有一次需求你做了一個頁面，然後第二次需求，你領導又讓你做了頁面，只是這次與上次的邏輯都差不多，就改改樣式皮膚，修改圖片等等。這樣你就要從原來的地方拷貝一份代碼過來。如果有一天發現一個bug，你就需要修改兩處地方，這使得你非常的惱火，於是就把公共的邏輯抽取出來，兩個頁面都引用這段代碼，這樣就很好的解決了這個問題。以後有第三個第四個頁面，你也不會擔心了。漸漸的公共的代碼越來越大，又是個獨立的文件，這個文件就成為了一個庫文件了，就像jquery等等。
模塊化
隨著業務的不斷擴大，頁面越來越多，邏輯越來越重，之前你提取出來的庫文件越來越大，功能越來越多。A頁面只引用了其中的一部分函數，B頁面C頁面同樣如此，後來你決定將庫文件拆分成更小的模塊，由各自的功能決定應該在哪個模塊。這樣一來前端開發就此演化為模塊化開發方式。你開發的產品就像搭建積木一樣，將各個模塊組裝在一起。
網頁優化
好了，現在你的工程很龐大了，文件數量新增了非常的多，JS模塊也很多，這時候一個頁面也能載入了上十個js文件或者好幾個樣式文件。用戶訪問你的網頁的時候需要把這些資源從伺服器下載下來，所以理論上來說，想要加快你的網站，比必須減少下載的時間。可以從下載的數量和下載的大小出發，在不做大改變的前提下就是減少HTTP請求數以及壓縮文件大小。雅虎的網頁優化十四條軍規中很大一部分是針對這種情況進行優化，如：
1、合並請求
2、使用雪碧圖
3、壓縮js、css代碼（除去空格，混淆等等）
4、延遲載入
在PC時代，這些問題可能不是那麼尖銳。移動互聯網的興起，對網頁速度提出了更高的要求，因為網速相對比較慢。也有新的優化措施出現，比如緩存js文件等。可是要做到這些，並不是很容易。假如你的頁面引入十個JS文件，這樣發布出去顯然是不好的，所以你要手動合並，將十個JS文件合並成一個，或者幾個。然後還要將合並後的文件進行壓縮。發出去之後產品經理發現有個小問題需要優化一下，這時候你又要重復剛才的工作。如果這樣的事情發生三次，或者更多次，你會變得惱火。當然這只是令你惱火的一點點因素而已，更多的還有合並雪碧圖等等。
經歷過幾次痛苦之後，你會發現性能優化與工程本身之前存在一些矛盾的地方。就是在優雅的開發的同時，兼顧性能方面的考慮實在難以做到。這時自動化工具太有必要了，將開發與發布隔離開來。按照優化的准則，利用構建工具，在發布的時候輕松一鍵搞定，這將是最理想化的作業方式。
一些構建工具
nodejs的出現，給前端開發帶來了一些改變。在沒有任何語言障礙的情況下，前端同學可以轉為後台開發，nodejs帶來另外的一個福音便是構建工具。之前的壓縮合並工具大多是由java編寫的，像雅虎的yui compressor，但對沒有java基礎的前端開發來說，至少要走不少彎路。然後最近一兩年比較火的是國外的grunt和gulp，以及國內的FIS。相比而言，國外總是走在前頭，在探索更好的開發方式，做出了很多探索。
grunt
之前在鳥廠的時候，在組內也嘗試推廣過模塊化的開發方式，主要是用seajs模塊載入器，關於這個的好處我這里就不展開說明了。這種方式從11年開始到現在基本已經得到了認可，或者說是未來的趨勢，ECMAScript 6已經將模塊化加入了規范。等到瀏覽器支持應該是幾年之後的事情。這種模式主要是參考了nodejs，將其思想運用到瀏覽器上。seajs模塊化的詬病之處便是網路請求，上線前面臨的一個問題就是模塊太多，有十幾個文件，需要合並和壓縮，而且還不能簡單的將文件合並在一起。有一套他自己的規則。
在開發的時候，一個模塊對應一個文件，如下：
// a.js
define(function(require, export, mole){
require('./b')
// xxxxx
});
//b.js
define(function(require, export, mole){
// xxxxx
})
如果上線前簡單的將這兩個文件合並在一起，那麼a模塊是不能找到b模塊，因此這樣的做法是行不通。一個規則是根據文件的路徑，給每個模塊加上一個唯的id，id的值就是該模塊的路徑：
// a.js
define('a', function(require, export, mole){
require('./b')
// xxxxx
});
//b.js
define('b', function(require, export, mole){
// xxxxx
})
所以在自動化的過程中，需要提取模塊的唯一ID，然後再進行合並。
grunt的插件很多，也非常的成熟，能夠滿足各式各樣的需求。作為新手，我是琢磨了大概半個月的時間才大概了解了其配置文件的意思，但也只是知道用，不明白個所以然。grunt的運作方式就是根據配置文件載入相應的插件，完成相應的任務（task）。當時中文資料比較少，英文也比較晦澀，尤其是配置文件中各配置項的意思不太明白。而當文件多起來了，構建的效率明顯跟不上。加上組內也不太重視，所以就沒怎麼去折騰了。轉去鵝廠之後，grunt就無疾而終了。
gulp
沒有在實戰項目中運用過，暫不說明
組內的構建工具
剛來到鵝廠時，也有自己的一套構建工具，比較單一，項目不大。主要是將上文提到的seajs所帶來的文件解決掉，提取模塊ID，合並之。隨著業務的發展，越來越不滿足實際的需求，後來索性放棄了它，轉而投向網路的FIS。
FIS構建工具
放棄之前的構建工具是因為一個尖銳的問題引起的，就是在發布的時候，有一段時間將會引起外網報錯，就是頁面已經出去，js文件卻還是舊的，即使你在文件後面加上了查詢參數也不太起作用。加上瀏覽器和CDN本身的緩存，這個問題一時之間找不到好的解決方案，唯一的辦法就是採用新的文件，文件加上自身的hash值作為文件名。這樣一來就瞄準了網路的FIS，它能夠簡單的實現我們所需要的功能。
核心思想是文件的定位，也就是在開發測試的階段並不需要將文件hash，只需要在上線的那一刻來做這步。找到原有文件的依賴，將其替換為新的文件名。
理想都很美好，但現實真的很殘酷。FIS上手相對於grunt是要簡單些，但其一點也不簡單。需要理解整體的思想才能去實施，而且小白用戶基本不會使用，除非是一些簡單的合並需求。但復雜的業務場景FIS是滿足不了的。包括前面提到的模塊ID的提取，seajs模塊文件的合並等都需要進行二次開發才能夠做到。
很多頁面是嵌入到APP內部的，APP本身也可以做一次緩存，根據特定的文件名規進行緩存，徹底消滅了304請求，如果每次都是新文件，在伺服器端也可以配置更長久的緩存期，所以這里也需要定製開發。
FIS最值得詬病的地方就是全局構建，這一點不僅使得構建速度快不起來，而且生成的新文件特別多，導致發布的時候去挑選文件。在多人協作開發的時候，會產生沖突，發布的過程極其的痛苦，不知道網路內部的人是怎麼使用的。望著文件夾滿是hash的文件名，瞬間就奔潰了。這是小組內部使用FIS後，血的教訓。
後來決定大刀闊斧的對FIS進行改造。在構建的時候只生成相關的資源文件，核心是找到該文件所依賴的所有的資源文件。當然還是全局構建，只是在生成文件的時候不生成其他不相關的。
這樣發布工作變得非常輕松，一目瞭然。然後配合現在的發布工具，基本上整個開發發布流程也比較順暢了。那天小組會議討論，構建工具的理想目標是什麼，這個問題我也沒有細想過，總之就是要從重復的勞動中解放出來，把時間花在值得的地方。或許可以採用一鍵發布，這可能就是理想，也是後期可以考慮再優化的地方。
現在組內所採用的構建工具，已經和FIS本身有很大的差別了。進行了很多地方的改造，後面有機會進行整體的開發發布流程分享，以及我的一些構建思路。
iamaddy
關注
1
0
0
專欄目錄
4款前端自動化構建工具的介紹與對比.zip_java自動化框架
01-07
4款前端自動化構建工具的介紹與對比.zip 大家都知道webpack是當人不讓的前端自動化構建工具,但是除了它還有其它常用的前端打包工具存在,現在我們來比較4款
前端自動化構建工具(Grunt,、Gulp、 Webpack)
01-02
<span style="color:#404040;">使用構建工具去對 JS、CSS、HTML、LESS、IMG 等進行合並壓縮構建到最後實現自動化構建項目。是前端工程師必備的技能之一。 本套視頻主要講解當前開發中最流行的三種自動化構建工具: Grunt, Gulp, webpack。從理解什麼是構建工具，為什麼要用構建工具，到如何去使用構建工具。 學習本套視頻之前 建議先學習 JS 模塊化。</span>
如何實現自動化前端開發？
CSDN資訊
7051
IDE不僅是文本編輯器，還是編譯器、生成器、調試器和集成器。 作者 |Nicolus Rotich 譯者 |彎月，責編 | 郭芮 出品 | CSDN（ID：CSDNnews） 以下為譯文： 每一行代碼都可以表示為字元串變數，無論代碼本身執行了哪些操作。 這就是我們使用文本文件（即集成開發環境，IDE）向計算機發布指令的根本原因，我知道你一定在想：文本編輯器的名字也太高級了吧。...
前端自動化發布實戰總結
weixin_34418883的博客
163
為什麼要做 今年4月份，開始自己的第二份工作，習慣了老東家如絲般的發布體驗，一下子感覺來到了「原始社會」。 首先這是一篇長文，主要介紹自己在做自動發布這個過程的一些思考。 引用玉伯的Web研發模式演變來說，現在我們處於 - Web1.0時代： 前後端代碼耦合 java環境對前端過於復雜 缺乏工具和規范，代碼難維護 內嵌代碼：html內嵌js，j...
前端項目自動化部署
最新發布
@SCY
392
本文主要內容為三個方面： 一、使用Git倉庫來管理項目 二、如何使用雲伺服器 三、使用Jenkins進行自動化部署
如何實現Web前端自動化？讓這些工具幫助你
xiaoxijing的博客
1569
隨著前端技術的發展，前端開發從靜態網頁的開發到復雜的前後端交互再到基於node.js的全棧開發，前端需要做的事情越來也多，前端代碼的邏輯和交互效果越來越復雜，越來越不易於管理。模塊化開發和預處理框架把項目分成若干個小模塊，增加了最後發布的困難，沒有一個統一的標准，讓前端的項目結構千奇百怪。在新技術不斷湧入的多元化發展模式中，Web前端工程師的工作量也越來越大。前端自動化構建在整個項目開發中越來越重...
前端工程化實戰 - 自動化構建工具
每天進步一點點
496
最典型的運用場景就是在去開發網頁應用時就可以使用： main.scss index.html package.json 安裝 Sass 模塊 安裝完成後，在 node_moles 下有一個 .bin 目錄，這個目錄下有一個 Sass 的命令文件，可以使用指令打開幫助信息 將 Sass 文件轉換成 CSS 使用 或 啟動 實現自動化構建 （1）安裝 browser-sync 模塊，用於啟動一個測試伺服器，去運行項目 （2）在 scripts 中添加 serve 命令，通過 br
前端自動化部署
qq_41206257的博客
2689
名詞解釋 集成：在推送或者 merge 代碼後自動進行構建打包 交付：將上一步生成的代碼包發布至測試、生產等環境 需求 在 git 代碼倉庫發生變化後，自動執行打包腳本，並且發布至伺服器。 解決的問題 在之前每次開發完畢需要上線之前，需要手動執行 bash 命令打包，並且將打包後的代碼人為的拖動至上傳應用（FlileZilla Pro）。 手動執行構建腳本消耗時間人力 而拖動代碼文件會存在拖拽錯誤，覆蓋之前的其他項目代碼等難以預料的問題 工具選擇 gitlab/github/gitee Jenki
前端自動化介紹
張營的技術博客
1815
文章目錄DevOps介紹前端自動化自動化相關概念問題提出常見現象最佳實踐 DevOps介紹 相信大家或多或少的聽過這個詞DevOps，而且看起來很高大上，其實這個是敏捷開發的一種執行流程表現，先來一張經典的DevOps流程圖： 具體的流程為： 先是計劃plan，編碼code，然後編譯build，測試test（Dev） 然後發布release，部署deploy，運維operate，監控monitor（Ops） 然後發現問題或有新的需求，就重新計劃plan。。。如此循環 這就是完整的DevOps流程。 下
前端項目自動部署
weixin_29005819的博客
1190
一、實現的最終效果 點擊一下，即可實現 項目打包 文件壓縮(便於上傳到伺服器) 連接伺服器 備份 上傳打包的文件 解壓 完成部署 二、原理及需要的插件 原理： 執行shell腳本 需要的npm依賴包：archiver(壓縮)，ssh2（執行腳本：如連接伺服器，解壓等操作） 三、詳細步驟 3.1 安裝包 yarn add archiver ssh2 3.2 引入包和編寫配置文件 const archiver = require('C:\\Users\\Administrator\\AppDa
前端自動化測試詳解
wdquan19851029的專欄
2405
這篇文章主要向大家介紹前端自動化測試詳解,主要內容包括基礎應用、實用技巧、原理機制等方面，希望對大家有所幫助。 1 前言 文章研究了四個問題：什麼是自動化測試、為何要自動化測試、什麼項目適合自動化測試、自動化測試具體要怎麼作。在尋找這四個問題答案的過程當中，梳理了一套完整的前端自動化測試方案，包括：單元測試、介面測試、功能測試、基準測試。 2 什麼是自動化測試 維基網路是這樣定義的html 在軟體測試中，測試自動化（英語：Test automation）是一種測試方法，使用特定的軟體，去控制測試
Gitlab-ci:從零開始的前端自動化部署
大灰狼的小綿羊哥哥的博客
2669
前言 本文為首發原創，同時轉載至公眾號「全棧前端精選「和「廣發證券金融科技」中 目錄 一.概念介紹 1.1 gitlab-ci && 自動化部署工具的運行機制 1.2 自動化部署給我們帶來的好處 二.知識預備 2.1 gitlab-ci涉及的抽象概念(Runner/PipeLine/Executor/Job ) 2.2 YML文件的基本語法規則 2.3 .gitlab-ci.yml配置的特定關鍵字 三.CI實戰 3.1 編寫一個gitlab-ci的「he
vue前端用伺服器上路徑的圖片展示_談談前端性能自動化
weixin_39968640的博客
1445
前述：前段時間出了性能分析的需求，需要對前端頁面性能做一套自動化測試工具。領導都發話了，那咱說干就干。花了一周時間去找資料以及匹配優秀並且合適的開源插件。花了一個月的時間(斷斷續續，需求也要做的~)完成了這個工具的建設和開發。目前也搭建了一套平台來支撐這樣的工具使用。前端用的VUE，後端用的node(由於本人較熟悉前端)，資料庫用的是mangoDB。好了，話不多說，上才藝~設計背景 & 前...
實現前端項目自動化部署（webpack+nodejs）
winne雪
2097
前言： 一般來說，我們前端是不需要關心部署的事情的，只需要把打包後的文件直接丟給後台去部署就可以了。但是呢，如果頻繁修改一點東西就要叫後台進行部署，這樣後台會很煩（畢竟人家還有其他工作嘛），我們也會很不好意思。 或許有些公司會給前端配置可視化操作伺服器文件的軟體（FTP客戶端），這時我們就可以打包後自己到伺服器上部署了，如果不同環境需要部署到不同伺服器，此時我們又需要區分打包再手動上傳到伺服器上。 這時我們就會想，有沒有直接一句命令就能自動化部署到不同伺服器上，根本不需要打開軟體來手動上傳的？？？ 答案：必
前端項目自動化部署——超詳細教程（Jenkins、Github Actions）
q411020382的博客
1374
參考資料 Docker 入門教程
常用的前端自動化構建工具gulp/grunt/fis --簡介
杜杜的博客
235
常用的前端自動化構建工具 之前我們自動化構建將入門級別使用的 NPM Scripts自動化構建工具對於相對復雜的項目構建會比較吃力，那麼我們會了解 Gulp Grunt fIS 用法基本相同：都是通過一些簡單的代碼，組織一些插件的使用，然後就可以用工具代替我們一些重復的工作，增強開發效率。 Grunt 是基於內磁碟實現的 最早的自動化構建工具 Grunt(點擊可進入官網查看) 優點： 它的插件幾乎可以幫助我們完成任何我們想要做的事情， 缺點： 由於工作過程是基於臨時文件去實現的，所以構建速度較慢。 下
前端自動化部署項目到伺服器 -- 一行命令搞定，摒棄傳統的手工部署 npm run build
一個來自外太空的遊客
2353
傳統的前端代碼手工部署流程如下： 傳統的手工部署需要經歷： 1.打包，本地運行npm run build打包生成dist文件夾。 2.ssh連接伺服器，切換路徑到web對應目錄下。 3.上傳代碼到web目錄，一般通過xshell或者xftp完成。 傳統的手工部署存在以下缺點： 1.每次都需要打開xshell軟體與伺服器建立連接。 2.當負責多個項目且每個項目都具有測試環境和線上環境時，容易引起部署錯誤。 （個人之前非常悲劇地遇到過一次，由於同時負責四個項目，八個環境。一天同時可能修改多個項目，
「相關推薦」對你有幫助么？
非常沒幫助
沒幫助
一般
有幫助
非常有幫助
©️2022 CSDN 皮膚主題：大白 設計師：CSDN官方博客 返回首頁
關於我們
招賢納士
商務合作
尋求報道
400-660-0108
[email protected]
在線客服
工作時間 8:30-22:00
公安備案號11010502030143
京ICP備19004658號
京網文〔2020〕1039-165號
經營性網站備案信息
北京互聯網違法和不良信息舉報中心
家長監護
網路110報警服務
中國互聯網舉報中心
Chrome商店下載
賬號管理規范
版權與免責聲明
版權申訴
出版物許可證
營業執照
©1999-2023北京創新樂知網路技術有限公司
iamaddy
碼齡8年
暫無認證
3
原創
42萬+
周排名
115萬+
總排名
8683
訪問
等級
122
積分
2
粉絲
3
獲贊
0
評論
1
收藏
私信
關注
熱門文章
聊聊前端自動化 3903
扒一扒前端構建工具FIS的內幕 3474
web前端性能優化–緩存 1306
分類專欄
javascript
3篇
技術
3篇
您願意向朋友推薦「博客詳情頁」嗎？
強烈不推薦
不推薦
一般般
推薦
強烈推薦
最新文章
扒一扒前端構建工具FIS的內幕
web前端性能優化–緩存
2015年1篇2014年2篇
舉報
————————————————
版權聲明：本文為CSDN博主「iamaddy」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/iamaddy/article/details/42364137
Ⅳ 如何使用jekens自動化部署
自動遠程部署，可以使用wagon-maven-plugin插件把war包傳到伺服器指定目錄下 自動打tag,其實就是執行一下svn ，設置許可權使內容不再修改
Ⅳ 阿里雲 雲效Devops流水線Flow自動化部署前端項目
Dockerfile
1、新建流水線模板
2、添加流水線源
3、nodejs構建
4、主機部署
5、保存並運行
6、回滾操作