小白 學習 vue+nodejs+mongodb部署項目到阿裡雲

vue+nodejs+mongodb部署項目到阿裡雲

這是我畢設，想學下項目部署，然後搞了兩天，終于成功了哈哈，這個部署過程參考連結如下，寫的很好，我自己也做了一遍筆記，更詳細介紹了過程，跟着步驟就行，我也是第一次部署哈哈。

參考連結： https://segmentfault.com/a/1190000022921908

目錄

• vue+nodejs+mongodb部署項目到阿裡雲
• • 1.項目環境如下:
  • 2. 伺服器準備與配置
  • • 1.購買伺服器
    • 2.伺服器設定
    • 3.安裝寶塔面闆
    • 4.安裝項目需要的工具
  • 3.項目配置
  • • （1） Nginx配置
    • （2）前端打包上線
    • （3） 後端Node項目上線
    • （4）資料庫設定和導入

1.項目環境如下:

• 部署時間: 2021年4月20号
• 本地環境: windows 10
• 伺服器: 阿裡雲伺服器 ECS 型, CentOS 8.0; 主要使用寶塔面闆（這個是liunx可視化管理工具，很友善）, 内含 SSH 終端, 沒有使用 Xshell, Xftp
• 前端項目: Vue(v2.6) & Vue-Cli(v4.5)
• 後端項目: Node.js(v12.18.2，express架構)
• 資料庫： MongoDB

2. 伺服器準備與配置

1.購買伺服器

伺服器我用的是免費試用的，如果是學生，可以認證學生，購買學生優惠的，我也認證了，但是看到有免費試用，就白嫖一個月先哈哈哈哈，伺服器自己練習用就買最便宜的就好，如果不懂得可以百度一下吧，我就不說了哈。

試用連結（好像首次使用才有）：https://free.aliyun.com/?spm=5176.21103406.J_6174043250.2.58cd597cGSa6NA&accounttraceid=f7f0b408034941c0906a059f25d9b2acntvv

購買連結：https://www.aliyun.com/activity/new?spm=5176.12901015.1em2wirsb.d71.776e525cCmvyVF&scm=20140722.3873.4.3972

2.伺服器設定

（1）登入阿裡雲，選擇控制台->選擇雲服務 ESC ，就可以看到自己的伺服器了（如果看不到執行個體, 要在頁面左上角選擇區域, 選擇自己購買的區域 “華南1(深圳)” 就能看到了）

（2）點選執行個體，前往執行個體詳情，進行 密碼重置 和 配置安全組規則

說明： 重置密碼是為了等下遠端連接配接我們的伺服器， 配置安全組規則 為了開發端口， 這樣才能通路伺服器

（3） 點選 重置密碼， 輸入新密碼就好了，這裡要記住使用者名， 友善後面遠端連接配接用到

（4）設定安全規則， 點選配置安全組規則 —> 點選設定規則， 然後添加 80 端口和 8888 端口(這個是寶塔面闆預設的，先加上)， 再加上自己NodeJS監聽的端口就好了， 授權對象就 0.0.0.0/0 ，預設的

配置完重新開機執行個體，我記得我沒有重新開機也可以，大家重新開機一下吧。

（5）遠端連接配接

這裡直接選擇阿裡雲提供的遠端連接配接， 在執行個體那裡， 右邊有個遠端連接配接

1.阿裡雲自帶的遠端連接配接
2.Xshell等工具連接配接
3.fileZill連接配接可以發送檔案// 這些工具也可以連接配接
           

選擇workbench ->立即登入

連接配接需要 賬号和密碼，就是上面說的重置密碼那裡， 輸入密碼，連接配接成功就會進入linux 終端界面了

[外鍊圖檔轉存失敗,源站可能有防盜鍊機制,建議将圖檔儲存下來直接上傳

3.安裝寶塔面闆

（1）寶塔面闆是一款提升運維效率的伺服器管理軟體。于我們而言，作用就是在Linux伺服器上，可視化操作和管理網站。使用很友善，不需要自己一個個敲指令，喜歡敲指令操作的可以用指令操作哈

參考教程：https://zhuanlan.zhihu.com/p/149675843 （這個講的很詳細，針對centos）

https://www.bt.cn/bbs/thread-19376-1-1.html(其版本安裝指令這裡有)

1.寶塔預設端口8888 ,需要到伺服器安全組添加（我們上面已經添加了，是以這裡跳過）
2.centos 下載下傳位址： yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh （在剛才連接配接成功的linux終端，複制指令進入執行，等待下載下傳）
下載下傳提示y/n , 直接y , 完成後會有使用者名和密碼 和通路連結
 
這是我的通路位址，使用者名和密碼記起來，然後複制連結在浏覽器通路，就會進入登入寶塔界面了，如果下次重新登陸，忘記了密碼，可以遠端連接配接後， 輸入指令 bt default ，就會出來寶塔通路連結和 使用者名密碼了 
    
外網面闆位址: http://47.106.247.172:8888/d8577725
内網面闆位址: http://172.18.21.17:8888/d8577725
username: cajvpqx // 使用者名和密碼
password: 6c23ccd 
    
           

（2）安裝配置

剛進入會有推薦安裝，不要選擇極速安裝，選擇編譯安裝，我選擇了LNMP ， 安裝了 nginx 和 pure-ftpd ，mysql, 因為安裝有點慢，我沒安裝php, 現在也用不上

然後修改端口，寶塔預設端口 8888 ， 為了防止被暴力破解， 我們改個端口 ，我改成了 8899

修改了端口，需要在安全組添加， 直接點選寶塔 安全 -> 輸入放行端口 就好

4.安裝項目需要的工具

• pm2: 搜尋安裝 pm2（包含了node子產品）
• mongoDB: 搜尋安裝 mongoDB （搜尋出來隻有一個，直接安裝就好）

此時，伺服器基本已經好了，下面就是項目相關配置了。

3.項目配置

（1） Nginx配置

在軟體商店下面有已經下載下傳的軟體，軟體商店->選擇已安裝->選擇nginx-> 設定->配置修改

安裝下面配置自己的資訊，這裡配置是代理配置， 到時候前端 通路就會 代理成本地nodeJS的 接口

server
{
    listen 80; //預設http 端口, 需要在安全組規則中開放此端口， 也可以自己設定個端口， (80 端口用于: ECS 執行個體作為網站或 Web 應用伺服器)
    server_name ********;  //自己伺服器公網 IP
    index index.html index.htm index.php; // 預設index.html打開
    root  /www/wwwroot/dist; //項目所在檔案夾，到時候前端打包為dist，是以我這裡直接加上dist
    
   // #error_page   404   /404.html; 
    include enable-php.conf;
    
    location /api/  // 寫正确 /api/ ， /api開頭接口會代理
    {
        proxy_pass http://127.0.0.1:8886/; //node 服務的域名與端口 ，代理的node接口位址， 我監聽端口是 8886
    }
     error_page 404 /404.html;
        location = /40x.html { // 錯誤網頁配置
    }

    error_page 500 502 503 504 /50x.html;
        location = /50x.html { // 錯誤網頁配置
    }
}
//在 wwwroot/dist下放入 index.html, 通過 ********公網ip(:80 端口可不輸入) 即可通路到該頁面
           

//啟動 nginx， 這是常用指令， 我們需要用指令去啟動，預設已經啟動，我們這裡也是界面化啟動哈哈，了解一下指令就好
nginx -t 測試nginx文法是否有誤
nginx 啟動nginx
nginx -s reload 重新開機nginx，修改nginx.conf後記得重新開機
其他指令

ps -ef | grep nginx 顯示nginx程序
nginx -s stop 停止nginx
nginx -v 檢視nginx版本
           

（2）前端打包上線

- 打包

• 在 vue.config.js 中配置路徑, 以免找不到資源

  module.exports = {
    // 自動打開
    outputDir: 'dist', // 打封包件夾
    assetsDir: 'static', // 靜态資源目錄
    publicPath: process.env.NODE_ENV === 'production' ? './' : '/', // 設定index.html檔案路徑,網上說要設定這個，但是我打包出來還是/開頭
    devServer: { // 開發階段的代理
      proxy: 'http://localhost:8886', // 我是全部代理了
      port: '8088',
      open: true,
      overlay: {
        warnings: false,
        errors: true
      }
    },
    
             

• 在 router/index.js 中改 mode 為 “hash”， 如果是history，還需要結合後端配置，官網也有說，可以自己百度一下，我是hash
• 更改 axios baseURL, 例如 axios.defaults.baseURL = “http://localhost:8886”, 将其中的 localhost:8886 改為雲伺服器公網 IP, 并在後面加上 /api (與上面 Nginx 配置 location 處一緻)

  const service = axios.create({
    baseURL: 'http://47.106.247.172:80/api/' // 配置代理了不用設定這個url了,端口預設80
    //baseURl: process.env.NODE_ENV === 'production' ? 'http://47.106.247.172:80/api/': ''
  })
  
             

• 執行 npm run build 指令打包 , 打包出來的我們直接打開 dist檔案下 index.html 是加載不到資源的，不用擔心，部署在伺服器就可以了
• 上傳至伺服器
  • 在寶塔面闆中, 點選: “檔案” > 進入 /www/wwwroot /dist檔案夾 > 将 dist 檔案夾壓縮後上傳

    

  • 在浏覽器中通路公網 IP, 即可看到自己的前端頁面，但是請求還不行哦，因為後端還沒配置呢

（3） 後端Node項目上線

• 在寶塔面闆中, 點選: “檔案” > 進入 /www/wwwroot/dist 檔案夾 > 建立檔案夾 server > 将 node 檔案上傳至該檔案夾
• 在寶塔面闆中的 “安全” 界面下, 放行 node 服務端口, 如本項目使用的 8886
• 在寶塔面闆中的 “軟體商店” 界面下, 進行相關配置

  • pm2 配置 => 點選: “設定” >

    "Node 版本": 切換至本地開發時的版本 v12.18.2（在自己電腦 cdm 指令輸入 node -v ，檢視自己版本）

    "子產品管理": 安裝使用的依賴 mongoose ,express等等第三方子產品，會安裝到/www/server/nvm/versions/node/v12.18.2/lib/node_modules/,

- node 檔案引入注意事項

- 如果使用了第三方子產品, 檔案中引入時不能直接寫子產品名稱, 需要加上 /www/server/nvm/versions/node/v12.18.2/lib/node_modules/, 以 mongoose 為例, 就是 const mongoose = require('/www/server/nvm/versions/node/v12.18.2/lib/node_modules/mongoose')
           

// 比如我的app.js
      const { varifyToken, errorToken } = require('./utils/ejwt/checkToken');
      const createToken = require('./utils/ejwt/token');
      //連接配接資料庫
      require('./model/connect');
      const express = require('/www/server/nvm/versions/node/v12.18.2/lib/node_modules/express');
      const app = express();
      const bodyParser = require('/www/server/nvm/versions/node/v12.18.2/lib/node_modules/body-parser');
      const multer = require('/www/server/nvm/versions/node/v12.18.2/lib/node_modules/multer'); // 第三方引入
      const fs = require('fs');
      const path = require('path'); // 自帶的直接引入
           

• 在 "項目清單"填寫相關資訊，我的啟動是 app.js

  啟動檔案： /www/wwwroot/dist/server/ app.js

這樣node就可以了，已經自己啟動了，但是我沒看到那裡可以檢視啟動狀态，這個有點煩。

（4）資料庫設定和導入

現在隻剩資料庫了，前面我們已經安裝了MongoDB了，現在要導入資料

（1）在 寶塔 ’安全‘ 那裡 ，放行資料庫預設端口 27017

（2） 建立資料庫和使用者名密碼權限 ，這個看自己需不需要，不設定也可以，因為我的本地開發就設定了使用者名和密碼，是以我這裡也要添加資料庫，并添加使用者名和密碼，和本地使用者名密碼一樣哦。

show dbs // 顯示所有的資料庫
use admin // 切換到admin
db.createUser({user:'root',pwd:'root',roles:['userAdminAnyDatabase']}) // 管理者使用者
db.auth('root','root') // 校驗
// use 自己的資料庫名稱(這如果資料庫存在就用存在的，不存在就好建立一個，我這裡是建立我的資料庫)
use ManageSystem 
db.createUser({user:'root',pwd:'root',roles:['readWrite']}) // 添加使用者名密碼，我本地也是這個，不然連接配接不上node哦
           

如果設定了權限, 那麼在寶塔面闆中的 “軟體商店” 界面下, 點選 MongoDB 的 “設定” > “配置檔案” > 作出如下修改

security:
authorization: enabled
           

（3）Mongodb導入導出資料 （可以選擇json或者csv檔案格式，我選擇json)

A.先導出自己資料庫文檔（ 我這裡是一個一個文檔導出的，沒看到一次性導出的指令…唉）

A1. 進入mongodb的bin目錄，配置了環境變量可不用進

打開cmd（快捷鍵: win + r, 輸入cmd),然後進入mongodb的bin目錄,（或者在cmd中先切換至mongodb所在磁盤，通過cd D:\soft\worksort\MongoDB\bin 這種方式進入）

A2. 導出

指令格式：  mongoexport -d 資料庫名字 -c 集合名字 -o "要導出到哪裡"
比如: 我要将我資料庫test中的user表導出到 “C:\Users\ddi\Desktop\db\user.json”
mongoexport -d test-c user -o "C:\Users\ddi\Desktop\db\user.json"

//有使用者名和密碼的加上 : -u  使用者名 -p 密碼， 我用的是這個

mongoexport -u root -p root -d ManageSystem -c gmcs -o "C:\Users\21202\Desktop\mydb\gmcs.json"

導出類型預設json,可以指定為csv

mongoexport -u root -p root -d python -c car --file car --headerline --type csv -f field
           

B. 在本地導出了，然後在www/wwwroot/dist下建立一個檔案(我創了mydb)，用來放資料庫檔案

• 然後将資料庫檔案(json 或 csv 格式)上傳至雲伺服器 /www/wwwrootdist/mydb 檔案夾下

B1 導入

指令格式： mongoimport -d 資料庫名字 -c 集合名字 --file “從哪裡導入”

但是這裡我們還要指定主機名和端口号， 還有，直接運作指令，不要先運作mongo再運作導入指令，我入坑過哈哈

//變成這樣：mongoimport -h 主機名:端口 -u 使用者名 -p 密碼 -d 資料庫名 -c 集合名 --file 檔案位址(如: /www/wwwroot/reading/db/words.json)
比如: 我要将上面導出的user.json導入至我的資料庫ManageSystem下面的users集合, file後面家雙引号
mongoimport -h 127.0.0.1:27017 -u root -p root -d ManageSystem -c users --file “/www/wwwroot/mydb/user.json”

然後一個個導入資料庫就好了
           

此時，項目已經部署完成了。可以正常通路了，這是我的畢設

我遇到的問題：

都配置好了，靜态檔案加載正常，接口通路404？

我是因為前端打包baseURL設定問題，現在的配置檔案就是我成功時候的配置檔案，大家如果也出現請求後端失敗，去看看接口，有沒有正常時http:公網ip/api 這樣

總結： 這是我第一次部署，過程也遇到很多問題，項目也還沒有進行優化等操作，隻是部署項目運作起來了，成功了也很高興，學到了很多，大家有問題可以評論交流。