手把手搭一個自動化部署的前端項目

時間 2019-11-08

原文原文鏈接

1、搭建git服務器

本人使用的是 cenos 系統的騰訊雲服務器php

1. 服務器安裝git
```
yum install -y git
複製代碼
```
安裝完了以後使用命令查看版本，檢驗是否安裝成功。前端
```
$ git --version
複製代碼
```
1. 建立一個系統用戶進行git倉庫的管理
我起的是 htgit(先檢測這個用戶是否存在)node
```
[root@VM_183_60_centos hongtao]# id htgit
複製代碼
```
若是存在會出現:webpack
```
uid=1001(htgit) gid=1001(htgit) groups=1001(htgit)
複製代碼
```
若是不存在則提示nginx
```
id: htgit: no such user
複製代碼
```
就能夠建立用戶了,輸入如下命令git
```
useradd htgit
複製代碼
```
建立完成使用id htgit檢測是否建立成功github

建立項目倉庫

建立一個項目文件夾web

mkdir -p <文件夾名字>
# 好比個人是
mkdir -p mypro
複製代碼

建立git倉庫npm

mkdir -p myblog.git
複製代碼

初始化git倉庫vim

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
複製代碼
```
1. 客戶端配置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
複製代碼
```
1. 配置本地代碼
本人仍是以iview-admin項目爲例子

iview-admin代碼地址

進入上一步驟咱們git clone下來的目錄myblog裏

這裏我就不作演示了，直接將iview-admin的代碼拷貝進來。而後提交上傳
1. 服務器運行代碼
上一步的操做使得咱們服務器上的 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
複製代碼

添加可執行權限