<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          Linux CentOS + Nodejs + Express部署vue項目

          2021-5-8    前端達人

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

          一、安裝Node環境

          通過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 的可執行文件

          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.創建軟連接

          ln -s /usr/local/nodejs/bin/node /usr/local/bin/node
          ln -s /usr/local/nodejs/bin/npm /usr/local/bin/npm 
          
          • 1
          • 2

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

          9.測試

          node -v
          npm -v 
          
          • 1
          • 2

          10.安裝cnpm淘寶鏡像并創建軟鏈接

          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手動創建一個,并進入到www目錄

          2.創建web服務項目文件夾

          mkdir demo 
          
          • 1

          3.cd進入項目目錄

          cd demo 
          
          • 1

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

          npm init -y 
          
          • 1

          注:這里的-y意思是省略創建過程中一直輸yes的步驟

          5.安裝express

          cnpm i express -D 
          
          • 1

          6.創建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'))); // 設置靜態項目訪問路徑(此處的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.在本地開發工具里打包需要部署的vue項目

          npm run build 
          
          • 1

          生成的dist文件夾就是我們需要部署到服務器上的項目
          在這里插入圖片描述

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

          11160623264.png)

          四、啟動web服務

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

          node app.js 
          
          • 1

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

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

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

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

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

          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 start app.js --name abc 啟動(--name為定義任務名稱的指令,abc為任務名稱值)
          pm2 start app.js --watch 啟動( --watch為監聽應用目錄的變化的指令)
          pm2 restart app.js 重啟任務
          pm2 stop abc 結束(abc為任務名稱或id)
          pm2 list 查看所有任務列表

          pm2基本功能命令

          功能 命令
          啟動進程/應用 pm2 start bin/abc 或 pm2 start app.js
          重命名進程/應用 pm2 start app.js --name abc
          添加進程/應用 pm2 start bin/abc --watch
          結束進程/應用 pm2 stop abc
          結束所有進程/應用 pm2 stop all
          刪除進程/應用 pm2 delete abc
          刪除所有進程/應用 pm2 delete all
          列出所有進程/應用 pm2 list
          查看進程/應用詳情 pm2 show abc 或 pm2 describe abc
          查看進程/應用資源消耗 pm2 monit
          查看進程/應用日志 pm2 logs abc
          查看所有進程/應用日志 pm2 logs
          重新啟動進程/應用 pm2 restart abc
          重新啟動所有進程/應用 pm2 restart all

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



          轉自:csdn。作者:lihefei_coder



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



          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.syprn.cn

          存檔

          亚洲va欧美va天堂v国产综合