纯 Git 实现前端 CI/CD
编程微刊
共 3170字,需浏览 7分钟
· 2021-11-15
作者:杨成功
来源:SegmentFault 思否社区
最近要高效的把前端 react 项目部署到私有服务器上,研究了好几种持续部署方案,这里简单描述一下。
总的部署思路分两种:
编译后的文件部署 源码部署
npm run build
打包,生成 build 文件夹,然后将 build 文件夹传到服务器,再用 Nginx 配置一个静态解析即可。$ npm install && npm run build
服务端
node
git
nginx
,开始动手。创建裸仓库
.git
文件夹$ cd /opt
$ git init --bare react-test.git
/opt/react-test.git
,记住这里后面会用到。hook
文件夹。这个文件夹可不得了,是放 Git “钩子” 的地方。添加 push 钩子
post-receive
文件,这个钩子文件会在代码 push 到这个裸仓库后执行,这里是本文最重要的重点。$ cd /opt/react-test.git/hook
$ vim post-receive
#!/bin/bash
echo 'server: received code push...'
cd /home/react-test
echo 'server: checkout latest code from git...'
git --git-dir=/opt/react-test.git --work-tree=/home/react-test checkout -f release
echo 'server: running npm install...'
npm install \
&& echo 'server: buildding...' \
&& npm run build \
&& echo 'server: done...'
git --git-dir=/opt/react-test.git --work-tree=/home/react-test checkout -f release
git init
初始化 git 仓库。执行的 add,commit 等操作,默认就是与这个仓库交换文件。项目目录
和 git 仓库
。项目目录就是 package.json 文件所在的目录,我们的代码放在这里。git 仓库是项目目录下的 .git
文件夹,它是个隐藏目录,在 npm init
时自动生成。--git-dir
参数就允许你指定一个其他的 git 仓库。/home/react-test
下修改的文件添加到暂存区:# 默认加到 /home/react-test/.git
$ git add .
# 加到 /home/git-test/.git
$ git --git-dir /home/git-test/.git add .
--work-tree
参数就允许你指定其他的项目目录。/home/react-test
下检出分支:# 默认从 /home/react-test/.git 检出
$ git checkout dev-test
# 从 /home/git-test/.git 检出
$ git --work-tree /home/git-test/.git checkout dev-test
/opt/react-test.git
这个 git 仓库的 release
分支,检出(checkout)到项目目录 /home/react-test
,从而更新了项目目录的代码。nginx 解析
$ cd /etc/nginx/conf.d
$ vim react-test.conf
server {
listen 80;
server_name yourhost; # 如 www.baidu.com
root /home/react-test/build; # 指向打包后的目录
location / {
index index.html;
}
}
nginx -s reload
,这样解析就配好了!客户端
react-test.git
,回到客户端只需要做一件事:将代码推到这个裸仓库。推送代码
$ git remote add prod ssh://root@198.234.456.8/opt/react-test.git
$ git checkout -b release
$ git push prod release
post-receive
中写好的输出。当推送完成,查看服务器下的 /home/react-test 目录,会看到源文件和打包后的 build
文件评论
用 Shader 实现旗帜飘扬动画效果
我觉得对于刚入门 3D 编程的朋友来说,如果能够完成代码创建模型数据->创建材质->编写Shader动画这一系列,想必会有满满的成就感。今天就用 Cocos Creator 的 utils.MeshUtils.createMesh 接口,带大家感受一下这个流程。这个流程不仅可以用于新手学
COCOS
2
分享几个前端中好玩且有用的开源工具,总有一个适合你!
点击上方 前端Q,关注公众号回复加群,加入前端Q技术交流群正所谓差生文具多,作为前端的我们,拥有几个合适的工具和网站可以很有效的提高我们的工具效率,还会有一些很有趣的网站可以在我们敲 bug 累了的时候供我们娱乐,接下来我就和大嘎分析一下我在用的一些工具和网站。聚合API该网站提供了大量的
前端Q
0
前端框架新势力大盘点
点击上方 前端Q,关注公众号回复加群,加入前端Q技术交流群近年来,前端领域快速发展,新的框架不断涌现,为开发者提供了更多选择和解决方案。尽管 React、Vue、Angular、Next.js、Preact 等老牌框架依然稳坐市场主流,但新势力前端框架的崛起也为特定场景带来了更佳的适配和优
前端Q
0
SpringBoot+Minio实现上传凭证、分片上传、秒传和断点续传
关注我们,设为星标,每天7:40不见不散,架构路上与您共享回复架构师获取资源大家好,我是你们的朋友架构君,一个会写代码吟诗的架构师。Spring Boot整合Minio后,前端的文件上传有两种方式:1、文件上传到后端,由后端保存到Minio这种方式好处是完全由后端集中管理,可以很好的做到、身份验证、
Java架构师社区
0
【Vuejs】2023- Vue3 项目前端 CI/CD 体验
作者:PAXTONX1. 环境准备➜ app-cicd node --versionv18.0.0➜ app-cicd npm --version9.6.62. 安装2.1 初始化选项项目初始化选择。➜ &
前端自习课
10
超越原生,散点图实现华夫饼图
之前我们介绍过了如何使用新卡片图实现华夫饼图。参考:超越原生,PowerBI 华夫饼图实现但是利用卡片图实现的华夫饼图有一些缺点,形状之间的大小跟间距不太好把握,而且有时形状大一点的话显示就会不正常,需要做出二次调整。今天给大家介绍一种原生视觉对象生成华夫饼图的更佳方案,既简单又美观。上图是利用散点
PowerBI战友联盟
2
Spring Boot + flowable 快速实现工作流
关注我们,设为星标,每天7:40不见不散,架构路上与您共享回复架构师获取资源大家好,我是你们的朋友架构君,一个会写代码吟诗的架构师。来源:blog.csdn.net/zhan107876/article/details/120815560总览一、flowable-ui部署运行二、绘制流程图绘图细节:
Java架构师社区
0
实现订单30分钟自动取消的策略
原文:juejin.cn/post/7285167401821798400简介在电商和其他涉及到在线支付的应用中,通常需要实现一个功能:如果用户在生成订单后的一定时间内未完成支付,系统将自动取消该订单。本文将详细介绍基于Spring Boot框架实现订单30分钟内未支付自动取消的几种方案,并提供实例
JAVA乐园
0