前端项目自动化部署

ChenZehong 发布于

使用Github Actions实现前端项目自动化部署

什么是部署：

部署就是在开发结束后使得软件在某一环境下运行起来，这个过程汇总会将源代码生成可运行的软件包，然后将软件包放到要部署的环境中，通过一些配置使得这个软件包在目标环境下也能够正常工作。例如前端项目部署就是将项目代码打包生成一个文件包，我们可以将该文件包放到nginx托管，使得可以通过服务器地址进行访问。

传统的前端项目开发流程：

  1. 前端人员完成所有开发
  2. 推送代码
  3. 打包生成静态资源文件
  4. 推送到服务端
  5. 依次循环

使用自动化部署的前端项目开发流程：

  1. 前端人员那完成所有开发
  2. 推送代码
  3. 自动化部署工具自动部署
  4. 依次循环

使用自动化部署可以使得工作人员专注开发，每次推送完代码后便自动完成了部署，免去了很多繁琐的操作。

什么是CI / CD 服务：

CI/CD是一种在应用开发阶段引入自动化来频繁向客户交付应用的方法，CI/CD的核心概念是持续集成、持续交付和持续部署。CI/CD可让持续自动化和持续监控贯穿应用的整个生命周期。

实操例子：使用Github Actions实现前端项目自动化部署

基本概念：

  • Workflows（工作流程）：持续集成的运行过程称为一次工作流程，一个工作流程由一个或多个任务组成。
  • Jobs（任务）：一次自动部署的过程中，需要完成一个或多个任务，这些任务中又包含了多个步骤
  • Steps（步骤）
  • Action（动作）：每次步骤可以包含一个或多个动作

以上四点是Github Actions几个大的概念，可以把它想象成一条完整的流水线，流水线包含的操作要点如下：workflow -> job -> step -> action。

准备工作：前端项目（vue）、服务器（使用nginx托管资源）、github账号

1、在本地初始化一个前端项目然后进行打包，然后将打包后的dist文件托管到nginx服务器中

1
2
3
4
5
6
//初始化项目
vue create myproject
//切换到项目目录下，开始打包
npm run build
//将dist文件上传到nginx中托管
scp -r dist/ root@服务器地址:/home/www(文件位置)

2、在云服务器中配置nginx：

1
2
3
4
5
6
7
8
9
10
//安装nginx
yum install -y nginx
//切换到nginx目录
cd /etc/nginx
//可在nginx.conf中更改配置（更改默认端口以及配置文件存放位置）
vim nginx.conf
//启动nginx 
nginx
//重启nginx
nginx -s reload

3、在github中新建.yml文件

（1）进入GitHub Actions菜单

（2）点击set up a workflow yourself：点击start commit则会自动在我们项目目录下新建.github/workflows/main.yml文件，yml文件内容默认即可，先不用管。此时会发现，我们的提交记录旁边有一个小绿点，其实那就代表着我们的action正在执行，切换到actions菜单，会发现actions已经执行了一次了，且成功了。

（3）我们更新以下本地的代码，在本地修改yml配置文件。

（4）修改.yml文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
name: Build app and deploy to Tencent
on:
  #监听push操作
  push:
    branches:
      # mian分支，你也可以改成其他分支
      - main
jobs:
  # 任务ID
  build:
    # 运行环境
    runs-on: ubuntu-latest
    # 步骤
    steps:
    # 使用别人的action
    - uses: actions/checkout@v2
    # 步骤名称
    - name: npm install
      # 步骤执行指令
      run: npm install
    - name: npm run build
      run: npm run build
    # 命名这个任务为发布Deploy
    - name: Deploy
      # 因为构建之后，需要把代码上传到服务器上，所以需要连接到ssh，并且做一个拷贝操作
      uses: cross-the-world/scp-pipeline@master
      env:
        WELCOME: "ssh scp ssh pipelines"
        LASTSSH: "Doing something after copying"
      with:
        host: ${{ secrets.USER_HOST }}
        user: ${{ secrets.USER_NAME }}
        pass: ${{ secrets.USER_PASS }}
        connect_timeout: 10s
        local: './dist/*'
        remote: /home/www/dist

上面的代码是在默认的yml文件上修改的，重点需要关注的是jobs，这里我们只有一个任务，任务id就是build，该任务里面有3个步骤，也就是我们项目部署通常的3个步骤：

  • npm install 安装项目依赖
  • npm run build 打包项目
  • deploy 将打包好的静态资源推送到服务端

在deploy这个步骤中，使用了一个别人写好的action，主要目的就是推送静态资源到服务端，几个重点字段解释：

  • host：服务器ip
  • user：服务器登录用户
  • pass：服务器登录密码
  • connect_timeout：登陆超时限制
  • local：本地的静态资源文件，Vue项目打包后会生成dist文件夹
  • remote：服务端静态资源文件存放路径

【注意】更改yml文件后可能会触发actions，如果没有配置密钥，应该是会部署失败的。

（5）配置部署密钥

在yml文件的部署步骤中，服务器的ip、用户名和密码我们都没有直接写在文件里面，这也是为了安全考虑，所以从secrets中读取的，那么接下来我们就去远程仓库settings的secrets中设置：

  1. 进入secrets：点击setting->选择secrets->点击新建
  2. 设置相关密钥信息，要跟.yml文件中的相对应
  3. 更改代码并推送：当我们yml文件和密钥都准备完成之后，这个时候便可以任意修改 一点代码然后push到分支上了，push成功之后，actions便会运行，可以点击进去查看详情

部署完成！只要本地修改完代码推送到远程仓库就会自动部署！

参考文章：

GitHub Actions自动化部署前端项目指南 - 知乎 (zhihu.com)

前端Vue项目打包部署实战教程 - 知乎 (zhihu.com)

ChenZehong

ChenZehong

贵在坚持

86
19
0
CATEGORYS
TAGS