使用某一技術(shù)棧多了，自然而然就要考慮屬于自己常用的腳手架了，畢竟搬磚也要自己總結(jié)一套最有效率的搬磚方法。

本人目前使用較多的是react方面的技術(shù)棧，react官方推薦使用的是create-react-app,本文不做過多講解。該腳手架將webpack隱藏了起來，使用者不必去關(guān)注具體的webpack實(shí)現(xiàn)細(xì)節(jié)，而是操作相關(guān)的腳本即可。(當(dāng)然，作為一名優(yōu)秀的程序員，就算沒有直接接觸webpack，你也需要去官網(wǎng)看看create-react-app相關(guān)的文檔)

此腳手架是基于create-react-app搭建了基于react+redux的腳手架，加上了基于koa2(也有express版本)實(shí)現(xiàn)的靜態(tài)服務(wù)器，并且配置了pm2的自動化部署。
項(xiàng)目目錄如下：

create-app-starter
├── README.md
├── node_modules
├── package.json
├── ecosystem.json  //pm2配置文件
├── .gitignore
├── public
│   └── favicon.ico
│   └── index.html
│   └── manifest.json
├── src
|   └── components #表現(xiàn)層組件
|   |   └── Loading
|   |       ├── index.js
|   |       └── index.scss
|   |   └── Dialog
|   └── containers #最外層的容器層，主要是provider包裹，傳遞store樹
|   └── layout  #主要是整個(gè)容器樣式進(jìn)行初始化，在這可以添加nav,header,footer等無狀態(tài)組件
|   └── routes   #路由層，主要通過路由來劃分不同的組件
|   |   └── index.js  #路由的設(shè)置，推薦使用react-router
|   |   └── Home
|   |       ├── components # 容器型組件
|   |       ├── containers # 主要是使用connect 連接組件
|   |       ├── modules #定義action，并且執(zhí)行reducers
|   |       └── index.js #結(jié)合webpack，根據(jù)路由做按需加載的操作 
|   └── store
|   |   ├── createStore.js  #創(chuàng)建store,添加一些middlewares
|   |   ├── location.js
|   |   └── reducers.js  //封裝reducer，結(jié)合combineReducer  
|   ├── styles 
|   ├── registerServiceWorker.js  #create-react-app自帶的servicework
|   └── index.js #入口文件
└── server #靜態(tài)服務(wù)器

關(guān)于腳手架具體的說明，請各位去我的github上查看

下面開始介紹一下koa2搭建靜態(tài)服務(wù)器。我們需要啟動我們的客戶端，靜態(tài)服務(wù)器，無非就是讀取靜態(tài)資源，koa2的最大特點(diǎn)就是使用async/await來實(shí)現(xiàn)異步。

#安裝
npm install koa

#安裝koa2相關(guān)的中間件
npm install koa-static koa-morgan --save

代碼如下：

app.js

const Koa = require('koa')
const morgan = require('koa-morgan')
const path = require('path');
const static = require('koa-static')
const fs = require('fs')

const app = new Koa();

// logger
app.use(morgan(':remote-addr - :remote-user [:date[clf]] ":method :url HTTP/:http-version" :status :res[content-length] :response-time ms'));

// static assets
app.use(static(path.resolve(__dirname, '..', 'build')));

//異步讀取文件的形式
app.use(async (ctx,next) =>{
    ctx.type = 'html';
    ctx.body = await fs.createReadStream(path.resolve(__dirname, '..', 'build', 'index.html'));

})


module.exports = app;

index.js

'use strict';

const app = require('./app');

const PORT = process.env.PORT || 9000;

app.listen(PORT, () => {
  console.log(`App listening on port ${PORT}!`);
});

此時(shí)運(yùn)行

node server

即可，當(dāng)然也可以自定義端口

PORT=8000 node server

既然實(shí)現(xiàn)了靜態(tài)服務(wù)器，當(dāng)我們需要自己部署項(xiàng)目時(shí)，怎么去通過服務(wù)器部署自己的項(xiàng)目呢。

當(dāng)然部署到服務(wù)器的方法有很多。僅僅node而言，pm2,forever等，甚至anywhere這樣的，也能成功?；蛘叽直┑陌颜麄€(gè)項(xiàng)目cp到服務(wù)器上，再運(yùn)行，都能訪問。本文不討論何種方法好。

當(dāng)你的項(xiàng)目每次都要改動時(shí)，本地改完，push到倉庫內(nèi)，再從服務(wù)器pull下來，重新build，再采用如上的各種方法。這樣無形之中就加大了時(shí)間成本，因而我的解決方法時(shí)采用pm2的自動化部署方法，來實(shí)現(xiàn)本地一鍵部署到服務(wù)器。

關(guān)于pm2的其他功能，本文不做相信處理，可以查看pm2官方文檔。

實(shí)現(xiàn)一鍵部署，我們需要做如下操作：

1. 本地跟服務(wù)器都需要安裝node,git,pm2

npm install pm2 -g

2. 配置SSH

   1. 在Github上添加Deploy Keys

   ssh-keygen -t rsa
   cat ~/.ssh/id_rsa.pub
   

   然后復(fù)制內(nèi)容，添加到Github上對應(yīng)的項(xiàng)目倉庫Settings下的Deploy keys中
   2.將 .pub 文件復(fù)制到服務(wù)器的 .ssh 目錄， 并 cat

    # 將本地key添加到服務(wù)器的authorized_keys中
   id_dsa.pub >> ~/.ssh/authorized_keys
   

   3. 本地自動登錄到服務(wù)器,避免每次都輸入密碼

   # name 是你的服務(wù)器用戶名 server 是你服務(wù)器的地址
   
   ssh-copy-id name@serer
   

3. 配置pm2

   1. 在服務(wù)器根目錄下創(chuàng)建/www/website

   sudo mkdir /www
   cd /www
   sudo mkdir website
   #修改權(quán)限,先切換到www
   
   sudo chmod 777 website
   

   2. 下面是腳手架的ecosystem.json

   {
   "apps":{
       "name":"**",
       "script":"/server/index.js",
       "env":{
           "COMMON_VARIABLE":"true"
       },
       "env_production":{
           "NODE_ENV":"production"
       }
   },
   "deploy":{
       "production":{
           "user":"***", //服務(wù)器名稱
           "host":["192.168.2.31"], //服務(wù)器ip
           "ref":"origin/master",
           "repo":"",
           "path":"/www/website/production", //項(xiàng)目目錄
           "ssh_options":"StrictHostKeyChecking=no",
           "post-deploy":"npm install && npm run build && pm2 startOrRestart ecosystem.json --env production",
           "env":{
               "NODE_ENV":"production"
               }
           }
       }
   }
   

   3. 再服務(wù)器根目錄編輯bash腳本，允許pm2腳本執(zhí)行

   vi .bashrc
   

   注釋掉

   #CASE
   # ...
   

   再

   source .bashrc
   

   4. 執(zhí)行

   pm2 deploy ecosystem.json production setup
   

   此時(shí)會在服務(wù)器 /www/website/production新建三個(gè)目錄

   5. 發(fā)布

   pm2 deploy ecosystem.json production
   

   不出意外，即發(fā)布成功。

按照上述步驟操作，就可以實(shí)現(xiàn)利用pm2本地部署項(xiàng)目到服務(wù)器，這樣就省掉了登入服務(wù)器取更新代碼的步驟了。

當(dāng)然，pm2還結(jié)合Nginx一同服務(wù)，具體的Nginx配置，請參考我另外一篇文章《學(xué)習(xí)Nginx配置》