該專案通過node+vue純前端開發，首次嘗試，伺服器系統為：centOs7

部署專案的伺服器是一個全新的雲伺服器，該伺服器上沒有MySQL，wget，vim，node，pm2等工具，因此在部署專案之前先把這些工具下載安裝好。

在安裝之前可以根據自己的需要更改使用者名稱，操作方法如下：

[root@user ~]# vi /etc/hostname

編輯內容為自己需要修改的名稱。

1.安裝wget root目錄下 用時5分鐘

[root@user ~]# yum -y install wget 

依次執行以上步驟，成功安裝wget.

2. 安裝vim root目錄下 用時5分鐘

[root@user ~]# yum -y install vim* 下載vim所需要的所有包
[root@user ~]# rpm -qa | grep vim 檢視一下你本機已經存在的包，有以下安裝包時表示已經正確安裝

設定vim編輯環境：
在使用者登入的~目錄下建立一個 .vimrc檔案，在其中進行自己習慣的程式設計環境的設定，這樣當別的使用者使用時並不相互影響。

[root@user ~]# cd ~
[root@user ~]# touch .vimrc
[root@user ~]# vim .vimrc

在檔案中輸入：

set nu         // 這是設定顯示行號
 

set showmode   //設定在命令列介面最下面顯示當前模式等。
set ruler     // 在右下角顯示游標所在的行數等資訊
set autoindent   // 設定每次單擊Enter鍵後，游標移動到下一行時與上一行的起始字元對齊
syntax on    // 即設定語法檢測，當編輯C或者Shell指令碼時，關鍵字會用特殊顏色顯示
.........

內容輸入完畢後按Esc按鈕退出編輯，再按:wq儲存編輯並退出。

3. 安裝node root目錄下 用時5分鐘

[root@user ~]# wget https://nodejs.org/dist/v8.11.3/node-v8.11.3-linux-x64.tar.xz
 

解壓剛剛下載的安裝包（注意版本號是否與上一行命令一直）：

[root@user ~]# tar xvf node-v8.11.3-linux-x64.tar.xz

建立軟連結，使node和npm命令全域性有效。
通過建立軟連結的方法，使得在任意目錄下都可以直接使用node和npm命令：
（注意版本號與自己所下載的版本號一致）

[root@user ~]# ln -s /root/node-v8.11.3-linux-x64/bin/node /usr/local/bin/node
[root@user ~]# ln -s /root/node-v8.11.3-linux-x64/bin/npm /usr/local/bin/npm

檢視版本號，當輸出版本號的結果後證明安裝成功。

[root@user ~]# node -v
[root@user ~]# npm -v

依次執行以上步驟，成功安裝node環境。
預設安裝在/root/node-v8.11.3-linux-x64/目錄下。

4. 安裝mysql 根目錄下 下載用時20分鐘，配置用時5分鐘

使用者名稱(自定義)：root
密碼(自定義)：123456

(1)先檢查系統是否裝有mysql

[root@user /]# rpm -qa | grep mysql

下面執行的yum install mysql安裝命令是無效的，因為centos-7預設是Mariadb，所以執行以下命令只是更新Mariadb資料庫

[root@user /]# yum install mysql

刪除可用，如果之前安裝過mysql，需要先將mysql刪除

[root@user /]# yum remove mysql

(2)下載mysql的repo源

[root@user /]# wget http://repo.mysql.com/mysql57-community-release-el7-10.noarch.rpm

安裝rpm包

[root@user /]# sudo rpm -Uvh mysql57-community-release-el7-10.noarch.rpm

(3)安裝mysql

[root@user /]# yum install -y mysql-community-server

(4)啟動mysql

[root@user /]# service mysqld start

(5)重置密碼
獲取臨時密碼

[root@user /]# grep 'temporary password' /var/log/mysqld.log

複製[email protected]:後面的密碼
登入

[root@user /]# mysql -u root -p

貼上剛才的密碼
登陸成功，修改密碼

[[email protected] /]# ALTER USER 'root'@'localhost' IDENTIFIED BY 'new-password';

若報錯1819，進行如下操作, 再進行修改：
(報錯原因為密碼太簡單，一下修改mysql對密碼的限制)

mysql> set global validate_password_policy=0;
mysql> set global validate_password_length=1;

允許遠端登入：

mysql> GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' IDENTIFIED BY 'yourpassword' WITH GRANT OPTION;

(6)查詢資料庫編碼格式

mysql> show variables like "%char%";

修改mysql的/etc/my.cnf 檔案中的字符集鍵值、及最大連線和最大併發
在[mysqld]欄位里加入character_set_server=utf8mb4（應資料處理系統要求），如下：

[mysqld]   
character_set_server=utf8mb4
#修改字符集屬性
collation-server = utf8mb4_unicode_ci
#修改排序規則屬性
max_connections=300
#設定最大連線和最大併發，預設為100

再次查詢資料庫編碼格式，確保是 utf8mb4，如果結果未改變，則執行以下步驟重啟mysql後再次查詢。

(7)重啟mysql

[root@user /]# service mysqld restart

(8)關閉防火牆

[root@user /]# firewall-cmd --state    //檢視防火牆狀態
[root@user /]# systemctl stop firewalld.service    //停止firewall
[root@user /]# systemctl disable firewalld.service    //禁止firewall開機啟動

(9)本地連線資料庫
本地使用的是 Navicat for MySQL軟體
在以下選項中依次填入資訊，連線即可：

總結操作方法：

#檢視mysql是否已啟動：
[root@user /]#  service mysqld status
#關閉mysql： 
[root@user /]#  service mysqld stop
#重啟mysql：
[root@user /]#  /etc/init.d/mysql restart
#檢視預設埠號：
mysql> show global variables like 'port';
#檢視資料庫，表，欄位的編碼格式：
mysql> SHOW FULL COLUMNS FROM tbl_name;
mysql> SHOW CREATE TABLE tbl_name;
mysql> SHOW CREATE DATABASE db_name;

輸出資訊參考如下：

其中要求字符集格式如下：
CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci

修改資料庫字符集格式：
（1）通過mysql for navicat修改，只能臨時有效
（2）在配置檔案my.cnf中修改，然後重啟mysql，此方法長期有效(參考mysql安裝步驟6)

報錯總結：
（1）node啟動報錯，原因與Mysql有關
Error: ER_BAD_FIELD_ERROR: Unknown column ‘location’ in ‘field list’
在node專案部署完成後，啟動node專案時，有時會報錯以上錯誤。
報錯原因：這個錯誤是說表中的這個欄位不存在。
這時需要檢查的有：資料庫中對應的表和欄位是否存在，
還需要檢查下表中的資料型別設定或者字元編碼格式是否有問題。

5. 上傳檔案 下載軟體，上傳檔案，修改配置，總計耗時1小時

npm run build

等待命令執行結束後，會發現根目錄下多了 dist 資料夾，這個資料夾就是我們等下要放到伺服器中的。
（2）檔案傳輸
–下載檔案傳輸工具 Xftp–網上暫未下載成功，使用百度管家下載收費版暫時使用
–開啟 Xftp 新建連線，類似Xshell，選項中勾選 “使用UTF-8編碼(E)”

連線成功後可以看到左側是本地檔案目錄，右側是伺服器檔案目錄，可以很方便的來回拖放檔案。

在伺服器端的檔案目錄執行以下操作：
–.建立目錄檔案 /root/projec/project_name (目錄層級、名稱隨意，這裡我以此為專案目錄)
–.將剛剛的 dist 資料夾複製到 /root/project/project_name 目錄下，前端資源就OK了
–.將 server 資料夾也複製到 /root/project/project_name 目錄下

（3）專案初始化
通過Moba連線伺服器：

// 進入專案目錄
[[email protected] /]# cd /root/project/project_name
[[email protected] project_name]# ls
dist server

初始化建立 package.json，這一步也可以在本地建立編輯好後上傳到伺服器目錄即可

[root@user project_name]# npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
// 以下資訊選項全部回車即可
package name: (project_name) 
version: (1.0.0) 
description: 
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: 
license: (ISC) 
About to write to /root/project/test/myblog/package.json:
{
  "name": "project_name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}
Is this ok? (yes) yes
// 全部回車即可
[root@user project_name]# ls
dist  package.json  server

// 開啟 package.json 編輯（也可在 Xftp 中右鍵檔案編輯）
[root@user project_name]# vim package.json
    {
        "name": "project_name",
        "version": "1.0.0",
        "description": "A Vue.js project",
        "author": "ChenLiang <236338364@qq.com>",
        "private": true,
        "scripts": {
            "dev": "node build/dev-server.js",
            "start": "node build/dev-server.js",
            "build": "node build/build.js"
        },
        "dependencies": {
            "body-parser": "^1.17.2",
            ......//你專案中所需要的依賴包
        },
        "engines": {
            "node": ">= 4.0.0",
            "npm": ">= 3.0.0"
        },
        "browserslist": [
            "> 1%",
            "last 2 versions",
            "not ie <= 8"
        ]
    }

儲存退出，（Esc + :wq）

安裝”dependencies”中專案執行需要的所有依賴

[root@user project_name]# npm install

（4）修改資源路徑
進入資料夾 server，開啟 index.js，需要修改的大概有三處，用‘’—-‘’標出

[[email protected] server]# vim index.js

const routerApi = require('./router');
const path = require('path');  //----檔案中如果沒有則新增的
const bodyParser = require('body-parser');
const express = require('express');
const app = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}));

// 部署上線時讀取靜態檔案----檔案需要修改新增的
app.use(express.static(path.join(__dirname, '../dist')));

// 後端api路由
app.use('/api', routerApi);

// 監聽埠----檔案中需要修改的
app.listen(80);
console.log('success listen at port:80......');

設定靜態資源路徑，並修改監聽埠為80（HTTP埠），
api.js 中檔案路徑相關的也要更改為 ../dist/static…..，
嫌麻煩的也可以直接將 server 資料夾移到 dist 下就不用這麼麻煩改了。

此處之後與參考連結有點不同，因為用的是公司的雲伺服器，
所以當之前的步驟執行完以後，便已經將專案配置完成，直接執行啟動服務步驟。

（5）啟動服務：

[root@user  server]# node index.js
success listen at port:80......

瀏覽器開啟 伺服器IP:80（如：263.182.35.68:80），如無意外，即正常執行訪問啦。

6. 安裝pm2 啟動專案，關閉Moba後仍可訪問

pm2 是一個帶有負載均衡功能的Node應用的程序管理器。
上面我們以 node index.js 啟動了專案，
當我們退出 Moba / Xshell 時，程序就會關閉，無法在訪問到專案，
而 pm2 就是解決這種問題的，以 pm2 啟動專案後，退出 Xshell 後依然可以正常訪問。

（1）安裝 pm2

[root@user ~]# npm install -g pm2
// 以 -g 全域性安裝的外掛都在 node 安裝目錄 bin 檔案下

//cd切換到node的bin目錄下
[root@user bin]# ls
cnpm  node  npm  npx  pm2  pm2-dev  pm2-docker  pm2-runtime

（2）bin 下都是命令語句，為了可以在任何目錄都可以使用命令，我們將此資料夾加入環境變數

[[email protected] ~]# echo $PAT
//檢視環境變數 

[[email protected] ~]# vim /etc/profile
//編輯永久新增環境變數（影響所有使用者）

#在文件最後，新增：（版本號根據自己的修改）
# node
export NODE_HOME=/root/node-v8.11.3-linux-x64
export PATH=$PATH:$NODE_HOME/bin

儲存退出（Esc + :wq）
執行：

[root@user ~]# source /etc/profile

（3）pm2 啟動專案

[[email protected] ~]# cd /root/project/project_name/server
// 切換目錄
[[email protected] server]# pm2 start index.js
// 啟動程序
[[email protected] server]# pm2 stop index.js
// 停止程序
[[email protected] server]# pm2 list
// 檢視程序