Nuxt.js（Vue SSR）創建專案到服務器（Nginx+PM2）部署詳細流程-有解無憂

一、什么是 `SSR` ?

SSR 就是 服務器渲染，什么是 服務器渲染？由 服務器 組裝好 DOM 元素，生成 HTML 字串給到瀏覽器，也就是在瀏覽器里面是可以看到整個頁面的 DOM 原始碼的，
SSR 解決的問題:

SEO：搜索引擎的優先爬取級別是頁面的 HTML 結構，當我們使用 SSR 的時候，服務端已經生成了與業務相關聯的 HTML，這樣的資訊對于 SEO 是很友好的，

內容呈現：客戶端無需等待所有的 JS 檔案加載完成即可看見渲染的業務相關視圖（壓力來到了服務端這邊，這也是需要做權衡的地方，需要區分哪些由服務端渲染，哪些可以交給客戶端），
SSR 相關的弊端:

代碼兼容：對于開發人員來講，需要去兼容代碼在不同環境的運行 Vue SSR 所需要的服務端環境是 Node，有一些客戶端的物件，比如 dom、windows 之類的則無法使用，

服務器負載：相對于前后端分離模式下服務器只需要提供靜態資源來說，SSR 需要的服務器負載更大，所以在專案中使用 SSR 模式要慎重，比如一整套圖表頁面，相對于服務端渲染，可能用戶不會在乎初始加載的前幾秒，可以交由客戶端使用類似于骨架屏，或者懶加載之類的提升用戶體驗，
Vue 與 Vue SSR 與 原生HTML 頁面原始碼區別對比，在網頁上右鍵查看原始碼：

Vue SSR 與 原生HTML 是可以看到原始碼標簽的

Vue 默認是看不到原始碼標簽的，因為它是 JS 組裝的，

二、什么是 Nuxt.js ?

目前做 SSR 的方式有幾種，大概列舉一下：

1、前端撰寫 原生靜態頁面，給到服務器，通過服務器框架進行組合資料，例如 php 的 Web 開發，

2、使用 prerender-spa-plugin 插件，作者是 Vue 核心團隊的成員，這種實作方式并不叫 SSR，而是 預渲染，不過效果上是一樣的，甚至某種程度上來說可能要比 SSR 更好，相比官方提供的 SSR 繁瑣配置，prerender 配置更簡單快捷，

3、Vue 官方提供的輪子在 Node 端做 SSR, 相對于 prerender 插件來說，SSR上手真的超級復雜，有興趣可以自行查看 Vue SSR 指南，這種方法可以做到真實資料實時渲染，完全可供 SEO 小蜘蛛盡情的爬來爬去，完全前后端同構，路由配置共享，不再影響服務器 404 請求，但是配置比較麻煩、處理流程比較復雜 (比對預渲染插件，復雜太多)約束較多，對服務器會造成較大的壓力，服務器成本太高了，

4、Nuxt.js 是使用 Webpack 和 Node.js 進行封裝的基于 Vue 的 SSR 框架，不需要自己搭建一套 SSR 程式，而是通過其約定好的檔案結構和 API 就可以實作一個首屏渲染的 Web 應用，

我這里選擇使用 Nuxt.js 來做 SSR，

三、通過 Nuxt.js 創建專案

Nuxt.js 官方安裝流程，專案需要依賴 Node 環境，我這里用的包管理工具是 NPM，Nuxt.js 版本是 2.14.5，

創建專案，確保安裝了 npx（npx 在 NPM 版本 5.2.0 默認安裝了）：

$ npx create-nuxt-app <專案名>

或者用 yarn ：

$ yarn create nuxt-app <專案名>

我這里用 npx 創建一個測驗專案，例如：

$ npx create-nuxt-app nuxt-test

// 進入到檔案夾，執行創建專案命令
dengzemiaodeMacBook-Pro:test dengzemiao$ npx create-nuxt-app nuxt-test
create-nuxt-app v3.5.2
?  Generating Nuxt.js project in nuxt-test

// 專案初始配置，自己看著選，用什么選什么 不懂就選 None，后面也可以裝的，
? Project name: nuxt-test
? Programming language: JavaScript
? Package manager: Npm
? UI framework: None
? Nuxt.js modules: Axios - Promise based HTTP client
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert sele
ction)
? Testing framework: None
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Server (Node.js hosting)
? Development tools: jsconfig.json (Recommended for VS Code if you're not using 
typescript)
? What is your GitHub username? dengzemiao
? Version control system: None

.....等待一段時間，就會提示創建專案成功
  
🎉  Successfully created project nuxt-test

// 如果是開發中，運行 npm run dev 就可以，開發者模式
To get started:

  cd nuxt-test
  npm run dev

// 如果是需要發布到線上了，需要先 build 在 start 才能正式發布
To build & start for production:

  cd nuxt-test
  npm run build
  npm run start

四、Nuxt.js 本地運行

這篇文章只講 創建專案 到 發布服務器，以及服務器怎么部署才能通過服務器訪問，其他專案細節配置放在其他文章中去寫，

創建完成專案之后，可以先運行專案一下，用上面 To get started 或 To build & start for production 中的方式運行起來專案，只是前者是 development 模式，后者是 production 模式，

dengzemiaodeMacBook-Pro:test dengzemiao$ cd nuxt-test
dengzemiaodeMacBook-Pro:nuxt-test dengzemiao$ npm run dev

> nuxt-test@1.0.0 dev /Users/dengzemiao/Desktop/Project/web/test/nuxt-test
> nuxt


   ╭───────────────────────────────────────╮
   │                                       │
   │   Nuxt @ v2.14.12                     │
   │                                       │
   │   ? Environment: development          │
   │   ? Rendering:   server-side          │
   │   ? Target:      server               │
   │                                       │
   │   Listening: http://localhost:3000/   │
   │                                       │
   ╰───────────────────────────────────────╯

然后通過上面的 http://localhost:3000/ 打開瀏覽器進行訪問，但是這個是開發環境，

在 pages 里面的 .vue 檔案都會被自動轉成路由，檔案夾也是一樣，
例如：專案 pages 檔案夾里面有個 index.vue 檔案，它會被編譯成 index.html，在路由中也就是 /index，可以嘗試修改 index.vue 里面的內容，或者新建一個 .vue 檔案進行測驗內容，
例如：我在 pages 里面創建一個測驗檔案 dzm.vue，運行起來專案，訪問的路徑就是 http://localhost:3000/dzm

五、Nuxt.js 直接 `ip` 訪問專案(正式和測驗都適用)

運行開發環境 $ npm run dev

   ╭───────────────────────────────────────╮
   │                                       │
   │   Nuxt @ v2.14.12                     │
   │                                       │
   │   ? Environment: development          │
   │   ? Rendering:   server-side          │
   │   ? Target:      server               │
   │                                       │
   │   Listening: http://localhost:3000/   │
   │                                       │
   ╰───────────────────────────────────────╯

運行正式環境 $ npm run build + $ npm run start

   ╭──────────────────────────────────────────╮
   │                                          │
   │   Nuxt @ v2.14.12                        │
   │                                          │
   │   ? Environment: production              │
   │   ? Rendering:   server-side             │
   │   ? Target:      server                  │
   │                                          │
   │   Memory usage: 29.1 MB (RSS: 73.1 MB)   │
   │                                          │
   │   Listening: http://localhost:3000/      │
   │                                          │
   ╰──────────────────────────────────────────╯

通過上面的兩個運行的結果，得到的地址都是 http://localhost:3000/，這個是固定本地 localhost:3000 才可以進訪問，需要改成支持本地 ip 也能訪問，也就是你拿到本機電腦的 ip 加上埠也能進行訪問到，例如: http://10.0.93.169:3000

找到 nuxt.config.js，添加下面代碼：

export default {
  head: {...},
  css: [...],
  
  // 配置服務器（主要是這個配置）
  server: {
    // port: 8000, // default: 3000
    // host: '0.0.0.0', // default: localhost,
    host: '0', // 等于 host: '0.0.0.0' 這樣配置
    timing: false
  },

再次運行專案，正式或測驗都行，訪問地址就會變成本機的 ip 地址加埠：

 ╭─────────────────────────────────────────╮
 │                                         │
 │   Nuxt @ v2.14.12                       │
 │                                         │
 │   ? Environment: development             │
 │   ? Rendering:   server-side            │
 │   ? Target:      server                 │
 │                                         │
 │   Memory usage: 29.4 MB (RSS: 74 MB)    │
 │                                         │
 │   Listening: http://10.0.93.169:3000   │
 │                                         │
 ╰─────────────────────────────────────────╯

本地運行專案就到這里結束了，下面需要將專案發布到服務器運行起來，

四、Nuxt.js 上傳服務器（Nginx + Node + PM2）

下面的這些操作如果需要測驗，可以放在本地機器上進行搭建，把本地電腦當服務器使使，
服務器 安裝 Nginx + Node + PM2，
Nuxt.js 是依賴 Node，所以 服務器 需要安裝 Node，裝了 Node 就會自帶 NPM，然后通過 NPM 安裝 PM2:
```
$ npm install -g pm2
```
PM2 是 Node 的行程管理工具，為啥用這個？舉個例子：運行專案之后，命令列視窗是不能關閉的，如果關閉了就無法訪問這個專案地址了，所以需要支持關閉命令列視窗，運行的專案依然能夠訪問，也就是后臺掛起行程，PM2 就可以做到這個事情，
安裝好上面環境，在 Nginx 根目錄里面通過 Git 拉下來 Nuxt.js 原始碼，可以新開檔案夾存放也是可以的，隨你自己
```
$ git clone xxxxx.git

// 如果存在代碼就拉一下代碼 保持最新
$ git pull
```
這里說一下，在網上搜一下會搜到很多只需要匯入幾個檔案就可以運行專案的文章，但是有時候會出現 編譯函式找不到、資源檔案找不到 之類的問題，所以如果不是特別熟悉 Nuxt.js 的話，直接將整個專案拉下來使用，不需要去單獨匯入某些檔案，這樣也完美的避開一些細節上的坑，例如匯入下面幾個檔案：
```
.nuxt
static
nuxt.config.js
package.json
package-lock.json
```
將代碼拉到服務器后，需要先走一遍 npm 安裝，安裝一下依賴包
```
$ npm install
```
然后編譯專案
```
$ npm run build
```

PM2 運行專案，后臺掛起，PM2 啟動有個需要注意的，那就是 你的專案名稱 必須跟專案 package.json 檔案里面的 name 欄位值一樣，一模一樣，它是根據這個去標識的，否則不會生效，

// 之前是通過 $ npm run dev 或者 $ npm run start，但是命令列視窗不能關閉
// 啟動測驗環境后臺掛起
$ pm2 start npm --name "你的專案名稱" -- run dev
// 啟動正式環境后臺掛起
$ pm2 start npm --name "你的專案名稱" -- run start

在正式服務器就啟動正式環境，例如：
$ pm2 start npm --name "nuxt-test" -- run start

然后可以通過 $ pm2 list 查看是否掛起成功，這樣顯示了就是掛起成功了

┌─────┬──────────────┬─────────────┬─────────┬─────────┬──────────┬────────┬──────┬───────────┬──────────┬──────────┬──────────┬──────────┐
│ id  │ name         │ namespace   │ version │ mode    │ pid      │ uptime │ ?    │ status    │ cpu      │ mem      │ user     │ watching │
├─────┼──────────────┼─────────────┼─────────┼─────────┼──────────┼────────┼──────┼───────────┼──────────┼──────────┼──────────┼──────────┤
│ 0   │ nuxt-test    │ default     │ N/A     │ fork    │ 1190     │ 0s     │ 0    │ online    │ 0%       │ 7.8mb    │ den… │ disabled │
└─────┴──────────────┴─────────────┴─────────┴─────────┴──────────┴────────┴──────┴───────────┴──────────┴──────────┴──────────┴──────────┘

現在就可以通過你這臺電腦或者服務器的 ip 地址加埠號進行訪問了，例如：http://10.0.90.164:3000/，

如果需要停掉后臺掛起，執行洗掉命令即可，id 就是 $ pm2 list 串列中的 id 值:
```
$ pm2 delete id

例如：
$ pm2 delete 0
```
如果專案修改調整了，上傳了新的東西，只需要拉下代碼編譯后，重啟 PM2 對應環境行程即可:

測驗環境 - 初始化：$ git pull + $ npm install + $ pm2 start npm --name "你的專案名稱" -- run dev

測驗環境 - 初始化：$ git pull + $ npm install + $ npm run build + $ pm2 start npm --name "你的專案名稱" -- run start

注意：$ pm2 start .... 命令，每次啟動都會在 $ pm2 list 串列中新增一個管理行程，所以只需要初始化創建了就行了，后面如果不是通過 $ pm2 delete id 手動洗掉了，就不需要每次 $ pm2 start ....，只需要重啟即可：

測驗環境 - 后續版本更新：$ git pull + $ npm install + $ pm2 restart id

正式環境 - 后續版本更新：$ git pull + $ npm install + $ npm run build + $ pm2 restart id

額外說一句：如果 PM2 啟動專案之后，不知道訪問那個地址，那可以先 $ pm2 delete id 洗掉行程，執行自帶的運行方式 $ npm run dev 或 $ npm run tart，需要哪個環境就運行哪個命令，運行之后可以拿到訪問地址，拿到之后關掉，在通過 PM2 運行訪問同意一個地址，注意埠號別變化了，如果埠被占用，會分配一個新的埠：

 ╭──────────────────────────────────────────╮
 │                                          │
 │   Nuxt @ v2.14.12                        │
 │                                          │
 │   ? Environment: production              │
 │   ? Rendering:   server-side             │
 │   ? Target:      server                  │
 │                                          │
 │   Memory usage: 29.4 MB (RSS: 74.6 MB)   │
 │                                          │
 │   Listening: http://10.0.90.164:3000/    │
 │                                          │
 ╰──────────────────────────────────────────╯

最終通過 PM2 啟動掛起之后，現在需要配置一下 Nginx，之前啟動是 Node 服務，訪問是沒問題的，但是現在需要通過 Nginx 反代理到 Node，也就是通過 Nginx 去訪問到 Node 的資源地址，

找到 Nginx 的 nginx.conf 檔案，在里面添加一個新的服務，以及一個反代理服務

http {

  # 新建一個 nuxt server 服務
  upstream nuxt {
    # 這里就是上面配置的 Node ip + 埠號，之前默認是 localhost:3000
    server 0.0.0.0:3000;
    keepalive 64;
  }

  server {
    listen 8083; #服務器埠
    server_name www.nuxt.com;  #這里對應你服務器的域名
    location / {
        proxy_pass http://nuxt;  #這里對應上面 upstream 中新建的服務名
        index index.html index.htm;
    }
  }
}

配置好這個之后，通過 $ nginx 啟動 Nginx 或者 $ nginx -s reload 重繪 Nginx 組態檔生效，
配置好之后，啟動 Node，啟動 Nginx，這樣就可以直接通過 Node 的 ip + :3000埠 直接訪問，也可以通過 Nginx 的 ip或域名 + :8083埠 訪問了，對外當然是走 Nginx 了，配置一下域名，
到這就完事了，其他就是專案內部的細節配置跟使用了，會寫到另外的文章里面去！
Nuxt.js（Vue SSR）專案配置以及開發細節

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/255911.html

標籤：其他

上一篇：Js+Map實作兩數之和

下一篇：codemirror 使用總結

Nuxt.js（Vue SSR）創建專案到服務器（Nginx+PM2）部署詳細流程