資訊專欄INFORMATION COLUMN
前端部署服務器，需要經過打包、遷移、部署、回退操作，如果每次都手動處理，那么容易出錯還浪費時間，自動化部署又比較復雜，那么選擇shell腳本做自動化，也是一個不錯的選擇，具體實現如下：
執行自動化構建的前端項目myweb
項目通過命令構建測試環境文件或生產環境文件
linux服務器，nginx部署項
通過cra構建前端項目，修改配置文件，通過傳遞配置參數，配置測試環境和生產環境
1、cra 構建項目，運行項目
yarn create react-app myweb cd myweb yarn install 復制代碼
2、修改項目文件package.json
安裝依賴corss-env，執行命令yarn add -D cross-env，該包用來修改環境變量
"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" }, 復制代碼在項目中我們獲取process.env.REACT_APP_BUILD_ENV就可以獲取當前項目的打包環境
執行命令yarn build:pre，打包測試環境 執行命令yarn build:prod，打包生產環境
這一步將打包的文件通過shell腳本遷移，通過傳參判斷不同的打包環境。
在根目錄下新建publish.sh
#!/bin/bash function build(){ echo $1 # 執行打包命令 yarn build:$1 # 壓縮打包后的文件 zip -r build.zip ./build/* # 遷移壓縮文件到服務器對應目錄下 scp ./build.zip root@117.50.4.30:/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 復制代碼修改package.json, 增加發布命令
"scripts": { "publish:pre": "sh publish.sh pre", "publish:prod": "sh publish.sh prod" } 復制代碼1、在服務器部署前端項目
登陸服務器，在服務器上新建/data/myweb，配置nginx文件
server { listen 80 default_server; listen [::]:80 default_server; server_name _; # 項目部署的路徑 root /data/myweb/build; location / { index index.html; } } 復制代碼2、執行腳本發布
執行第三步配置的發布腳本yarn publis:pre， 輸入服務器密碼，將遷移到部署服務器的/data/myweb下， 然后執行unzip build.zip，將部署文件解析到/build下， 在瀏覽器打開http://117.50.4.30，即可看到部署的文件
注意：確保80端口開放
第四步，可以看到上傳到服務器后，還需要執行unzip build.zip來部署腳本，也是很不方便，繼續改進shell, 在/data/myweb下新建online_and_backup.sh,
1、增加腳本備份打包文件online_and_backup.sh
#!/bin/bash # 首先備份當前版本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 # 獲取當前的時間，拼接下 current_time=$(date "+%Y%m%d%H") cd /data/myweb/backup mv build.zip.old build.zip."$current_time" 復制代碼
build.zip.old 為備份的文件的打包文件 /data/myweb/backup 下的文件為備份的不同版本，可以增加定時清理腳本，只保存一周的數據，防止出現問題可以及時回退到某天的版本或者某個版本
在/data/myweb下新建back.sh，主要作用，發布后出現問題，將之前備份的文件重新部署
1、增加回退腳本back.sh
mv build.zip build.zip.err mv build.zip.old build.zip unzip -o build.zip 復制代碼
該項目僅僅展示了直接上傳上生產環境服務器的腳本，一般發布如果有跳板機的需要跳板機過渡，增加一個遷移腳本即可
在項目根目錄下新建文件夾scripts,將我們寫好的發布腳本publish.sh,備份腳本backup.sh,回退腳本back.sh放在下面。上傳git，這樣其他人可以使用或者項目遷移也可以使用。
由于多人開發需要，可能需要將文件上傳到自己的跳板機，所以在.gitignore文件文件中增加，增加一個人開發，就可以復制publish:sh到自己的項目根目錄，修改自己的配置，可以做到多人不相互干擾。
.gitignore
build.zip publish.sh 復制代碼
通過shell腳本修改版本，做版本管理
在提交錢進行代碼格式化整理
https://github.com/richLpf/my-web-shell 復制
作者：前端中后臺
鏈接：https://juejin.cn/post/6963070430424858638
來源：稀土掘金
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/127952.html
在經歷了6,7個項目同時開工，頻繁發布測試 ，不得不學會一點偷懶的小技巧來提高效率了，所以這篇文章要講的就是如何更加優化發布流程。 工作以來，經歷了build后，然后用FileZilla上傳服務器完成部署。再到前端打包后 ，在build倉庫執行git push,后端在自動部署。后端的自動部署的確簡化了很多操作，不過對于前端來說 ，每次發布還需要去build倉庫執行push操作，特別是發布頻繁的時候...
摘要：嗨很高心你能進入這里，我是在這里給你介紹一款完整的自動化部署工具一款完整的自動化部署持續集成堡壘機并且友好的開源項目。應用管理可建立各種應用任務，前端，后端發布任務，可同時執行單機和多機任務，并實時顯示任務日志。 嗨、很高心你能進入這里，我是zane,? 在這里給你介紹一款完整的Devops自動化部署工具 APubPlat - 一款完整的Devops自動化部署、持續集成、堡壘機、并且友...
摘要：就是在提測前部署一個預覽環境，在提測前，每個人本地驗證一遍，再放在預覽環境驗證一遍。于是就準備啪啪啪擼一個完成自動發布預覽環境的工具。用來直接把已經好的文件發布到預覽環境。這樣以后組里的其他同事也都可以用一行命令自己部署預覽環境了。 場景 進入公司一段時間了。流程還是不太讓人省心。就在上個提測版本的質量還是沒法保證，總是或多或少出現一些問題。于是就想到了上家公司的一個做法。就是在提測前...
摘要：上午折騰了一下持續集成，由于公司使用自己搭建的服務器來進行代碼管理，因此這里是針對服務器來進行的配置，后面稍微介紹了下針對管理的項目的配置之前項目每次修改之后都需要本地一次手動發布到服務器上方便測試和產品查看，有了持續集成之后只要或者提交之 上午折騰了一下Jenkins持續集成，由于公司使用自己搭建的svn服務器來進行代碼管理，因此這里Jenkins是針對svn服務器來進行的配置，后面...
閱讀 284·2024-11-07 18:25
閱讀 130363·2024-02-01 10:43
閱讀 868·2024-01-31 14:58
閱讀 828·2024-01-31 14:54
閱讀 82766·2024-01-29 17:11
閱讀 3047·2024-01-25 14:55
閱讀 1985·2023-06-02 13:36
閱讀 3032·2023-05-23 10:26
