成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

前端自動部署 - Shell腳本

社區(qū)管理員 / 1050人閱讀

前言

前端部署服務(wù)器，需要經(jīng)過打包、遷移、部署、回退操作，如果每次都手動處理，那么容易出錯還浪費(fèi)時(shí)間，自動化部署又比較復(fù)雜，那么選擇shell腳本做自動化，也是一個(gè)不錯的選擇，具體實(shí)現(xiàn)如下：

項(xiàng)目環(huán)境

  • 執(zhí)行自動化構(gòu)建的前端項(xiàng)目myweb

  • 項(xiàng)目通過命令構(gòu)建測試環(huán)境文件或生產(chǎn)環(huán)境文件

  • linux服務(wù)器，nginx部署項(xiàng)

實(shí)現(xiàn)原理

image.png

一、構(gòu)建一個(gè)前端項(xiàng)目

通過cra構(gòu)建前端項(xiàng)目，修改配置文件，通過傳遞配置參數(shù)，配置測試環(huán)境和生產(chǎn)環(huán)境

1、cra 構(gòu)建項(xiàng)目，運(yùn)行項(xiàng)目

yarn create react-app myweb cd myweb yarn install 復(fù)制代碼

2、修改項(xiàng)目文件package.json

安裝依賴corss-env，執(zhí)行命令yarn add -D cross-env，該包用來修改環(huán)境變量

"scripts": {     "start": "react-scripts start",     "build:pre": "cross-env REACT_APP_BUILD_ENV=development react-scripts build",     "build:prod": "cross-env REACT_APP_BUILD_ENV=production react-scripts build",     "test": "react-scripts test",     "eject": "react-scripts eject"   }, 復(fù)制代碼

在項(xiàng)目中我們獲取process.env.REACT_APP_BUILD_ENV就可以獲取當(dāng)前項(xiàng)目的打包環(huán)境

執(zhí)行命令yarn build:pre，打包測試環(huán)境 執(zhí)行命令yarn build:prod，打包生產(chǎn)環(huán)境

二、打包和遷移的shell腳本

這一步將打包的文件通過shell腳本遷移，通過傳參判斷不同的打包環(huán)境。

在根目錄下新建publish.sh

#!/bin/bash function build(){     echo $1     # 執(zhí)行打包命令     yarn build:$1     # 壓縮打包后的文件     zip -r build.zip ./build/*     # 遷移壓縮文件到服務(wù)器對應(yīng)目錄下     scp ./build.zip [email protected]:/data/myweb/build     # 刪除上傳后的壓縮文件     rm -rf build.zip } if [ $1 == "pre" ]; then build $1 elif [ $1 == "prod" ]; then build $1 else echo "your params is not pre or prod" fi 復(fù)制代碼

修改package.json, 增加發(fā)布命令

"scripts": {     "publish:pre": "sh publish.sh pre",     "publish:prod": "sh publish.sh prod" } 復(fù)制代碼

三、執(zhí)行腳本，部署上線

1、在服務(wù)器部署前端項(xiàng)目

登陸服務(wù)器，在服務(wù)器上新建/data/myweb，配置nginx文件

server {     listen       80 default_server;     listen       [::]:80 default_server;     server_name  _;          # 項(xiàng)目部署的路徑     root         /data/myweb/build;     location / {         index index.html;     } } 復(fù)制代碼

2、執(zhí)行腳本發(fā)布

執(zhí)行第三步配置的發(fā)布腳本yarn publis:pre， 輸入服務(wù)器密碼，將遷移到部署服務(wù)器的/data/myweb下， 然后執(zhí)行unzip build.zip，將部署文件解析到/build下， 在瀏覽器打開http://117.50.4.30，即可看到部署的文件

注意：確保80端口開放

image.png

四、腳本發(fā)布和備份

第四步，可以看到上傳到服務(wù)器后，還需要執(zhí)行unzip build.zip來部署腳本，也是很不方便，繼續(xù)改進(jìn)shell, 在/data/myweb下新建online_and_backup.sh,

1、增加腳本備份打包文件online_and_backup.sh

#!/bin/bash # 首先備份當(dāng)前版本v1.0.0 zip -r build.zip.old ./build/* cp ./build.zip.old /data/myweb/backup/build.zip.old # 解壓最新的版本v1.0.1 unzip -o build.zip # 獲取當(dāng)前的時(shí)間，拼接下 current_time=$(date "+%Y%m%d%H") cd /data/myweb/backup mv build.zip.old build.zip."$current_time" 復(fù)制代碼

build.zip.old 為備份的文件的打包文件 /data/myweb/backup 下的文件為備份的不同版本，可以增加定時(shí)清理腳本，只保存一周的數(shù)據(jù)，防止出現(xiàn)問題可以及時(shí)回退到某天的版本或者某個(gè)版本

五、腳本回退

在/data/myweb下新建back.sh，主要作用，發(fā)布后出現(xiàn)問題，將之前備份的文件重新部署

1、增加回退腳本back.sh

mv build.zip build.zip.err mv build.zip.old build.zip unzip -o build.zip 復(fù)制代碼

六、多人開發(fā)，方便合作

1、項(xiàng)目通過跳板機(jī)發(fā)布

該項(xiàng)目僅僅展示了直接上傳上生產(chǎn)環(huán)境服務(wù)器的腳本，一般發(fā)布如果有跳板機(jī)的需要跳板機(jī)過渡，增加一個(gè)遷移腳本即可

2、腳本文件保存

在項(xiàng)目根目錄下新建文件夾scripts,將我們寫好的發(fā)布腳本publish.sh,備份腳本backup.sh,回退腳本back.sh放在下面。上傳git，這樣其他人可以使用或者項(xiàng)目遷移也可以使用。

3、多人開發(fā)，上傳不同的跳板機(jī)

由于多人開發(fā)需要，可能需要將文件上傳到自己的跳板機(jī)，所以在.gitignore文件文件中增加，增加一個(gè)人開發(fā)，就可以復(fù)制publish:sh到自己的項(xiàng)目根目錄，修改自己的配置，可以做到多人不相互干擾。

.gitignore

build.zip publish.sh 復(fù)制代碼

4、增加功能

  • 通過shell腳本修改版本，做版本管理

  • 在提交錢進(jìn)行代碼格式化整理

5、示例項(xiàng)目

https://github.com/richLpf/my-web-shell 復(fù)制


作者：前端中后臺
鏈接：https://juejin.cn/post/6963070430424858638
來源：稀土掘金
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。


文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/127952.html

相關(guān)文章

  • 真?一行代碼完成從前端代碼build到部署線上

    在經(jīng)歷了6,7個(gè)項(xiàng)目同時(shí)開工，頻繁發(fā)布測試 ，不得不學(xué)會一點(diǎn)偷懶的小技巧來提高效率了，所以這篇文章要講的就是如何更加優(yōu)化發(fā)布流程。 工作以來，經(jīng)歷了build后，然后用FileZilla上傳服務(wù)器完成部署。再到前端打包后 ，在build倉庫執(zhí)行g(shù)it push,后端在自動部署。后端的自動部署的確簡化了很多操作，不過對于前端來說 ，每次發(fā)布還需要去build倉庫執(zhí)行push操作，特別是發(fā)布頻繁的時(shí)候...

    csRyan 評論0 收藏0

  • APubPlat 一款Devops自動化部署、持續(xù)集成、堡壘機(jī)開源項(xiàng)目、友好的Web Termina

    摘要：嗨很高心你能進(jìn)入這里，我是在這里給你介紹一款完整的自動化部署工具一款完整的自動化部署持續(xù)集成堡壘機(jī)并且友好的開源項(xiàng)目。應(yīng)用管理可建立各種應(yīng)用任務(wù)，前端，后端發(fā)布任務(wù)，可同時(shí)執(zhí)行單機(jī)和多機(jī)任務(wù)，并實(shí)時(shí)顯示任務(wù)日志。 嗨、很高心你能進(jìn)入這里，我是zane,? 在這里給你介紹一款完整的Devops自動化部署工具 APubPlat - 一款完整的Devops自動化部署、持續(xù)集成、堡壘機(jī)、并且友...

    Berwin 評論0 收藏0

  • 基于 vue-cli 的前端項(xiàng)目的自動發(fā)布預(yù)覽環(huán)境

    摘要：就是在提測前部署一個(gè)預(yù)覽環(huán)境，在提測前，每個(gè)人本地驗(yàn)證一遍，再放在預(yù)覽環(huán)境驗(yàn)證一遍。于是就準(zhǔn)備啪啪啪擼一個(gè)完成自動發(fā)布預(yù)覽環(huán)境的工具。用來直接把已經(jīng)好的文件發(fā)布到預(yù)覽環(huán)境。這樣以后組里的其他同事也都可以用一行命令自己部署預(yù)覽環(huán)境了。 場景 進(jìn)入公司一段時(shí)間了。流程還是不太讓人省心。就在上個(gè)提測版本的質(zhì)量還是沒法保證，總是或多或少出現(xiàn)一些問題。于是就想到了上家公司的一個(gè)做法。就是在提測前...

    ctriptech 評論0 收藏0

  • 使用Jenkins持續(xù)集成前端項(xiàng)目并自動化部署到Nginx服務(wù)器

    摘要：上午折騰了一下持續(xù)集成，由于公司使用自己搭建的服務(wù)器來進(jìn)行代碼管理，因此這里是針對服務(wù)器來進(jìn)行的配置，后面稍微介紹了下針對管理的項(xiàng)目的配置之前項(xiàng)目每次修改之后都需要本地一次手動發(fā)布到服務(wù)器上方便測試和產(chǎn)品查看，有了持續(xù)集成之后只要或者提交之 上午折騰了一下Jenkins持續(xù)集成，由于公司使用自己搭建的svn服務(wù)器來進(jìn)行代碼管理，因此這里Jenkins是針對svn服務(wù)器來進(jìn)行的配置，后面...

    liukai90 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<