手把手搭一个自动化部署的前端项目

1、搭建git服务器

本人使用的是 cenos 系统的腾讯云服务器

---

• 1. 服务器安装git

  yum install -y git
  复制代码

  安装完了以后使用命令查看版本，检验是否安装成功。

  $ git --version
  复制代码

• 2. 建立一个系统用户进行git仓库的管理

  我起的是 htgit(先检测这个用户是否存在)

  [root@VM_183_60_centos hongtao]# id htgit
  复制代码

  若是存在会出现:

  uid=1001(htgit) gid=1001(htgit) groups=1001(htgit)
  复制代码

  若是不存在则提示

  id: htgit: no such user
  复制代码

  就能够建立用户了,输入如下命令

  useradd htgit
  复制代码

  建立完成使用id htgit检测是否建立成功

• 3. 建立项目仓库

  建立一个项目文件夹

  mkdir -p <文件夹名字>
  # 好比个人是
  mkdir -p mypro
  复制代码

  建立git仓库

  mkdir -p myblog.git
  复制代码

  初始化git仓库

  git init --bare myblog.git
  复制代码

  使用 ll命令查看目录信息

  # ll
  drwxr-xr-x  2 root root 4096 Jan 29 16:19 myblog.git
  复制代码

  myblog.git 是归属root用户的，如今修改为咱们以前新建的htgit用户。

  sudo chown -R htgit:htgit myblog.git
  复制代码

  服务器拉取服务器git仓库的代码

  git clone ./myblog.git
  复制代码

  ll查看当前文件夹

  drwxr-xr-x  3 root  root  4096 Jan 29 16:34 myblog
  drwxr-xr-x  7 htgit htgit 4096 Jan 29 16:26 myblog.git
  复制代码

  注意：把myblog目录也要改为htgit用户的权限，不然git钩子在操做的时候会没有权限

2、配置sshd 免密码链接

---

• 1. 服务器上创建ssh验证

  使用 cd ~htgit 或者 cd /home/htgit 进入到咱们htgit的用户目录,建立.ssh文件夹。

  mkdir .ssh
  复制代码

  更改权限

  chown -R htgit:htgit .ssh
  chmod -R 700 .ssh
  复制代码

  进入.ssh/

  cd .ssh
  复制代码

  建立 authorized_keys

  vim authorized_keys
  复制代码

  一会须要将客户端的公钥填写到这个文件上

  更改此文件的权限

  chmod 600 authorized_keys
  复制代码

• 2. 客户端配置ssh

  ssh-keygen -t rsa -C '你的邮箱'
  复制代码

  若是以前建立过直接使用就好了

  本人客户端是 windows 系统

  找到系统盘下通常是 C:\Users\用户名\.ssh的id_rsa.pub文件。用编辑器将它打开，将里面的内容复制到以前咱们在服务器上建立的那个authorized_keys文件里去。

3、建立客户端本地项目

---

• 1. 客户端拉取代码

  好比我是在window系统上，你得安装了git，打开git bash， 输入以前咱们在服务器装的git仓库的路径

  git clone htgit@[你的服务器ip地址]:[你的git仓库路径]
  复制代码

  好比个人:

  git clone htgit@139.199.72.20:/usr/hongtao/myblog.git
  复制代码

• 2. 配置本地代码

  本人仍是以iview-admin项目为例子

  iview-admin代码地址

  进入上一步骤咱们git clone下来的目录myblog里

  这里我就不作演示了，直接将iview-admin的代码拷贝进来。而后提交上传

• 3. 服务器运行代码

  上一步的操做使得咱们服务器上的 myblog.git仓库上有了咱们客户端推送过来的代码了，以前咱们在服务器上 git clone ./myblog.git的时候也生成了一个myblog的文件夹。进入这个文件夹输入git pull便可获取当前服务器git仓库的最新代码。而后执行

  npm i
  npm run dev
  复制代码

  以后便可在服务器跑起来了。

  到了这一步以后咱们便知道了如何手动的去运行前端代码了。

  在服务器上运行前端项目有不少种方式。如：

  • nginx静态资源服务器
  • nodeJs服务器
  • php服务
  • 。。。等等

  本文以nodejs运行的前端项目为例子。直接使用webpack的热更新运行项目。

4、编写git钩子

---

进入咱们的服务器git仓库文件夹里

cd /usr/hongtao/myblog.git
复制代码

该目录下有一个hooks目录cd hooks进入

编写一个叫post-receive的文件

vim post-receive
复制代码

写入以下内容

#!/bin/bash
DIR=/usr/hongtao/myblog
cd $DIR
echo $DIR
echo '服务器代码更新'
unset $(git rev-parse --local-env-vars)
git fetch --all
git reset --hard origin/master
git pull
npm install
复制代码

添加可执行权限

chmod +x post-receive
复制代码

每当咱们客户端提交一次代码，这个钩子就会运行一次。因为咱们的前端代码是热更新的做用，当代码更新了，咱们直接访问的就是咱们最新的页面。

若有问题请联系 qq：836717428