Vue+Node 全棧項目部署流程

如何把做好的全棧項目部署到線上呢？今天我以一個全棧項目（Vue、Node、Express、MongoDB）爲例，爲大家演示js全棧項目的上線流程，僅供參考，希望你能喜歡。

一、項目簡介與技術棧

1、WebApp（H5項目）

技術棧：vue、vue-router、vuex、vant、sass、rem。
主要功能：首頁商品列表、下拉刷新、觸底加載、分頁；品類搜索（vuex實現緩存）；購物車、登錄鑑權、註冊；個人中心，地址簿管理等。
倉庫地址：https://gitee.com/summer2020/vue-vant-webapp

2、管理系統（PC項目）

技術棧：vue、vue-router、vuex、element-ui、sass、socket.io-client
主要功能：登錄鑑權、權限管理；商品的增刪改查、圖片上傳；Socket通信服務等。
倉庫地址：https://gitee.com/summer2020/vue-element-admin

3、Node RESTful API

技術棧：node.js、express、ejs、mongoose
主要功能：登錄、註冊、token鑑權、權限管理、商品管理、購物車（訂單）管理、地址簿管理等。
倉庫地址：https://gitee.com/summer2020/node-fullapi

二、上線前準備

1、域名購買、備案、DNS解析

在阿里雲註冊賬號，購買.com域名一個。在阿里雲控制檯中，點擊“備案”，進入備案專區，提交備案資料（協議複印件照片、身份證複印件照片、備案幕布拍照照片等）。

初次備案，需等待21個工作日出備案結果。備案成功後，可以拿到 ICP主體備案號，在網站開發時，將其添加到網站底部。

進一步，使用阿里雲免費的 DNS 解析服務，完成域名到雲服務器IP地址的解析（你得先買一臺 ECS雲服務器，見下方內容）。

www 配置PC官網、Node數據庫服務
m 配置 H5官網
oa 配置管理系統網站
cdn 配置圖片服務

2、購買一臺雲服務器

不同規格的ECS雲服務器，使用場景各不相同，價格也是千差萬別。我主要用於教學，選擇了較便宜的通用型。

有了雲服務器，就有了公網IP和私網IP，上文中的域名解析服務，就要用到公網IP。我買的雲服務器是 CentOS 7.4 64位。

使用 XShell 或者其它 SSH 工具即可遠程連接雲服務器，進一步安裝你所需要的軟件和應用程序。在 Git Bash 中，可以使用 ssh 命令進行連接。

ssh [email protected]
# 輸入密碼，連接成功

三、基礎軟件安裝

1、nginx 安裝

yum info nginx
yum install nginx
# 默認安裝在 /etc/nginx目錄
# nginx.conf 是默認配置文件

nginx常用命令有：

# 檢測修改後配置文件是否有語法錯誤
nginx -t
#啓動 nginx 服務
nginx -c /etc/nginx/nginx.conf
# 停止 nginx 服務
nginx -s stop
# 重啓 nginx 服務
nginx -s reload

2、git 安裝

yum info git
yum install git

git 常用命令：

# 配置用戶名和郵箱
git config --global user.name "geekxia"
git config --global user.email "[email protected]"
git config --list

# 記住用戶名和密碼，方便使用
git config --global credential.helper store

# 克隆、更新遠程代碼
git clone
git pull

3、node 安裝

yum info nodejs
yum install nodejs

# 驗證 nodejs 安裝成功與否、版本號查詢
node -v
npm -v

如果 yum 安裝的 nodejs 版本過低，我們還可以使用另一種方式來安裝指定版本的nodejs。

# 下載nodejs v12
wget https://nodejs.org/dist/v12.14.1/node-v12.14.1-linux-x64.tar.xz

# 解壓
tar xf node-v12.14.1-linux-x64.tar

# 重命名文件夾
mv node-v12.14.1-linux-x64 /usr/local/node12

# 配置環境變量
vim /etc/profile
# 在這個配置文件中添加一行環境變量
PATH=/usr/local/node12/bin:$PATH

# 讓環境變量生效：
source /etc/profile

# 測試node安裝是否成功
node -v
npm -v

4、mongodb安裝

參考mongodb英文官網，根據文檔指示安裝Linux平臺對應的社區版本。

# 安裝 MongoDB 社區版（免費）
yum info mongodb-org
yum install mongodb-org

# 啓動數據庫
systemctl start mongod
systemctl status mongod

# 進入交互式命令行環境，說明安裝成功
mongo
show dbs
# 創建數據庫，數據庫名爲node
use node
db.createCollection("users")
# 向users集合中插入一條數據
db.users.insertOne({username:'admin',password:'******',role:'admin'})
db.users.find()

四、部署 node api 服務器

1、啓動 node服務

使用 ftp工具，或者使用 git 把本地的 node代碼推送到雲服務器上。使用 nodemon 啓動 node 服務。

# 使用 nodemon
# 在 node服務程序的根目錄
npm install nodemon -g
nodemon app.js

另一個選擇是，安裝 pm2 ，更加優雅地管理 node 服務。

npm install pm2 -g
pm2 start app.js

2、部署node api服務

檢測防火牆是否關閉，如果未關閉，可先關閉掉防火牆。

systemctl status firewalld.service
systemctl stop firewalld.service 
systemctl disable firewalld.service

3、在nginx中配置node api服務

server {
    listen 80;
    server_name www.3fengs.com;
    include /etc/nginx/default.d/*.conf;
    # node api接口
    location /api {
        proxy_pass http://localhost:8888;
    }
}

每次修改nginx配置文件，都要重啓nginx。

nginx -t
nginx -s reload

4、在客戶端測試node服務的連通性

# nginx服務的默認端口是80

# 使用域名測試接口的連通性
http://3fengs.com/api/v1/user/list
# 使用外網IP地址測試接口
http://xxx.xx.xxx.xxx/api/v1/user/list

五、部署管理系統/WebApp

1、Vue項目打包的注意事項

無論部署生產環境，還是部署測試環境，都要進行打包。
部署打包，本地development中的所有配置，比如devServer都不起作用，即不會影響線上環境。
/src中的文件模塊會被webpack打包處理、壓縮、添加Hash命名等，/public裏的資源文件，不會被處理，後續可以方便地進行CDN加速。
Vue項目打包，以vue.config.js配置文件爲準，常用配置可參考Vue CLI文檔。
filenameHashing默認爲true。當它是開啓狀態時，/src中所有打包的文件都會被加上hash值，這是爲了解決瀏覽器的強緩存的缺陷。（當webpack打包時，被關聯的文件如果沒有發生變化，Hash是不變的。當被關聯的文件修改了，再次打包時，它打包結果的hash會變化。）
在開發過程中，當我們使用圖片時，應該把圖片放在哪裏呢？1、遠程圖片（可直接使用圖片URL）；2、不需要考慮優化的圖片（可以放在assets目錄中,它會變成代碼包的一部分）；3、可能要進行CDN優化的圖片（建議放在public中）。Vue腳手架環境下開發，建議使用模塊化語法統一管理項目中的所有圖片。
baseURL用於指定 ajax的 baseURL，每次打包時都特別注意。它常常會導致跨域問題產生，需要使用nginx配合解決跨域問題。

# 打包前，配置好圖片的線上訪問地址
const imgBase = 'http://cdn.3fengs.com'
# 打包前，配置好ajax的 baseURL
const baseURL = 'http://oa.3fengs.com'
# 打包前，配置圖片上傳的action地址
const imgAction = 'http://oa.3fengs.com/api/v1/upload/img'
export default {
  imgBase,
  baseURL,
  imgAction
}

publicPath用於控制打包後的index.html文件用何種方式引入各種靜態文件，其默認值是/。
pages用於實現多頁面應用程序（MPA）,在默認情況下Vue腳手架做的是單頁面應用程序（SPA）。
如果Vue-Router使用的history路由模式，當部署到線上時，會出現404的刷新問題，這需要在nginx中做重定向處理。

2、nginx.conf 配置示例

使用ftp工具，或者使用git把打包好的靜態資源文件傳輸到雲服務器上。

# 部署 node api 服務
server {
    listen 80;
    server_name www.3fengs.com;
    include /etc/nginx/default.d/*.conf;
    # node api接口
    location /api {
        proxy_pass http://localhost:8888;
    }
}
# 部署管理系統（PC項目）
server {
    listen 80;
    server_name oa.3fengs.com;
    location / {
        root /root/vue-stack/web-gp/oa;
        index index.html;
    }
    # 解決跨域問題
    location /api {
        proxy_pass http://3fengs.com;
    }
}
# 部署WebApp（H5項目）
server {
    listen 80;
    server_name m.3fengs.com;
    location / {
        root /root/vue-stack/web-gp/m;
        index index.html;
        # 解決Vue-Router的 history模式問題
        try_files $uri $uri/ /index.html;
    }
    # 解決跨域問題
    location /api {
        proxy_pass http://3fengs.com;
    }
}
# 部署圖片服務
server {
    listen 80;
    server_name cdn.3fengs.com;
    # 項目中的圖片存儲位置
    location / {
        root /root/vue-stack/node-fullapi-gp/public;
    }
}

nginx -t
nignx -s reload

重啓 nginx 即可正常訪問上述兩個項目。訪問測試參考：

訪問WebApp（H5項目）：http://m.3fengs.com
訪問管理系統（PC項目）：http://oa.3fengs.com

本篇結束，感謝點贊與關注！！

Vue+Node 全棧項目部署流程

一、項目簡介與技術棧

二、上線前準備

三、基礎軟件安裝

四、部署 node api 服務器

五、部署管理系統/WebApp

高效率使用windows

智能決策新時代：可視化大屏是否能夠超越傳統白板？

解密Prompt系列28. LLM Agent之金融領域摸索：FinMem & FinAgent

分享幾個.NET開源的AI和LLM相關項目框架

XHR封裝文件上傳方法

十道前端面試題第【08】篇

TypeScript 基礎入門教程

Vue中實現 input 表單搜索（防抖版）

分享幾個用於深複製的方法

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結