github的前端项目通过action自动打包推送部署

1,在github中，创建一个新仓库 名为: demo

2,将本机windows中的前端目录文件推送到 demo仓库中，具体不再说了。

我这里就以ruoyi-ui的前端UI为例，将项目文件推送到demo仓库中。

创建目录 G:\vscode\ruoyi-ui,将文件复制到目录下。

PS G:\vscode\ruoyi-ui> git init
Initialized empty Git repository in G:/vscode/ruoyi-ui/.git/

PS G:\vscode\ruoyi-ui> git add .

PS G:\vscode\ruoyi-ui> git commit -m "first commit"

[master (root-commit) 4ca694c] first commit
 283 files changed, 24423 insertions(+)
 create mode 100644 .editorconfig
 create mode 100644 .env.development
.......................

PS G:\vscode\ruoyi-ui> git branch -M master

PS G:\vscode\ruoyi-ui> git remote add origin https://github.com/yjvps/demo.git

PS G:\vscode\ruoyi-ui> git push origin master


warning: ----------------- SECURITY WARNING ----------------
warning: | TLS certificate verification has been disabled! |
warning: ---------------------------------------------------
warning: HTTPS connections may not be secure. See https://aka.ms/gcmcore-tlsverify for more information.
Enumerating objects: 369, done.
Counting objects: 100% (369/369), done.
Delta compression using up to 8 threads
Compressing objects: 100% (326/326), done.
Writing objects: 100% (369/369), 1.06 MiB | 1.68 MiB/s, done.
Total 369 (delta 28), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (28/28), done.
To https://github.com/yjvps/demo.git
 * [new branch]      master -> master

4，最后将本机的项目文件都提交到github的demo仓库里。

5，创建 action,添加Actions secrets。

1），在本机windows上使用ssh工具生成 公钥与私钥，如果windows系统没有ssh软件，到网上下载一个。

命令与linux主机上使用命令一样。最后会提示生成文件的位置。

   PS C:\Users\Administrator> ssh-keygen.exe
Generating public/private rsa key pair.
Enter file in which to save the key (C:\Users\Administrator/.ssh/id_rsa):
C:\Users\Administrator/.ssh/id_rsa already exists.
Overwrite (y/n)? y
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in C:\Users\Administrator/.ssh/id_rsa.
Your public key has been saved in C:\Users\Administrator/.ssh/id_rsa.pub.
The key fingerprint is:
SHA256:0LEv8I5nU6MEKOoBAxNsJRZSz4A7aV8kBcdbdOTyMHI administrator@paopaofish
The key's randomart image is:
+---[RSA 2048]----+
|*B=o+o..oo       |
|=+.=.+ ooo       |
|+o. *.*Eo.       |
|=+ . oo==.       |
|oo. .   S.+      |
|. ..   + + .     |
| .    . *        |
|       o .       |
|                 |
+----[SHA256]-----+
PS C:\Users\Administrator>

2)，将生成的私钥文件C:\Users\Administrator/.ssh/id_rsa 中的内容添加到 github的demo仓库SERVER_SSH_KEY中。

3），将公钥C:\Users\Administrator/.ssh/id_rsa.pub文件中的内容，添加到需要部署的Linux主机的.ssh/authorized_keys

[root@92cto-com ~]# cat /root/.ssh/authorized_keys
ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABAQCkWhj+yhUh/zmwqMwjFMwPJ4oA+vEC6MntL+vohr82O6UR8pnzkBqPaEdYyHQZMFsDdxGDAKhJoHaRlVS27gbd+d33XOYEFMEWcc8u+yKcxmex7faooedxvf7/TZ39Je18rs9iMjSJFsJupho7pmaEyjanPoj2Fxp9kVLLIJFAPgYrg7nF4m1OMtJpJpY3jcZEmh8fRkMEfMcQ3ri3SbK2bJ+IghSZbD8IDtT/unrhKY3II6JWXZQsZ6sZuMjxLz04DDwfh8//gl07zZ0k24cFNJZqNXAZuH/kW4S1ZUhRC8HPUHLpkprpSn2ndzxruG89JoS administrator@paopao

4），添加其它信息 ，SERVER_PORT ，SERVER_IP， USERNAME， SERVER_DESTINATION ，就是添加需要部署到Linux服务器的信息，

如下图

6，添加action workflow,找到 Node.js，然后应用些流水线,会自动添加 node.js.yml  

7，修改workflow的node.js.yml中的内容，我这里只修改了一个nodejs的版本号

# This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node
# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions

name: Node.js CI

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

jobs:
  build:

    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [14.x]
        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/

    steps:
    - uses: actions/checkout@v2
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v2
      with:
        node-version: ${{ matrix.node-version }}
        cache: 'npm'
    - run: npm ci
    - run: npm run build --if-present

8,然后可以测试下，start commit ,测试打包出现报错，有一个坑。

出错信息如下： 

Dependencies lock file is not found in /home/{username}/runners.../repository_name. Supported file patterns: package-lock.json,yarn.lock

# This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node
# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions

name: Node.js CI

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

jobs:
  build:

    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [14.x]
        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/


    steps:
    - uses: actions/checkout@v2
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v2
      with:
        node-version: ${{ matrix.node-version }}
        
    - name: Install dependencies 
      run: npm install

    - name: Build             
      run: npm run build:prod
 
  
    - name: deploy to server
      uses: AEnterprise/rsync-deploy@v1.0
      env:
          DEPLOY_KEY: ${{ secrets.SERVER_SSH_KEY }}
          ARGS: "-e -c -r --delete"
          SERVER_PORT: ${{ secrets.SERVER_PORT }}
          FOLDER: "dist/"
          SERVER_IP: ${{ secrets.SERVER_IP }}
          USERNAME: ${{ secrets.USERNAME }}
          SERVER_DESTINATION: ${{ secrets.SERVER_DESTINATION }}

9，最后运行效果，由于github的打包容器会连接到我的Linux主机，最好是国外的主机，不然会出现连接不上服务器的问题。

   最后部署打包的文件。

10，最后查看Linux服务器的部署效果，测试自动部署成功。

 

查看主机nginx的文件目录如下：

 

Web打开效果如下：