本篇文章主要是记录实现过程中遇到的问题，以及如何解决出现的问题，原始教程参考杨成功所写的这篇文章《纯 Git 实现前端 CI/CD》。

纯Git实现前端项目打包部署

实现原理
实现步骤
- 1.在服务器中安装相应的软件程序
- 2.服务端创建裸仓库
- 3.添加相应钩子文件
- 4.添加nginx解析
- 5.本地仓库设置以及推送代码
出现的问题以及解决办法
- 1.钩子文件没有运行权限
- 2.Node.js版本太低

实现原理

利用Git Hooks功能，也就是我们所说的钩子功能，当服务器端的仓库收到客户端的push事件后，将对应的分支checkout到指定的目录，然后执行打包命令，也就实现了自动打包部署的功能。

实现步骤

1.在服务器中安装相应的软件程序

在服务器中安装所需要用到的软件：Node.js、Git、Nginx，具体的安装过程不细说了，不会的可以在网上查一下。

2.服务端创建裸仓库

登入服务器，找一个合适目录下创建一个裸仓库。这里演示是选择的 /opt 文件夹，该目录一般是用来安装软件应用程序的文件夹，一般都是空的。

$ cd /opt
$ git init --bare react-test.git

第一行命令是进入opt目录。
第二行命令是创建一个名为react-test.git的裸仓库，git init是初始化命令，加上--bare参数就是创建裸仓库。裸仓库不包含工作区，所以不能在裸仓库上直接提交变更。
操作成功后会在opt目录下多出一个react-test.git文件夹。

3.添加相应钩子文件

在react-test.git下有个hooks文件夹，里面存放的就是hook文件，hook文件就是shell脚本，在执行某个事件之前或之后进行一些其他额外的操作。

hooks文件夹下默认都是一些.sample结尾的文件，这些都是示例文件，是不会生效的，如果要生效，需要把文件名末尾的.sample去掉才行。例如pre-commit.sample需要改为pre-commit。
默认情况下，hooks目录下只有部分钩子的示例文件，如果想要查看全部钩子说明，可参考官网链接。
因为没有对应的钩子示例文件，所以我们需要手动添加一个名为post-receive钩子文件，该钩子文件会在代码push到这个裸仓库后执行。
输入以下命令在hooks目录下添加post-receive钩子文件：

$ cd /opt/react-test.git/hooks
$ vim post-receive

然后将以下内容复制到post-receive文件中：

#!/bin/bash
echo 'server: received code push...'
cd /home/react-testecho 'server: checkout latest code from git...'
git --git-dir=/opt/react-test.git --work-tree=/home/react-test checkout -f releaseecho 'server: running npm install...'
npm install \&& echo 'server: buildding...' \
&& npm run build \
&& echo 'server: done...'

echo命令作用是单纯的输出字符串。cd /home/react-test命令进入/home/react-test文件夹，该文件夹用来存放从git仓库检出的分支代码，以及后面要进行的项目打包步骤也是在该文件夹进行。
git --git-dir=/opt/react-test.git --work-tree=/home/react-test checkout -f release这句命令是最关键的一句代码，该命令是一句Git命令，由于我们创建的是一个裸仓库，必须指定仓库目录地址以及工作区目录。--git-dir=/opt/react-test.git意思是指定git仓库目录，--work-tree=/home/react/test意思是指定工作区目录，checkout命令是检出分支，-f参数是指强制执行，release是代码仓库分支名称。这一整句Git命令的作用就是将react-test.git仓库的release分支检出到/home/react-test目录下。
接下来的npm install和npm run build命令作用分别是安装依赖和代码打包构建，这样就实现了部署文件的更新。

4.添加nginx解析

找到nginx的配置文件nginx.conf,修改如下配置：

...其它配置
http {...其它配置server {listen       80;server_name  localhost;location / {root   html;index  index.html index.htm;}location /react-test {alias   /home/react-test/build;index  index.html index.htm;}}...其它配置
}
...其它配置

需要注意的是配置指向路径时，不一定都是/home/react-test/build，需要根据项目打包后的文件夹名称调整，如果打包后的文件夹是dist，那么指向的文件夹路径就应该是/home/react-test/dist。

5.本地仓库设置以及推送代码

给本地仓库添加远端仓库地址，在添加前可以通过以下Git命令查看本地仓库已经链接的远端仓库地址：

$ git remote -v

如果是通过仓库地址clone的项目，应该可以看到已经有名称为origin的远端仓库地址，再添加远端仓库链接时就应该避免重名。通过以下命令添加刚才我们在服务端创建的裸仓库：

$ git remote add prod ssh://root@45.40.253.19/opt/react-test.git

git remote add是添加远端仓库的命令，prod是设置名称，可以修改为其它的，ssh://root@45.40.253.19/opt/react-test.git是远端仓库地址，root是服务器登录账号，45.40.253.19是服务器IP地址。
添加成功后，再次使用git remote -v就可以看到已经多出了名称为prod的远端仓库链接地址。
然后就是通过以下命令将本地代码推送到我们的远端裸仓库上：

$ git push prod release

git push是向远端推送代码的命令，prod是远端仓库链接名称，需要和刚才添加远端仓库时设置的名称一致，release意思是需要向远端仓库哪个代码分支推送代码，需要和设置服务端钩子文件时检出的分支名称一致，也就是这句命令中git --git-dir=/opt/react-test.git --work-tree=/home/react-test checkout -f release的release名称一致，这样才能保证服务端检出到文件夹下的代码是我们想要打包的代码。
执行这句命令后，就会将本地的代码推送到服务器端代码仓库，仓库收到后执行钩子文件，将最新的release分支代码检出到/home/react-test目录下，然后安装依赖，执行打包操作，最后文件夹下多出build（有可能为其它名称，由前端代码打包相关设置决定）打包后文件夹，完成项目部署。

出现的问题以及解决办法

1.钩子文件没有运行权限

如果向远端仓库提交代码后出现以下情况说明钩子文件没有运行权限：

这种情况赋予钩子文件执行权限即可，输入以下代码：

$ chmod 700 /opt/react-test.git/hooks/pre-commit

2.Node.js版本太低

如果向远端提交代码出现下面这种情况则是Node.js版本太低：
解决办法升级Node.js，安装n组件来管理node版本：

$ npm install -g n

可以通过以下命令来管理版本：

# 升级到指定版本 “n 版本号”
$ n 10.0.0
# 安装最新的版本
$ n latest
# 安装最近的稳定版本
$ n stable

可能会出现切换node版本失效的情况：

执行切换命令后没有切换版本成功。使用以下命令查看node安装路径：

$ which node

n 默认安装路径是 /usr/local，若你的 node 不是在此路径下，n 切换版本就不能把bin、lib、include、share 复制该路径中，所以我们必须通过N_PREFIX变量来修改 n 的默认node安装路径。
编辑环境配置文件：

$ vim ~/.bash_profile

参照下图修改内容：

export N_PREFIX=/usr/local设置node实际安装位置。
修改后通过以下命令使配置文件立即生效：

$ source ~/.bash_profile

执行后，再次查看node版本就会发现已经成功切换版本了。

如果该文章对您有所帮助，请您一定不要吝啬您的鼓励。点赞、评论、分享、收藏、打赏都是您对我的鼓励和支持。
如果您有GitHub账号，还可以关注我~
最后，感谢大家的阅读，如有错误，还请各位批评指正。

纯Git实现前端项目打包部署相关推荐

如何部署前端react项目到服务器,Vue、React前端项目打包部署
前端单页面应用部署前端打包上线部署方案之 hash路由模式对于hash路由模式打包的单页面应用,直接发布到服务器,使用nginx指向到对应文件目录即可,通用配置一般如下: location / { ...
Vue项目打包部署总结
由于之前对前端部署上线这一套不清楚,所以这次通过查找多方资料总结一下.使用Vue作先后端分离项目时,一般前端是单独部署,用户访问的也是前端项目地址,所以前端开发人员颇有必要熟悉一下项目部署的流程与各种 ...
Vue 项目打包部署实战完整流程总结!
使用Vue做前后端分离项目时,通常前端是单独部署,用户访问的也是前端项目地址,因此前端开发人员很有必要熟悉一下项目部署的流程与各类问题的解决办法了. Vue项目打包部署本身不复杂,不过一些前端同学可能 ...
前端项目自动化部署——超详细教程（Jenkins、Github Actions）
本教程主要讲解了怎么使用 Jenkins 和 Github Actions 部署前端项目. 第一部分是使用 Gitea 配置局域网 git 服务器,再使用 Jenkins 将 Gitea 下的项目部署 ...
前端教程——前端项目自动化部署（Jenkins、Github Actions）
本教程主要讲解了怎么使用 Jenkins 和 Github Actions 部署前端项目. 第一部分是使用 Gitea 配置局域网 git 服务器,再使用 Jenkins 将 Gitea 下的项目部署 ...
前端项目自动化部署——超详细教程（Jenkins、Github Actions）(转发)
本教程主要讲解了怎么使用 Jenkins 和 Github Actions 部署前端项目. 第一部分是使用 Gitea 配置局域网 git 服务器,再使用 Jenkins 将 Gitea 下的项目部署 ...
python 自动化框架打包_听说很多人都不会打包，教你Python实现前端自动化打包部署！...
作为一名专职前端开发的我,为了帮助解决目前工作中的一些繁琐的工作(主要是处理 excel数据),解放程序员双手,前阵子就刚刚入了 python 的坑,毕竟也算是门工具语言,都已经加入少儿编程了,哈哈哈 ...
Vue.js-Day09【项目实战(附带完整项目源码)-day04：用户个人中心页面、用户登录页面、将项目打包部署到服务器上、项目汇报、实训心得】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 实战项目源码[链接:https://pan.baidu.com/s/1r0Mje3Xnh8x4F1HyG4aQTA 提 ...
vuecli打包后的dist目录无法访问_听说很多人都不会打包，教你Python实现前端自动化打包部署！...
作为一名专职前端开发的我,为了帮助解决目前工作中的一些繁琐的工作(主要是处理 excel数据),解放程序员双手,前阵子就刚刚入了 python 的坑,毕竟也算是门工具语言,都已经加入少儿编程了,哈哈哈 ...
Jenkins+Github+Nginx实现前端项目自动部署
Jenkins+Github+Nginx实现前端项目自动部署前言最近在搭建一个自己的网站,网站框架搭好了要把项目放到服务器运行,但是每次更新网站内容就要手动部署一次,实在很麻烦,于是就想搭建一套自 ...

纯Git实现前端项目打包部署

纯Git实现前端项目打包部署

实现原理

实现步骤

1.在服务器中安装相应的软件程序

2.服务端创建裸仓库

3.添加相应钩子文件

4.添加nginx解析

5.本地仓库设置以及推送代码

出现的问题以及解决办法

1.钩子文件没有运行权限

2.Node.js版本太低

纯Git实现前端项目打包部署相关推荐

最新文章

热门文章