一次先後端分離項目部署實踐

一次先後端分離項目部署實踐

警報：本文純新手向，大牛請出門右轉，或者輕噴 😄

前一陣子在阿里雲上弄來了一個月的輕量應用服務器，尷尬的是，好不容易把備案搞完，服務器這會又到期了。。。因而此次買了一個學生版一年的 ECS ，在通過相同的配置工做後，終於能夠開始真正進行項目部署了。

待部署項目介紹

簡單說來待部署的項目就是一個 todolist ，項目內容和邏輯很簡單，可是由於是個人第一個先後端獨立完成的項目，因此開發起來仍是有點費勁的，項目前端採用的是 Vue + Element 框架，後端採用的 Koa2，數據庫使用的是 mongodb，能夠說是對前端學習者來講相對友好的技術棧了。

附上項目倉庫 vue-koa-demo（喜歡就去點個 star 哈哈哈）

關於跨域

在項目開發過程時，前端運行在 localhost:8080，後端運行在 localhost:5858 ，這就存在跨域問題，通常來講跨域有兩種解決方案，一個是在服務器端加上跨域資源共享（CORS）的請求頭，另外一個就是經過 webpack-dev-server 提供的代理來幫咱們作映射，這樣就能夠把跨域請求映射爲同域請求了。在項目中我採用的是第二種方案，由於這種方案很是簡單，只須要對 webpack-dev-server 的配置進行幾行改動便可完成目標（可是開發時發現這個方法有的時候會不太穩定 -_-||）。

這段代碼的意思就是把 axios 原來的請求相對路徑 http://localhost:8080/api 映射到服務器端的 http://localhost:5858

部署方案

因爲咱們是採用的 webpack-dev-server 配置的方式解決的跨域問題，可是在生產環境下就沒有 webpack 爲咱們作這一層映射了，因此在生產環境中，咱們須要用 Koa 來託管由 webpack 打包出來的靜態資源，這樣前端 axios 請求的相對路徑就和服務器是同域的了，不存在跨域的問題了。

託管靜態文件，可使用 koa-static 完成，其中 public 中的內容就是 webpack 打包出來的 dist 文件夾下的內容。

// app.js
app.use(require('koa-static')(path.join(__dirname, 'public')))

服務器端部署環境

接下來就要弄一下服務器端的部署環境了，在以前的博客裏，已經把 Node 環境配置完成了，接下來就要安裝一下一些必要的工具了，完成部署環境了（額此次並無用到 Docker 什麼的，由於是第一次試探性地，之後能夠詳細學習一下）。

mongodb 數據庫的安裝與簡單配置

關於 CentOS 下數據庫的安裝，參考官網流程就好了，我感受說的很詳細了，安裝的時候也沒啥坑。

安裝成功後，啓動數據庫 sudo service mongod start ，默認狀況下 mongodb 是不須要輸入用戶名密碼的，因此在終端下，鏈接數據庫 mongo ，鏈接成功後，咱們就須要創建一些用戶角色了

1.創建一個用於帳號管理的用戶

use admin                // 切換到 admin 數據庫
db.createUser({        // 建立一個用戶
    user: 'yourUserName',        // 管理員用戶名
    pwd: 'yourPassWord',        // 密碼
    roles: [
        {
            role: 'userAdminAnyDatabase',    // 用戶角色，容許全部數據庫的 userAdmin 權限，可管理全部數據庫的管理用戶
            db: 'admin'            // 指定數據庫
        }
    ]
})
db.auth('yourUserName', 'yourPassWord')    // 用戶驗證，返回 1 說明驗證成功

2.創建一個用於項目數據庫管理的用戶

use vue_koa_todos        // 切換到項目數據庫
db.createUser({
    user: 'yourProjectUserName',    // 數據庫管理員用戶名
    pwd: 'yourProjectPassWord',        // 密碼
    roles: [
        {
            role: 'readWrite',        // 用戶角色，容許讀寫指定數據庫
            db: 'vue_koa_todos'        // 指定數據庫
        }
    ]
})
db.auth('yourProjectUserName', 'yourProjectPassWord')    // 用戶驗證，返回 1 說明驗證成功

建議把這些帳號密碼都存起來，省着忘了。。。

創建帳號以後還沒完，須要更改一下配置文件，默認狀況下，配置文件在 /etc/mongod.conf ，以後在 vi 編輯器下修改配置文件，找到這兩行，改爲以下所示，保存並退出後，重啓一下數據庫 sudo service mongod restart，數據庫的驗證就開啓了，這時候若是要查看或者操做數據庫，就須要輸入用戶名和密碼了。

security:
    authorization: 'enabled'

1.在登陸數據庫的時候，須要先指定數據庫名好比 use vue_koa_todos ，再進行 db.auth 驗證

2.用 admin 下創建的那個用戶是登不上 vue_koa_todos 數據庫的，別看它的角色是 anydatabase ，它只能操做數據庫的用戶管理部分

安裝一些其餘的工具（本地和服務器端都須要安裝）

git : yum install -y git

pm2: npm install pm2 -g

這裏服務器端須要配置一下對 github 的 ssh 祕鑰，便於部署後自動拉取代碼

對本地代碼進行調整

1.部署前須要把以前鏈接本地數據庫的代碼改一下

// server/routes/index.js
// 本地開發的時候，數據庫連接是直接連的
mongoose.connect('mongodb://127.0.0.1:27017/vue_koa_todos')

// 上線後由於有用戶名和密碼，因此要改動一下
mongoose.connect('mongodb://username:userpwd@127.0.0.1:27017/vue_koa_todos')

數據庫鏈接格式：

mongodb://用戶名:密碼@服務器主機地址:mongodb運行端口/要鏈接的數據庫名稱

2.項目 package.json 文件中的 git 字段要和 github 中的 git 地址關聯上

到這裏咱們的環境已經基本搞定了，接下來就是部署了。

利用 pm2 進行一鍵部署

打開終端進入項目根路徑，執行 pm2 init 會獲得一份 ecosystem.config.js 這裏就是咱們的部署配置文件了，須要作一些改動

post-deploy 中是發佈後執行的一些命令，主要在 run.sh 裏

1.爲了不由於服務器端登陸密碼驗證而致使部署失敗，建議配置一下 ssh 登陸，或者在 production 中加入 "ssh_options": "StrictHostKeyChecking=no"

2.post-deploy 中的 git pull 實際上是能夠不用加的，可是我在實際操做時候，發現不加的話，本地每次更新代碼的時候，服務器端並不會自動拉去新的代碼，在網上查了一下說是和版本有關也和服務器有關。。。因此這裏只能強加一個 git pull 命令，保證更新了

3.使用淘寶鏡像安裝是由於項目中用到了 node-sass 依賴，若是不用的話會偶爾出現部署失敗的狀況

配置文件改好後，咱們在本地終端執行命令 pm2 deploy ecosystem.config.js production setup 進行項目初始化

執行後，若是成功的話會發現服務器端的指定目錄下 /home/breezymelon/vue-koa-demo 多出了幾個文件夾，其中 source 文件目錄下就是咱們的源代碼了，服務器自動去 github 拉取的結果。

以後再執行發佈命令 pm2 deploy ecosystem.config.js production 就能夠等待部署了。

當咱們在本地對代碼有新的 push 後，再次執行 pm2 deploy ecosystem.config.js production 便可完成部署更新。

在服務器上執行 pm2 list 能夠觀察到項目已經正常運行了！若是不能正常運行的話 pm2 log 查看一下日誌信息，通常都是數據庫鏈接錯了，不會出現什麼大問題。

配置 Nginx 實現網頁訪問

sudo vi /etc/nginx/conf.d 新建一個以下的配置文件

保存退出後 sudo nginx -t && sudo service nginx restart

就能夠在瀏覽器看見本身的項目了！

總結

從本地開發先後端，到買服務器域名備案再到配置環境最後到部署，大概歷時一個月了，終於看見徹底由本身搞的第一個上線的項目了。雖然項目很簡單，並且上線的配置也很初級，更不用說優化了，可是對於一個新手來講來講有了這份體驗仍是很不錯的~學習的路還很長，此次實踐也意識到了一個項目從無到有須要的掌握的知識真的不少，也體驗到了做爲學生來講切實可行的學習路線應該是首先作到對前端的專一，以後再慢慢一點一點積累服務端知識吧。不慌慢慢學，心急一事無成。

這篇文章到這就結束啦，我感受說的挺詳（mo）細（ji）的了，若是對和我同樣的新手玩家有所幫助的話就最好不過了！！！

最後附上原文連接吧~