GitHub Action部署到远程服务器(解决隐藏坑点)

625 阅读2分钟

我部署大屏项目到github.io后,发现在国内访问很慢,所以想换到一个国内访问很快的服务器上。我自己有一台linux服务器,但是内存只有1个G,跑jenkins打包大点的任务就会崩。于是,GitHub Action 就走入了我的视线。

一、编写 GitHub Yaml

这是我的一个开源项目的yaml文件配置,流程是:监听master分支的推送 -> 执行jobs。

name: build website

on:
  push:
    branches: [ "master" ]
  pull_request:
    branches: [ "master" ]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Copy Codes
        uses: actions/checkout@v4

      - name: setup node@16.20.1
        uses: actions/setup-node@v4
        with:
          node-version: "16.20.1"

      - name: Install pnpm@7.30.5
        uses: pnpm/action-setup@v4
        with:
          version: 7.30.5

      - name: Install Dependencies.
        run: pnpm install

      - name: Build Dist.
        run: pnpm build:github-page

      - name: Deploy To GitHub Page.🚀
        uses: crazy-max/ghaction-github-pages@v4
        with:
          target_branch: gh-page
          build_dir: dist
        env:
          GITHUB_TOKEN: ${{ secrets.ACCESS_TOKEN }}

      - name: Deploy To My Remote Server
        uses: easingthemes/ssh-deploy@main
        with:
          SSH_PRIVATE_KEY: ${{ secrets.REMOTE_SSH_KEY }}
          REMOTE_HOST: ${{ secrets.REMOTE_HOST }}
          REMOTE_USER: "root"
          TARGET: "/var/www/big-screen"
          ARGS: "-avzr --delete"
          SOURCE: "./dist/"
          EXCLUDE: "/node_modules/"

大多数步骤都是通用的,与部署到服务器相关只需要关注最后一步:

      - name: Deploy To My Remote Server
        uses: easingthemes/ssh-deploy@main
        with:
          SSH_PRIVATE_KEY: ${{ secrets.REMOTE_SSH_KEY }}
          REMOTE_HOST: ${{ secrets.REMOTE_HOST }}
          REMOTE_USER: "root"
          TARGET: "/var/www/big-screen"
          ARGS: "-avzr --delete"
          SOURCE: "./dist/"
          EXCLUDE: "/node_modules/"

我们需要关注几个核心配置:

  • SSH_PRIVATE_KEY:ssh登录私钥。
  • REMOTE_HOST:远程服务器域名或 IP 地址。
  • REMOTE_USER:远程服务器登录用户。
  • TARGET:复制到目标目录。
  • ARGS: 一些配置参数,"-avzr --delete"表示清空目标目录。
  • SOURCE:表示你要复制的源目录。
  • EXCLUDE:不需要复制的目录/文件。

我使用nginx做web服务器,因此使用的/var/www/下的目录存放产物内容。

可以看到${{ secrets.xxx }}这样的形式,它其实取得是项目下的密钥变量(后面步骤解释其配置方法)。

二、获取远程服务器私钥

首先远程登录进你的服务器(当前演示用户为root)。

2.1 生成服务器端的公/私钥

ssh-keygen -t rsa

一路回车,完成之后查看 ls ~/.ssh

authorized_keys  id_rsa  id_rsa.pub

2.2 服务器注册自己的公钥

id_rsa.pub 文件内容追加到 authorized_keys 文件的末尾。

cat ~/.ssh/id_rsa.pub >> ~/.ssh/authorized_keys

tips: 如果服务器不支持ssh登录,则需要手动开启。

输入: vim /etc/ssh/sshd_config

修改:

StrictModes no
RSAAuthentication yes
PubkeyAuthentication yes
AuthorizedKeysFile .ssh/authorized_keys

2.3 查看私钥文本

复制打印的文本,后面配置github时会用到。

cat ~/.ssh/id_rsa

三、配置 github 密钥变量

首先进入你的项目页面,依次打开SettingsSecrets and variableRespository secrets,然后点击New repository secret

这里创建两个密钥变量:

  • REMOTE_HOST:远程服务器的域名或IP地址。
  • REMOTE_SSH_KEY:复制的密钥文本。

1.png

四、运行 Action

前往项目下 actions 页面,重新运行一个workflow,或者重新推送代码即可。

五、参考项目

react-big-screen