使用Vue3,vite啟動一個的Element 後台管理框架並使用GitHub Action部署項目

語言: CN / TW / HK

攜手創作,共同成長!這是我參與「掘金日新計劃 · 8 月更文挑戰」的第9天 點擊查看活動詳情

前言

昨天文章説到最近有爬蟲需求,可能後面需要寫一個基於爬蟲的數據非常簡單的管理後台,所以有了今天的想法。之前使用Vue做過一個簡單的管理後台,僅僅實現了用户登錄註銷,兩個分類管理,數據管理的頁面,使用webpeck打包的感覺一般般,前兩個月學了一些React的知識 順便嘗試了一下Vite,感覺效率的確提升了不少,今天來試試。

之前就瞭解到Vite是給Vue3腳手架的,自己也知道一點Vue的基礎知識,但是對於Vue3還是非常的陌生,今天就來硬剛一波。

找一個成熟的框架

那麼就在GitHub上面找一個成熟的項目,要有Vue3 vite element三大要素就行了。那麼就是它了

image.png

啟動

Git克隆項目: git clone [email protected]:lin-xin/vue-manage-system.git

安裝依賴: npm install 啟動項目: npm run dev 果然會快很多不到一秒鐘,比webpack不知道高到哪裏去了,vite啟動的時候不需要打包的,又是基於esbuild預構建依賴,esbuild又是基於Go語言的。 image.png 可以直接看看效果:

image.png

image.png 啥文檔也沒有,先看看代碼吧,應該是用到了mock可以直接登錄成功

使用GitHub Action

僅僅是啟動項目也太low,嘗試使用一下使用GitHub Action 部署項目,因為它開源又方便哈哈,但是相比GitLab CI/CD來説更難以理解,但是教程特別多。 ## 更換Git 遠程倉庫 更換之前創建一個倉庫,我把它設置成私有的了:

image.png

切換遠程倉庫: git remote set-url origin https://github.com/koala9527/spider-elemnt-admin.git 因為使用了npm install命令有一個文件改動,就是package-lock.json。 依次使用下列命令把代碼推到GitHub: git add . git commit -m 'init' git branch -M main git push -u origin main

提前部署

把樹莓派的ssh公鑰放在GitHub上直接拉取代碼 ```

git clone [email protected]:koala9527/spider-elemnt-admin.git ```

image.png

npm install npm run build

把build之後的代碼放在基於Nginx的docker鏡像中運行 docker run --name web -d -p 8102:80 -v /home/pi/spider-elemnt-admin/dist/:/usr/share/nginx/html/ --restart=always nginx 在內網中成功運行 image.png

新建action

spider-element-admin/blob/main/.github/workflows/main.yml: ```yam name: Deploy

on: push: branches: [ main ]

jobs: deploy: runs-on: ubuntu-latest

steps:
- name: Server Shell

  uses: tzzs/server-shell@v3
  with:
    # server private key
    PRIVATE_KEY: ${{ secrets.B4_MASTER_SSH_SEC_KEY }}
    # server login username
    USERNAME: root
    # server ip
    IP: ${{ secrets.B4_MASTER_SSH_HOST }}
    # The port to connect to the server ssh
    PORT: ${{ secrets.B4_MASTER_SSH_PORT }}
    # shell to execute on server
    SHELL: cd /home/pi && rm -rf spider-elemnt-admin && git clone [email protected]:koala9527/spider-elemnt-admin.git && cd spider-elemnt-admin && npm install && npm run build && docker restart spider-element-admin   # optional, default is

```

主要是需要在GitHub上配置自己服務器的私鑰,IP,端口:${{ secrets.B4_MASTER_SSH_SEC_KEY }},${{ secrets.B4_MASTER_SSH_HOST }},${{ secrets.B4_MASTER_SSH_PORT }}給GitHub Action的腳本讀取,讓GitHub Action中的服務器有權限連接到我自己需要部署項目的服務器上。

SSH 證書SSH連接需要着重講一下,我使用GitHub Action 的服務器去連接我自己部署服務的服務器,GitHub Action 的服務器無法生成公私鑰,需要把B4_MASTER_SSH_SEC_KEY的私鑰內容為自己本地電腦的私鑰,公鑰放在要部署項目的服務器的~/.ssh/~/authorized_keys文件中 這樣才能連接成功。

私鑰設置的地方: image.png 公鑰放置位置: image.png 成功效果: image.png

發揮作用的是在服務器執行vite打包然後進行容器重啟操作,這個並沒有什麼需要講的。

總結

GitHub Action 還是比較簡單好用的,不用在部署的服務器端安裝其他插件,但是我還是沒弄懂uses這個使用第三方服務的關鍵字的具體原理是什麼,哪位好心人告訴我嗎?哈哈。