0%

利用PM2部署Nuxt.js專案

Posted on In

Nuxt為vue的一個ssr框架，與spa不同的地方在於，spa只會輸出一個html檔案給使用者，讓使用者在前端獲取資料之後進行渲染，而Nuxt則是在使用者第一次request網頁的時候，在server端先獲取資料並渲染後再傳輸給使用者，所以Nuxt需要開發人員在主機端運行一個常駐的程式

Nuxt主要基於js，在架設js的後端時，我們常常會使用PM2來進行管理與運行，這篇主要是紀錄一下，怎麼快速方便的架設nuxt伺服器

Nuxt.js服務端部署設定

首先我們在Nuxt的專案資料夾底下找到package.json，並更改其設定，因為nuxt在部屬的時候我們得先build過之後才能start伺服器，所以在最後加一個deploy的script，
裡面先運行了build運行完之後接著運行start，這樣就可以利用一個指令快速進行部署

而在start這個指令裡面，可以先設定好port，通常專案預設的port為3000，很容易跟其他專案衝突，所以我這邊就先將port改成3002

1
2
3
4
5
6
7
8
9
{
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "PORT=3002 nuxt start ",
    "generate": "nuxt generate",
    "deploy": "nuxt build && npm start"
  }
}

使用PM2部署Nuxt.js專案

因為上面已經做好了設定，我們只要在command line中進入專案的資料夾，並且執行下列指令就可以運行Nuxt.js專案了

1
pm2 start npm --name "NuxtDemo" -- run deploy

next.js、nuxt.js等服務端渲染框架構建的項目部署到服務器，並用PM2守護程序