关于前端:手把手教你用-Github-Actions-部署前端项目

6次阅读

共计 6923 个字符，预计需要花费 18 分钟才能阅读完成。

这是第 96 篇不掺水的原创，想获取更多原创好文，请搜寻公众号关注咱们吧~ 本文首发于政采云前端博客：手把手教你用 Github Actions 部署前端我的项目

家喻户晓，前端部署无非就是把打包之后的代码丢到 nginx html 目录下就完事了，然而每逢产品频繁改需要，甚至只是让你改线上一个字的时候，你总要反复一遍遍以下动作：批改，打包，登录服务器，上传代码，重启服务器。长此以往，别说是你受不了了，搁我旁边看着都受不了。这个时候，有没有想过有个机器人，能帮咱们实现以上这些反复又没技术含量的活。没错，你猜对了，Github Actions 就是咱们须要的那个机器人。

大家晓得，继续集成由很多操作组成，比方拉取最新代码、运行测试、登录服务器、部署服务器等，GitHub 把这些操作对立称为 Actions。

咱们再梳理下失常需要的开发流程（如上图），以上操作是可反复利用的，利用这一概念，Github 集成了 Actions 市场，容许开发者把操作写成独立的脚本，公布到 Actions 市场，容许所有开发者应用，这里有点像 npm 和 vscode 中的插件。

Github 给咱们提供了一个以下配置的服务器来运行咱们配置对应的 Actions

2-core CPU
7 GB of RAM memory
14 GB of SSD disk space

这个配置足够咱们应用了，当然，如果你有网络时延的需要，（比方推送及拉取镜像时产生的网络时延），你也能够自建服务器。

这里我抉择了刚开始很久以前学习 vue 时做的模拟 bilibili 做的我的项目 bilibili-vue，进入我的项目仓库，能够看到对应的 Actions 标签，点击进入。

进入 Actions 后能够看到很多举荐的工作流模版，这里能够依据须要自行抉择须要的模版，或者跳过模版，自行设置。

这里因为我是纯前端我的项目，所以我抉择 Node.js 模版。

点击 node.js 模版，会主动在我的项目 .github/workflows 目录下生成 node.js.yml 文件，咱们能够把文件名字改成咱们工作流的名称。当然，这里能够设置并存在很多工作流 yml 文件，例如 deploy.yml、test.yml、gh-page.yml 等。

# workflow 名称。省略的话，默认为以后 workflow 文件名
name: Node.js CI
# 触发 workflow 的条件，on:
push:
# 只有 master 分支产生 push 事件时，才会触发 workflow
branches: [master]
pull_request:
branches: [master]
# jobs 示意执行的一项或多项工作
jobs:
# 工作的 job_id，具体名称自定义，这里 build 代表打包
build:

# runs-on 字段指定运行所须要的虚拟机环境。留神：这个是必填字段
runs-on: ubuntu-latest
# 用于配置以后 workflow 的参数
strategy:
matrix:
node-version: [10.x, 12.x, 14.x, 15.x]
# See supported Node.js release schedule at https://nodejs.org/en/about/releases/
# steps 字段指定每个 job 的运行步骤，能够蕴含一个或多个步骤，每个步骤都能够配置指定字段
steps:
# 切代码到 runner
- uses: actions/checkout@v2
# 在以后操作系统装置 node
- name: Use Node.js ${{matrix.node-version}}
uses: actions/setup-node@v1
with:
node-version: ${{matrix.node-version}}
# 该运行的命令或者 action
# 装置依赖、运行测试、打包
    - run: npm install
    - run: npm test
    - run: npm run build

这里应用 Actions 市场中的 Create Tag Release 插件

on:
  push:
    # Sequence of patterns matched against refs/tags
    tags:
      - 'v*' # Push events to matching v*, i.e. v1.0, v20.15.10
name: Create Release
jobs:
  build:
    name: Create Release
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@master
      - name: Create Release
        id: create_release
        uses: actions/create-release@latest
        env:
          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}} # This token is provided by Actions, you do not need to create your own token
        with:
          tag_name: ${{github.ref}}
          release_name: Release ${{github.ref}}
          body: |
            Changes in this Release
            - First Change
            - Second Change
          draft: false
          prerelease: false

这里应用 Actions 市场中的 GitHub Pages v3 插件

name: github pages
    on:
      push:
        branches:
          - master # default branch
    jobs:
      deploy:
        runs-on: ubuntu-18.04
        steps:
          - uses: actions/checkout@v2
          - run: npm install
          - run: npm run docs:build
          - name: Deploy
            uses: peaceiris/actions-gh-pages@v3
            with:
              github_token: ${{secrets.GITHUB_TOKEN}}
              publish_dir: ./docs-dist

name: Test
    
    on: [push, pull_request]
    
    jobs:
      lint:
        runs-on: ubuntu-latest
        steps:
        - uses: actions/checkout@v2
        - uses: actions/setup-node@v1
          with:
            node-version: '12.x'
    
        - name: Install dependencies
          uses: bahmutov/npm-install@v1
    
        - name: Run linter
          run: npm run lint
    
      test:
        runs-on: ubuntu-latest
        steps:
        - uses: actions/checkout@v2
        - uses: actions/setup-node@v1
          with:
            node-version: '12.x'
    
        - name: Install dependencies
          uses: bahmutov/npm-install@v1
    
        - name: Run test
          run: npm test
    
      build:
        runs-on: ubuntu-latest
        steps:
        - uses: actions/checkout@v2
        - uses: actions/setup-node@v1
          with:
            node-version: '12.x'
    
        - name: Install dependencies
          uses: bahmutov/npm-install@v1
    
        - name: Build
          run: npm run build

以上是 Github 中常见的一些配置，更多 Actions 配置能够参考官网。

为什么要应用 docker？

没有 docker 之前，我是应用 webhook 实现主动部署，但前面遇到了服务器到期更换服务器的时候，就只能一个个反复操作来做迁徙，而且文件目录管理混乱，我的项目变多时，保护老本也会越来越高。再看 docker 五大劣势：继续集成、版本控制、可移植性、隔离性和安全性，是不是就是用来解决咱们上述遇到的问题的。

举例：bilibili-vue，不明确的同学能够参考我的配置。

我的项目根目新建 nginx 配置文件命名 vhost.nginx.conf（名字轻易定，跟前面 Dockerfile 中援用统一即可）供后续应用，例：

server {
listen 80;
server_name localhost;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
proxy_set_header Host $host;
if (!-f $request_filename) {rewrite ^.*$ /index.html break;}
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {root /usr/share/nginx/html;}
}

我的项目根目录新建 Dockerfile 文件，构建镜像包应用，例：

FROM nginx
COPY ./dist/ /usr/share/nginx/html/
# 第一步 nginx 配置文件名称
  COPY ./vhost.nginx.conf /etc/nginx/conf.d/bilibili-vue.conf
EXPOSE 80

这里我抉择了阿里云的容器镜像服务，为什么不应用国外的 dockhub 呢，因为这样应用起来速度快一点，而且有收费的个人版足够咱们应用。

首次关上须要开明服务，配置登录明码（记下来，前面要用）。

而后创立命名空间，再创立咱们的镜像仓库，这里如果不想他人下载你的镜像的话就能够抉择公有。而后点击下一步配置代码源，这里我抉择了本地仓库，一方面是为了日志对立，能够在 Github Actions 看到所有日志，一方面是能够通过命令行间接推送镜像到镜像仓库，自由度比拟高。

之后就能够在页面看到咱们创立的仓库，点击仓库名称进入，能够看到仓库的根本信息和操作指南，这个时候一个镜像仓库就齐全创立胜利了。

咱们只用在 Actions 中 build 镜像后登录阿里云 Registry 实例就好了，然而这个时候如果明文间接写在 yml 中必定是不行的，Github 早就帮咱们思考到了这点，回到 Github 我的项目中，顺次点击 Settings => Secrets => New repository secret，设置 secret，配置上述容器镜像账号的用户名（阿里云用户名）和明码（上述配置容器镜像服务时设置的登录明码）。

name: Docker Image CI # Actions 名称
on: [push] # 执行机会
jobs:

# 这里我应用的是 yarn，想用 npm 的同学将 yarn 命令批改为 npm 命令即可
build:
runs-on: ubuntu-latest
steps:
- name: checkout
uses: actions/checkout@master
# 装置依赖
- name: install
run: yarn
# 打包
- name: build project
run: yarn run build

# 打包镜像推送到阿里云容器镜像服务
- name: Build the Docker image
run: |
docker login --username=${{secrets.DOCKER_USERNAME}} registry.cn-hangzhou.aliyuncs.com --password=${{secrets.DOCKER_PASSWORD}}
docker build -t bilibili-vue:latest .
docker tag bilibili-vue registry.cn-hangzhou.aliyuncs.com/zlyyyy/bilibili-vue:latest
docker push registry.cn-hangzhou.aliyuncs.com/zlyyyy/bilibili-vue:latest # 推送
- name: ssh docker login # 应用 appleboy/ssh-action@master 登录服务器执行拉取镜像脚本，服务器 ip、用户名、明码配置形式同容器镜像服务配置形式一样
uses: appleboy/ssh-action@master
with:
        host: ${{secrets.SSH_HOST}} 
username: ${{secrets.SSH_USERNAME}}
password: ${{secrets.SSH_PASSWORD}}
script: cd ~ && sh bilibili-vue-deploy.sh ${{secrets.DOCKER_USERNAME}} ${{secrets.DOCKER_PASSWORD}}

最初一步登录服务器后，我执行了一个脚本来拉取云端最新镜像，并删除旧镜像，启动新镜像。脚本内容如下。

echo -e "---------docker Login--------"
docker login --username=$1 registry.cn-hangzhou.aliyuncs.com --password=$2
echo -e "---------docker Stop--------"
docker stop bilibili-vue
echo -e "---------docker Rm--------"
docker rm bilibili-vue
docker rmi registry.cn-hangzhou.aliyuncs.com/zlyyyy/bilibili-vue:latest
echo -e "---------docker Pull--------"
docker pull registry.cn-hangzhou.aliyuncs.com/zlyyyy/bilibili-vue:latest
echo -e "---------docker Create and Start--------"
docker run --rm -d -p 8081:80 --name bilibili-vue registry.cn-hangzhou.aliyuncs.com/zlyyyy/bilibili-vue:latest
echo -e "---------deploy Success--------"

咱们推送一次代码测试，关上 Actions 后能够看到主动运行的实时 workflow 后果，以及每步的日志信息。

到此咱们自动化部署胜利，再也不要每次批改代码，手动更新线上了，前面迁徙也会更不便，当然还有更多的自动化部署形式，比方间接应用 Github + 阿里云镜像仓库的触发器一样能够做到，容器服务也不仅限于阿里云，腾讯云等其余云服务厂商同样也是一样的应用形式。以上是我集体应用 Actions 的一些总结，如有谬误，劳烦斧正批改。当然对更多 Actions 玩法感兴趣的同学欢送一起交流学习。当然这个仅限于集体的我的项目玩法，公司外部的我的项目有更加成熟欠缺的自动化计划，比方咱们外部所应用的云长零碎，就是解决此类问题的，具体云长的性能，他做了些什么，敬请期待。

GitHub Actions 入门教程

继续集成是什么？

政采云前端团队（ZooTeam），一个年老富裕激情和创造力的前端团队，隶属于政采云产品研发部，Base 在风景如画的杭州。团队现有 40 余个前端小伙伴，平均年龄 27 岁，近 3 成是全栈工程师，妥妥的青年风暴团。成员形成既有来自于阿里、网易的“老”兵，也有浙大、中科大、杭电等校的应届新人。团队在日常的业务对接之外，还在物料体系、工程平台、搭建平台、性能体验、云端利用、数据分析及可视化等方向进行技术摸索和实战，推动并落地了一系列的外部技术产品，继续摸索前端技术体系的新边界。

如果你想扭转始终被事折腾，心愿开始能折腾事；如果你想扭转始终被告诫须要多些想法，却无从破局；如果你想扭转你有能力去做成那个后果，却不须要你；如果你想扭转你想做成的事须要一个团队去撑持，但没你带人的地位；如果你想扭转既定的节奏，将会是“5 年工作工夫 3 年工作教训”；如果你想扭转原本悟性不错，但总是有那一层窗户纸的含糊… 如果你置信置信的力量，置信平凡人能成就不凡事，置信能遇到更好的本人。如果你心愿参加到随着业务腾飞的过程，亲手推动一个有着深刻的业务了解、欠缺的技术体系、技术发明价值、影响力外溢的前端团队的成长历程，我感觉咱们该聊聊。任何工夫，等着你写点什么，发给 ZooTeam@cai-inc.com

正文完

前端

发表至：前端

2021-04-14

0

css浮动布局

关于前端:回顾2022展望2023-程序媛文言文版年终总结望来年顺顺利利

关于前端:那些你不知道的-CSS-自定义形状网格布局

关于前端:阿里前端一面面试题附答案

关于java:秒杀系统设计的-5-个要点前端三板斧＋后端两条路

关于前端:手把手教你用-Github-Actions-部署前端项目

为什么应用 Github Actions？

Github Actions 是什么？

开始：部署本人的前端我的项目

1、抉择 Github 我的项目仓库

2、新建工作流，配置 Actions

3、常见的 Actions 配置

打版本标签 Create Tag Release

创立 Github Pages 站点

多人合作开发，云端代码检测

4、搭配 docker

4.1 我的项目根目录新建 Nginx 配置

4.2 我的项目根目录新建 Dockerfile 文件

4.3 配置容器镜像服务

4.3.1 第一步

4.3.2 第二步

4.3.3 第三步

4.4 如何跟 Actions 联动

5、残缺的 Actions

6、测试流程，查看日志

总结

参考文献

招贤纳士

站内搜索