纯前端项目持续集成和部署实现
最近要高效的把纯前端项目部署到云服务器上,研究了好几种持续集成部署方案,这里简单记录描述一下。方案选择总的部署思路分两种:编译后的文件部署编译后的文件部署,就是先在本地进行npm run build打包,生成 build 文件夹,然后将 build 文件夹传到服务器,再用 Nginx 配置一个静态解析即可。源码部署源码部署就是把源文件上传到服务器上,然后执行 npm install &&a
最近要高效的把纯前端项目部署到云服务器上,研究了好几种持续集成部署方案,这里简单记录描述一下。
方案选择
总的部署思路分两种:
-
编译后的文件部署
编译后的文件部署,就是先在本地进行
npm run build
打包,生成 build 文件夹,然后将 build 文件夹传到服务器,再用 Nginx 配置一个静态解析即可。 -
源码部署
源码部署就是把源文件上传到服务器上,然后执行
npm install && npm run build
,这种方式是将打包工作交给服务器,本地只是将源代码 push 上去,git 监听到推送然后自动开始构建。这是现在流行的方式,大多数持续集成工具都是这么干的。
关于本项目,我决定不借助其他构建工具,只用纯 Git 实现监听 push 并自动构建和服务启动。
服务端
-
首先准备一台服务器,我使用的是云服务器:
Host : 118.xxx.xxx.xxx
项目目录:/root/demo/my-project
-
在服务器初始化一个正常仓库
登入服务器,在服务器的/root/demo/my-project
目录下创建一个正常仓库在
/root/demo/my-project
目录下执行命令创建:git init my-project
创建好后,会生成my-project文件夹,所以我们的正常仓库位置是
/root/demo/my-project
,记住这里后面会用到。 -
创建裸仓库
登入服务器,在服务器的
/root/demo
目录下创建一个裸仓库(什么是裸仓库?裸仓库就是没有工作目录的仓库,说白了就是你的项目目录下的 .git 文件夹)在
/root/demo
目录下执行命令创建:git init --bare my-project.git
创建好后,会生成my-project.git文件夹,所以我们的裸仓库位置是
/root/demo/my-project.git
,记住这里后面会用到。接下来,进入my-project.git 文件夹,发现里面有个 hooks 文件夹,是放 Git “钩子” 的地方。
“钩子” 其实就是一个 shell 文件。在执行 git 某些操作(如:push,pull)时触发执行。现在我们创建一个钩子。 -
添加 push 钩子
在 hook 目录下新建 post-receive 文件,这个钩子文件会在代码 push 到这个裸仓库后执行,这里是本文最重要的重点。
在hooks文件夹下执行命令创建post-receive文件
vim post-receive
post-receive 的具体内容如下:
#!/bin/bash echo 'server: received code push...' cd /root/demo/my-project echo 'server: checkout latest code from git...' git --git-dir=/root/demo/my-project.git --work-tree=/root/demo/my-project checkout -f master npm install echo 'server: install success' npm run build echo 'server: build success' pm2 list pm2 stop my-project echo 'server: my-project stop' pm2 start my-project echo 'server: my-project start'
特别注意:创建完成后一定要将post-receive赋予可执行权限
这个脚本最重要的就一条命令:
git --git-dir=/root/demo/my-project.git --work-tree=/root/demo/my-project checkout -f master
命令的意思:将
/root/demo/my-project.git
这个 git 仓库的 master 分支,检出(checkout)到项目目录/root/demo/my-project
,从而更新了项目目录的代码。在shell脚本中,检出新代码之后,直接运行了打包命令(也就是脚本中的
npm run build
)更新部署文件夹,然后执行了pm2 start my-project
这样前端的服务就在服务器启动了(其实你可以直接执行npm start
)至于什么是pm2请自行搜索,pm2是node进程管理工具,能够保证在关闭终端以后服务不被终止
其实这时候我们的应用就已经在服务器上启动了,并且可以通过IP+服务端口http://118.xxx.xxx.xxx:3000 (我的服务端口是3000)的方式进行访问了,但是要想像正常网站一样被访问,就需要借助nginx了
Nginx
至于怎么使用nginx将服务端口映射出去这里不进行讲解了,回头可以自行研究下nginx的代理配置,大概配置如下:
server {
listen 443 ssl;
server_name www.myproject.com;
location / {
proxy_pass http://127.0.0.1:3000;
}
}
客户端
前面在服务器建好了 git 裸仓库my-project.git,回到客户端只需要做一件事:将代码推到这个裸仓库。
第一步,我们先在本地项目下,将这个裸仓库添加为远程仓库。
git remote add prod ssh://root@118.xxx.xxx.xxx/root/demo/my-project.git
第二步,我们直接将代码推送到这个远程仓库:
git checkout -b master
git push prod master
这里必须要切换到 master 分支再推送。因为在远程仓库钩子中,我们定义的是检出 master 分支,所以要推送的是 master 分支。
推送后,会在控制台看到我们在 post-receive 中写好的输出。当推送完成,查看服务器下的 /root/demo/my-project
目录,会看到源文件和打包后的文件。
到这里,CI/CD 工作已经全部完成。
后续的持续部署工作,只需要在客户端执行 git push prod master
即可。
更多推荐
所有评论(0)