注：服務器為CentOS 7.3.1611，使用Xshell6 + Xftp6工具完成服務器遠程操作

一、安裝Node環(huán)境

通過Xshell連接服務器成功之后就可以開始以下工作

1.清理工作

如果之前有安裝過nodejs，用自帶的包管理命名先刪除一次

yum remove nodejs npm -y 


    

        1
    

然后手動進入以下目錄刪除相關文件
進入 /usr/local/lib 刪除所有 node 和 node_modules文件夾
進入 /usr/local/include 刪除所有 node 和 node_modules 文件夾
進入 /usr/local/bin 刪除 node 的可執(zhí)行文件

2.去官網復制node安裝包鏈接

https://nodejs.org/en/download/

3.在Xshell里cd到安裝目錄

cd /usr/local/ 


    

        1
    

4.輸入命令鏈接開始下載nodejs安裝包

wget https://nodejs.org/dist/v10.16.0/node-v10.16.0-linux-x64.tar.xz 


    

        1
    

5.輸入命令兩步解壓

xz -d node-v10.16.0-linux-x64.tar.xz
tar -xvf node-v10.16.0-linux-x64.tar 


    

        1
    

    

        2
    

6.重名解壓的文件夾名稱為nodejs

mv node-v10.16.0-linux-x64 nodejs 


    

        1
    

7.進入解壓目錄

cd nodejs 


    

        1
    

8.創(chuàng)建軟連接

ln -s /usr/local/nodejs/bin/node /usr/local/bin/node
ln -s /usr/local/nodejs/bin/npm /usr/local/bin/npm 


    

        1
    

    

        2
    

如果不小心輸錯了路徑，重新創(chuàng)建會提示：‘ln: 無法創(chuàng)建符號鏈接"/usr/local/bin/npm": 文件已存在’，輸入rm /usr/local/bin/npm命令清除后可以重新創(chuàng)建

9.測試

node -v
npm -v 


    

        1
    

    

        2
    

10.安裝cnpm淘寶鏡像并創(chuàng)建軟鏈接

npm install -g cnpm
ln -s /usr/local/nodejs/bin/cnpm /usr/local/bin/cnpm 


    

        1
    

    

        2
    

二、用Express搭建web服務

1.在Xshell里cd到指定目錄

cd /var/www/ 


    

        1
    

注：如果沒有www目錄就在var目錄下輸入命令mkdir www手動創(chuàng)建一個，并進入到www目錄

2.創(chuàng)建web服務項目文件夾

mkdir demo 


    

        1
    

3.cd進入項目目錄

cd demo 


    

        1
    

4.初始化項目生成package.json

npm init -y 


    

        1
    

注：這里的-y意思是省略創(chuàng)建過程中一直輸yes的步驟

5.安裝express

cnpm i express -D 


    

        1
    

6.創(chuàng)建web服務程序文件app.js

mkdir app.js 


    

        1
    

7.編寫web服務程序代碼app.js

const fs = require('fs'); //文件模塊 const path = require('path'); //路徑模塊 const express = require('express'); //express框架模塊 const app = express(); const hostName = '11.22.33.44'; //ip const port = 9999; //端口 app.use(express.static(path.resolve(__dirname, './dist'))); // 設置靜態(tài)項目訪問路徑(此處的dist為webpack打包生成的項目文件夾名稱) app.get('*', function(req, res) { const html = fs.readFileSync(path.resolve(__dirname, './dist/index.html'), 'utf-8'); // 設置所有訪問服務請求默認返回index.html文件 res.send(html); }); app.listen(port, hostName, function() { console.log(`服務器運行在http://${hostName}:${port}`); }); 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

三、打包部署vue項目

1.在本地開發(fā)工具里打包需要部署的vue項目

npm run build 


    

        1
    

生成的dist文件夾就是我們需要部署到服務器上的項目

2.把dist文件夾通過Xftp工具復制到服務器的var/www/demo目錄下

四、啟動web服務

1.在Xshell里cd到var/www/demo目錄，輸入以下命令啟動web服務程序

node app.js 


    

        1
    

如果能正常訪問項目地址表示已經搭建成功。

請求后端接口跨域方案請見：
跨域代理方案1：Nginx使用教程
跨域代理方案2：Nodejs 中使用http-proxy-middleware實現(xiàn)代理跨域

2.安裝PM2托管Node Web服務程序

在xshell里用node默認的啟動方式有一個缺點，xshell退出后nodejs項目便會停止
使用pm2這個托管工具可以很好的解決這個問題，而且當代碼有更改時會自動重啟服務更新

1.首先多按兩次ctrl +c結束之前的運行程序，接著輸入下面的命令安裝pm2并創(chuàng)建軟鏈接

cnpm install pm2 -g
ln -s /usr/local/nodejs/bin/pm2 /usr/local/bin/pm2 


    

        1
    

    

        2
    

2.然后輸入下面的命令啟動托管任務，abc為托管項目定義的名稱

pm2 start app.js --name abc 


    

        1
    

以下為pm2常用命令說明

pm2基本功能命令

pm2使用教程參考鏈接：
https://www.cnblogs.com/chyingp/p/pm2-documentation.html
https://www.jb51.net/article/113398.htm

轉自：csdn。作者：lihefei_coder

藍藍設計( m.0391cbd.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務