使用Vue3,vite启动一个的Element 后台管理框架并使用GitHub Action部署项目

携手创作,共同成长!这是我参与「掘金日新计划 · 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:

name: Deploy

on:
  push:
    branches: [ main ]

jobs:
  deploy:
    runs-on: ubuntu-latest
    
    steps:
    - name: Server Shell

      uses: tzzs/[email protected]
      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这个使用第三方服务的关键字的具体原理是什么,哪位好心人告诉我吗?哈哈。

猜你喜欢

转载自juejin.im/post/7127871180685443079
今日推荐