携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第9天点击查看活动详情

前言

昨天文章说到最近有爬虫需求，可能后面需要写一个基于爬虫的数据非常简单的管理后台，所以有了今天的想法。之前使用Vue做过一个简单的管理后台，仅仅实现了用户登录注销，两个分类管理，数据管理的页面，使用webpeck打包的感觉一般般，前两个月学了一些React的知识顺便尝试了一下Vite，感觉效率的确提升了不少，今天来试试。

之前就了解到Vite是给Vue3脚手架的，自己也知道一点Vue的基础知识，但是对于Vue3还是非常的陌生，今天就来硬刚一波。

找一个成熟的框架

那么就在GitHub上面找一个成熟的项目，要有Vue3 vite element三大要素就行了。那么就是它了

启动

Git克隆项目：

git clone git@git.zhlh6.cn:lin-xin/vue-manage-system.git

安装依赖：

npm install

启动项目：

npm run dev

果然会快很多不到一秒钟，比webpack不知道高到哪里去了，vite启动的时候不需要打包的，又是基于esbuild预构建依赖，esbuild又是基于Go语言的。可以直接看看效果:

啥文档也没有，先看看代码吧，应该是用到了mock可以直接登录成功

使用GitHub Action

仅仅是启动项目也太low,尝试使用一下使用GitHub Action 部署项目，因为它开源又方便哈哈，但是相比GitLab CI/CD来说更难以理解，但是教程特别多。

更换Git 远程仓库

更换之前创建一个仓库，我把它设置成私有的了：

切换远程仓库：

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 git@github.com:koala9527/spider-elemnt-admin.git

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

在内网中成功运行

新建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/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 git@github.com: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文件中这样才能连接成功。

私钥设置的地方：公钥放置位置：成功效果：