定制你私有的前端部署到ECS服务器(Github CI/CD)

简介: 还在手动拷贝文件到服务器;还在不停git pull;还在天天登录你的服务器去部署静态资源;太low了,试试Github CI/CD自动部署吧

近来手痒,又陷入了自我捣腾的无限循环。
其实事情是这样的,最近阿里云搞活动(嗯,友情打广告),229买了个3年版低配服务器;前端时间写用React + Github Graphql API自定义你的博客, 见识了Github Action的强大,所以就尝试打造自己的前端构建部署工作流程;也许你看到过很多大厂的前端自动构建部署,但鲜有尝试,今天就可以自己动手啦,撸起来吧。
image

从workflow看流程

Github Action workflow大概长这样:

name: Deploy static source to my server

on: 
  push:
    branches:
      -master

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
    - name: checkout
      uses: actions/checkout@v1

    - name: build
      run: npm install && npm run pub

    - name: deploy
      uses: closertb/deploy-static-action@master 
      with:
        name: 'doddle'
        token: ${
   {
    secrets.Deploy_Token }}
        requestUrl: 'http://114.55.38.249:8080/operate/deploy'
        dist: 'dist'
        target: 'adminManage'
AI 代码解读

大概流程是这样:

  • 监听master分支的push操作;
  • checkout:新建构建分支
  • build:依赖安装,打包构建
  • deploy:将上一步的构建产物,打包部署到你的服务器静态资源文件中
  • over

    部署的实现思路

    构建很简单,就是打包,这种工具很多,什么script-build, roadhog,或自定义webpack。这里主要说部署;其实部署也很简单,看图:

image
嗯,部署也讲完了。详细实现过程看参见我自定义的action:deploy-static-action
关于上面的几个构建参数:

  • name:一个名字,自己随便啦,根据自己需要
  • token:这个比较重要,服务器的通关口令。这里最好的方式是通过项目的secrets来设置
  • dist:构建打包后的文件夹名,会根据这个文件夹名来获取其中的构建产物, 默认是dist
  • target:静态资源的目标文件夹名, 默认是dist
  • requestUrl:一个部署API

关于上传服务器

deploy-static-action其实只做了部署中的构建产物收集,真正的部署其实是依赖requestUrl来实现的,所以要实现 http://114.55.38.249:8080/operate/deploy 这个服务也很重要,你可以重用我的deploy-static-action,但部署API不能,因为这个API是给我的服务器私有定制的。不过我可以提供示例代码参考:
参考代码, deploy.js

一张构建效果图

image

文章首发:定制你私有的前端构建部署(Github CI/CD)
参考文章:

相关实践学习
快速体验PolarDB开源数据库
本实验环境已内置PostgreSQL数据库以及PolarDB开源数据库:PolarDB PostgreSQL版和PolarDB分布式版,支持一键拉起使用,方便各位开发者学习使用。
7天玩转云服务器
云服务器ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务,可降低 IT 成本,提升运维效率。本课程手把手带你了解ECS、掌握基本操作、动手实操快照管理、镜像管理等。了解产品详情: https://www.aliyun.com/product/ecs
目录
打赏
0
0
0
0
1
分享
相关文章
DeepSeek服务器繁忙解决方法:使用阿里云一键部署DeepSeek个人网站!
通过阿里云一键部署DeepSeek个人网站,解决服务器繁忙问题。学生用户可领取300元代金券实现0成本部署,普通用户则可用99元/年的服务器。教程涵盖从选择套餐、设置密码到获取百炼API-KEY的全流程,助您快速搭建专属大模型主页,体验DeepSeek、Qwen-max、Llama等多款模型,无需代码,最快5分钟完成部署。支持绑定个人域名,共享亲友使用,日均成本仅约1元。
93 10
告别服务器繁忙,云上部署DeepSeek
本文以 DeepSeek-R1-Distill-Qwen-32B-FP8 为例,向您介绍如何在GPU实例上使用容器来部署量化的 DeepSeek-R1 蒸馏模型。
Vue项目部署:如何打包并上传至服务器进行部署?
以上就是Vue项目打包及部署的方法,希望对你有所帮助。描述中可能会有一些小疏漏,但基本流程应该没有问题。记住要根据你的实际情况调整对应的目录路径和服务器IP地址等信息。此外,实际操作时可能会遇到各种问题,解决问题的能力是每一位开发者必备的技能。祝你部署顺利!
78 17
一键安装!阿里云新功能部署Nodejs环境到ECS竟然如此简单!
Node.js 是一种高效的 JavaScript 运行环境,基于 Chrome V8 引擎,支持在服务器端运行 JavaScript 代码。本文介绍如何在阿里云上一键部署 Node.js 环境,无需繁琐配置,轻松上手。前提条件包括 ECS 实例运行中且操作系统为 CentOS、Ubuntu 等。功能特点为一键安装和稳定性好,支持常用 LTS 版本。安装步骤简单:登录阿里云控制台,选择扩展程序管理页面,安装 Node.js 扩展,选择实例和版本,等待创建完成并验证安装成功。通过阿里云的公共扩展,初学者和经验丰富的开发者都能快速进入开发状态,开启高效开发之旅。
一键部署OpenWebUI+Ollama到阿里云ECS,轻松运行DeepSeek!(保姆级教程)
在当今数据驱动的时代,快速部署和管理大模型成为企业的关键需求。阿里云提供了一键部署OpenWebUI+Ollama的便捷方案,支持本地大模型运行和管理。用户也可以选择连接阿里云百炼的在线模型。
一键部署OpenWebUI+Ollama到阿里云ECS,轻松运行DeepSeek!(保姆级教程)
GitHub 热门开源运维工具 Websoft9:如何实现服务器管理效率翻倍?
Websoft9 提供 200+ 开源应用一键部署,支持容器化隔离、GitOps 自动化和企业级安全防护,助力服务器管理效率提升 80%。
55 1
一键安装!阿里云新功能部署Nodejs环境到ECS竟然如此简单!
一键安装!阿里云新功能部署Nodejs环境到ECS竟然如此简单!
一键安装!阿里云新功能部署Nodejs环境到ECS竟然如此简单!
阿里云出手了,DeepSeek服务器拒绝繁忙,免费部署DeepSeek模型671B满血版
阿里云推出免费部署DeepSeek模型671B满血版服务,通过百炼大模型平台,用户无需编码,最快5分钟、最低0元即可完成部署。平台提供100万免费Token,支持DeepSeek-R1和DeepSeek-V3等多款模型调用,有效解决服务器繁忙问题。新手零基础也能轻松上手,享受高效稳定的API调用和自动弹性扩展功能。教程涵盖开通服务、获取API-KEY及配置Chatbox客户端等步骤,详细指引助您快速实现DeepSeek自由。
237 18
【已解决】Matomo本地SMTP配置可以发邮件,但部署到阿里云ECS就发不了邮件
在阿里云ECS上使用Matomo和PHPMailer发送邮件时遇到问题,邮件无法发出且接口调用Pending。经过排查,发现是ECS安全组未开放25/465端口,导致SMTP请求无法正常通信。解决方法为在安全组中配置并开放25/465端口,从而恢复邮件发送功能。
在阿里云ECS上一键部署DeepSeek-R1
Open WebUI 和 Ollama 的联合,通过集成 DeepSeek-R1 的强大功能,赋予每一位用户使用尖端 AI 技术的能力,使得复杂的 AI 技术不再是遥不可及的梦想。无论是研究人员、开发者,还是企业用户,您都能从这一创新中获得新的灵感和增长点。本文介绍通过计算巢一键部署和使用DeepSeek-R1。
在阿里云ECS上一键部署DeepSeek-R1

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等