共计 2243 个字符,预计需要花费 6 分钟才能阅读完成。
概述
最近要高效的把前端 react 我的项目部署到公有服务器上,钻研了好几种继续部署计划,这里简略形容一下。
总的部署思路分两种:
- 编译后的文件部署
- 源码部署
编译后的文件部署,就是先在本地进行 npm run build
打包,生成 build 文件夹,而后将 build 文件夹传到服务器,再用 Nginx 配置一个动态解析即可。
这种计划用 rsync 间接上传就能够,这里不赘述。
源码部署就是把源文件部署到服务器上,而后:
npm install && npm run build
这种形式是将打包工作交给服务器(或其余构建工具),本地只是将源代码 push 下来,git 监听到推送而后主动开始构建。这是当初风行的形式,大多数继续集成工具都是这么干的。
明天的重头戏来了!咱们不借助其余构建工具,只用纯 Git 实现监听 push 并主动构建。置信我,这一步十分好玩~
Git 构建
首先筹备一台服务器,装置好 node
git
nginx
,开始入手
服务器信息如下:
host:198.234.456.8(不必试,假的)
我的项目目录:/home/react-test
创立裸仓库
登入服务器,在服务器的 /opt 目录下创立一个裸仓库
什么是裸仓库?裸仓库就是没有工作目录的仓库,说白了就是你的我的项目目录下的 .git
文件夹
执行命令创立:
cd /opt
git init --bare react-test.git
创立好后,会生成 react-test.git 文件夹,所以咱们的裸仓库地位是 /opt/react-test.git
,记住这里前面会用到
接下来,进入 react-test.git 文件夹,发现外面有个 hook
文件夹。这个文件夹可不得了,是放 Git“钩子”的中央。
所谓“钩子”,其实就是一个 shell 文件。在执行 git 操作(如:push,pull)时触发执行。
当初咱们创立一个钩子。
push 钩子
在 hook 目录下新建 post-receive
,这个钩子会在代码 push 到这个裸仓库后执行,这里是本文最重要的重点。
cd /opt/react-test.git/hook
vim post-receive
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。
个别咱们是在我的项目根目录下初始化 git 仓库(就是 .git
文件夹)。在执行 push,pull 等操作时,默认用的就是这个仓库。
那么,能不能用其它中央的 git 仓库呢?
当然能够,--git-dir
参数就容许你指定一个其余的 git 仓库
既然我的项目目录能够指定其它的 git 仓库,那么 git 仓库可不可以指定其它的我的项目目录呢?
当然也能够,--work-tree
参数就容许你指定其余的我的项目目录
神奇吧,哈哈。这样就把我的项目和仓库离开了。
了解到这,再看下面那条命令的意思:将 /opt/react-test.git
这个仓库的 release
分支,检出(checkout)到目录 /home/react-test
这里配好了之后,再回到本地我的项目。
本地配置
上一步在公有服务器建了一个 git 裸仓库 react-test.git
,当初咱们在本地我的项目把这个仓库增加为近程仓库。
git remote add prod ssh://198.234.456.8/opt/react-test.git
没错,可能你曾经看明确了,接下来就是要把源码间接推送到这个裸仓库:
git checkout -b release
git push prod release
这里首先切换到 release 分支,没有会主动新建。因为在钩子中,咱们写的是检出 release 分支,所以要推送的是 release 分支。
这里可能会要求你输出服务器明码,能够配置 ssh 免密登录
来间接推送,这里不介绍。
推送后,会在控制台看到咱们在 post-receive
中写好的输入。当推送实现,查看服务器下的 /home/react-test 目录,会看到源文件和打包后的 build
文件
此时,部署工作曾经实现了。
后续部署工作,只须要 push 一下即可。
nginx 解析
上一部,部署实现,并打包了 build 文件夹
最初一部,就是配置一个域名,解析这个文件夹:
cd /etc/nginx/conf.d
vim react-test.conf
react-test.conf 如下:
server {
listen 80;
server_name yourhost; # 如 www.baidu.com
root /home/react-test/build; # 指向打包后的目录
location / {index index.html;}
}
保留并退出后,nginx -s reload
,而后能够间接拜访了!