项目说明

笔记来源：拉勾教育大前端高薪训练营
阅读建议：建议通过左侧导航栏进行阅读

自动化部署

基本介绍

传统的部署方式

更新
- 本地构建
- 发布
更新
- 本地构建
- 发布
…

现代化的部署方式（CI / CD）

CI / CD 服务

Jenkins
Gitlab CI
GitHub Actions
Travis CI
Circle CI
…

GitGub Actions

环境准备

Linux 服务器
把代码提交到 GitHub 远程仓库

配置 GitHub Access Token

生成：https://github.com/settings/tokens
- 登录 GitHub，点击右上角的 + 号，选择 Settings，点击 Developer settings，如图所示：
- 然后，选择 Personal access tokens，点击Generate new token，生成 Token，如图所示：
- 填写生成 Token 的相关信息，以及选择相关权限，如图所示：
- 生成Token，如图所示：
配置到项目的 Secrets 中：项目所在的 GitHub 地址
- 进入仓库，选择 settings，点击 Secrets，再点击 New repository secret，如图所示：
- 将刚才生成的 token 填入，如图所示：

配置 GitHub Actions 执行脚本

在项目根目录创建 .github/workflows 目录

下载 main.yml 到 workflows 目录中

https://github.com/zimeng303/realworld-nuxt/blob/master/.github/workflows/main.yml

main.yml 配置代码

name: Publish And Deploy Demo
# 提交 以 V 开头的命令时，才会触发自动部署
on:push:tags:- 'v*'jobs:build-and-deploy:runs-on: ubuntu-lateststeps:# 下载源码- name: Checkoutuses: actions/checkout@master# 打包构建- name: Builduses: actions/setup-node@master- run: npm install- run: npm run build- run: tar -zcvf release.tgz .nuxt static nuxt.config.js package.json package-lock.json pm2.config.json# 发布 Release- name: Create Releaseid: create_releaseuses: actions/create-release@masterenv:GITHUB_TOKEN: ${{ secrets.TOKEN }} # TOKEN 对应我们添加的 secret namewith:tag_name: ${{ github.ref }}release_name: Release ${{ github.ref }}draft: falseprerelease: false# 上传构建结果到 Release- name: Upload Release Assetid: upload-release-assetuses: actions/upload-release-asset@masterenv:GITHUB_TOKEN: ${{ secrets.TOKEN }}with:# release 上传路径、名称配置upload_url: ${{ steps.create_release.outputs.upload_url }}asset_path: ./release.tgzasset_name: release.tgzasset_content_type: application/x-tgz# 部署到服务器- name: Deployuses: appleboy/ssh-action@masterwith:# 在 Secrets 中，配置下面属性host: ${{ secrets.HOST }}username: ${{ secrets.USERNAME }}password: ${{ secrets.PASSWORD }}port: ${{ secrets.PORT }}# 下面的 release 地址 ，修改为 自己的script: |rm -rf /root/realworld-nuxtjs/mkdir /root/realworld-nuxtjscd /root/realworld-nuxtjs          wget https://github.com/zimeng303/realworld-nuxt/releases/latest/download/release.tgz -O release.tgztar zxvf release.tgznpm install --productionpm2 reload pm2.config.json

修改配置
- 配置中，所用到的下载资源地址，修改为自己项目所在的远程仓库地址
- 将所需用到的 HOST 、PORT、USERNAME、PASSWORD ，配置到 Secrets 中

配置 PM2 配置文件

根目录下，新建 pm2.config.json

  {"apps": [{"name": "RealWorld","script": "npm","args": "start"}]}

提交更新
- 将代码暂存到本地：
```
  git add .
```
- 新建标签：
```
  git tag 版本号# git tag v1.0.0
```
- 查看创建的标签：
```
 git tag
```
  运行结果，如图所示：
- 将代码推送到对应的远程 tag 中：
```
  git push origin v0.2.0
```
  运行结果，如图所示：
- 删除 tag
```
  git tag -d 版本号# git tag -d v0.1.3
```
- 删除远程仓库的 tag
```
  git push origin :refs/tags/v0.1.3
```
查看自动部署状态
- 登录 GitHub，查看新建的 tag：
- 点击 actions ，找到刚才 commit 的注解，进入面板，如图所示：
- 部署成功，如图所示：
访问网站
提交更新…

【前端自动化构建】之自动化部署相关推荐

ant构建项目迁移到gradle_自动化构建、自动化部署发布一览
在软件系统开发的过程中,一个项目工程通常会包含很多的代码文件.配置文件.第三方文件.图片.样式文件等等,是如何将这些文件有效的组装起来最终形成一个可以流畅使用的应用程序的呢?答案是借助构建工具或策略. ...
Jenkins+Maven+Gitlab+Tomcat 自动化构建打包、部署
一.环境需求本帖针对的是Linux环境,Windows或其他系统也可借鉴.具体只讲述Jenkins配置以及整个流程的实现. 1.JDK(或JRE)及Java环境变量配置,我用的是JDK1.8.0_1 ...
大前端学习--开发脚手架与自动化构建工作流封装
开发脚手架与自动化构建工作流封装去年6月24号开始工作,到今天刚好一周年了,纪念一下,分享最近学习的前端工程化笔记. 一.前端工程化前端工程化是指遵循一定的标准和规范,通过工具去提高效率.降低成本 ...
前端工程化实战 - 自动化构建工具
文章目录一.自动化构建简介二.自动化构建初体验 2.1 场景描述 2.2 实际操作体验三.常用的自动化构建工具 3.1 Grunt 3.2 Gulp 3.3 FIS 四.自动化构建工具 Grun ...
SpringCloud+Docker+Jenkins+GitLab+Maven实现自动化构建与部署实战
作者:寅务 www.jianshu.com/p/bdb0642b7495 1.前言与初衷本文章会涉及Docker常见命令基础知识点结合不同场景实操一起使用. 本文章会涉及结合工作过程中部署不同环境服 ...
开发脚手架与自动化构建
一.前端工程化概念:遵循一定的标准和规范,通过工具去提高效率,降低成本的一种手段 1.遇到的主要问题想要使用ES6+新特性,但是兼容有问题想要使用Less/Sass/PostCSS增强CSS的编 ...
面向制造领域人机物三元数据融合的本体自动化构建方法
面向制造领域人机物三元数据融合的本体自动化构建方法人工智能技术与咨询点击蓝字 · 关注我们摘要当前,智能制造面临的许多问题都具有不确定性和复杂性,单纯地利用专家经验和机理模型难以有效解决.鉴于 ...
gitlab ci 自动化部署_前端gitLab加jenkins自动化构建和部署，以及服务器常用的linux命令行操作，免密登录...
常用的linux命令行操作将项目部署到服务器后,需要查看文件是否已经部署成功,已经对文件进行增删改查操作,就需要用到命令行操作,常用操作如下: ll 罗列出当前文件或目录的详细信息,含有时间.读写权 ...
近期总结：generator-web，前端自动化构建的解决方案
本文结合最近的工作经验,总结出一个较简洁的前端自动化构建方案,主张css和js的模块化,并通过grunt的自动化构建,有效地解决css合并,js合并和图片优化等问题,对于提高前端性能和项目代码质量有一 ...
altium designer无法创建工程_前端工程化之开发脚手架及封装自动化构建
工程化笔记 . . 光前端工程化简述简述一切能提升前端开发效率,提高前端应用质量的手段和工具都是前端工程化. 模块化,组件化,规范化,自动化. 解决的问题传统语言或语法的弊端. 无法使用模块 ...

【前端自动化构建】之自动化部署

项目说明

自动化部署

基本介绍

GitGub Actions

配置 GitHub Access Token

配置 GitHub Actions 执行脚本

【前端自动化构建】之自动化部署相关推荐

最新文章

热门文章

【前端自动化构建】之 自动化部署

项目说明

自动化部署

基本介绍

GitGub Actions

配置 GitHub Access Token

配置 GitHub Actions 执行脚本

【前端自动化构建】之 自动化部署相关推荐

最新文章

热门文章

【前端自动化构建】之自动化部署

【前端自动化构建】之自动化部署相关推荐