前端项目自动化部署（保姆级教程）

1. 建仓库

• 新建仓库
• 创建项目

yarn create vite my-repo

• 运行项目

cd my*
yarn
yarn dev

• 提交代码

echo "# my-repo" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin 远程仓库ssh地址 // 例：git@github.com:EchoVie/my-repo.git
git push -u origin main

2.设置key

创建阿里云密钥对

下载并查看刚生成的密钥

绑定密钥到实例

重启实例

3.连接阿里云可视化工具

1. 下载terminus
2. 设置key
3. 点击右上角x，关闭
4. 连接阿里云

设置my-repo仓库的key：SERVER_SSH_KEY、SERVER_HOST和SERVER_USER，操作如下

所设置的key和value分别如下

Key	Value
SERVER_SSH_KEY	阿里云私钥（内容👇）
SERVER_HOST	阿里云公网地址
SERVER_USER	root （阿里云登录后默认为 root 用户，并且所在文件夹为 root）

阿里云私钥地址如下：

4.设置 GitHub Actions

ci.yml内容如下：

name: 构建页面
on:
  push:  # 指定触发事件
    branches:
      - main  # 指定触发 action 的分支

jobs:
  main:
    runs-on: ubuntu-latest
    steps:

    # 拉取github仓库代码
    - name: Checkout
      uses: actions/checkout@v2
      with:
        persist-credentials: false

    # 执行依赖安装
    - name: 安装依赖
      run: |
          npm install
        
    # 执行构建步骤
    - name: 构建
      run: |
          npm run build
    # 执行部署
    - name: 部署
      uses: easingthemes/ssh-deploy@v2.1.5
      with:
        SSH_PRIVATE_KEY: ${{ secrets.SERVER_SSH_KEY }} # 指定密钥，key即密钥名称
        ARGS: '-rltgoDzvO --delete'
        SOURCE: dist # 注意这是npm run build生成的文件，要复制到阿里云静态服务器的文件夹名称
        REMOTE_HOST: ${{ secrets.SERVER_HOST }} # 你的阿里云公网地址
        REMOTE_USER: ${{ secrets.SERVER_USER }}  # 阿里云登录后默认为 root 用户，并且所在文件夹为 root
        TARGET: /root/my-repo # 打包后的 build 文件夹将放在 /root/my-repo

提交yml文件

查看进程

查看是否上传到阿里云

5.运行

本文使用的是node进行部署，也可以用nginx进行部署

1. 桌面新增server.js文件

   const express = require('express')
   const app = express();
   
   app.use(express.static('dist'))
   
   app.listen(80, '0.0.0.0', () => {
     console.log('listening')
   })
   

2. 提交到远程

3. 运行

   cd my*
   npm i express
   node server.js
   

   

   • 可以用pm2进行进程守护，则该进程非手动终止会一直运行

     npm install pm2 -g
     pm2 start server.js
     

     

4. 访问

   浏览器地址栏输入 http://公网地址:80

5. 如果不能访问

   排查阿里云有没有开放该端口

   

6.其他

只要提交代码到仓库，就可以更新部署啦，访问公网地址即可；