nuxt.js express模板專案服務器部署

標籤：cmd   發展   init   部署   發布   npm   依賴   install   用戶端   

 nuxt版本：0.10.6

技術棧：nuxt.js, express, pm2

部署環境：windows server

之前用nuxt.js 的express的模板項目在windows下用nginx進行代理訪問，其實有點多餘，直接用host檔案就可以達到相同的效果，僅供娛樂吧，熟悉一下nginx的基本配置也是好的，其實這段時間研究nuxt.js比較多，主要還是想提高用戶端訪問首頁更快一點。

之前使用nuxt.js generate直接產生對應的html靜態檔案，這個不需要伺服器安裝什麼特殊的環境。

以iis為例，直接把dist檔案夾下產生的檔案丟到對應的目錄就可以了，其他的也是一樣拷貝目錄檔案，這種方式是用戶端訪問最快的方式，但是產生html靜態檔案的過程可能有點痛苦，伺服器資料有變化的時候要及時地更新對應的靜態html檔案，比如要跑一些累加式更新資料的服務，資料更新這一塊的複雜度就上去了。(後續再補充一下nuxt.js 用generate命令產生靜態html的範例)

對於後端資料變化比較頻繁且及時性要求高的應用來說，需要產生靜態html檔案很多的情況下，迴圈產生的方式難以滿足要求，以下是一個nuxt.js在服務端世界掛在node.js的環境啟動並執行方式。

產生模板項目

vue init nuxt/express mynuxtexpress

拷貝mynuxtexpress目錄下的檔案夾到伺服器上，例如我拷貝到D:\nuxt目錄下

伺服器上需要安裝node.js，安裝好後，cmd開啟D:\nuxt目錄，更新依賴包

npm install

編譯

npm run build

運行

npm run start

瀏覽器輸入http://localhost:3000就可以正常訪問了，但是在伺服器上如果關掉了cmd命令列視窗，服務就自動停止了

這裡介紹一個管理node.js應用進程的管理器pm2,安裝也很簡單

npm install -g pm2

然後使用pm2啟動應用

pm2 start ./build/main.js

啟動成功後

基本到這裡環境就差不多了，nuxt.js原始碼如果不想放在伺服器上，可以刪除除了.nuxt, build, node_modules檔案夾和package.json檔案的其他檔案和檔案夾，但是每次發布build和.nuxt兩個檔案夾和package.json檔案需要進行更新，如有依賴封裝更新，直接運行更新依賴包命令就可以了

另外預設的服務是host在127.0.0.1本機上，在部分伺服器上，如雲端服務器使用虛擬ip的伺服器上，localhost和127.0.0.1都可以訪問，但是使用內網的ip無法訪問，這也直接導致了伺服器外網即使連接埠開啟了，也沒有辦法訪問網站，需要更改server/index.js的host配置，去掉host參數

然後重新編譯運行，發布就可以了。

 nuxt.js還在發展階段，很期待即將到來的1.0的版本，其實現線上上的項目已經開始使用了，如果覺得不錯，那麼試一試吧，用得人多了，發展也就更快了！

nuxt.js express模板專案服務器部署