Nuxt.js項目實戰部署

Nuxt.js項目部署

采用nuxt.js開發，一般都是為了實現SSR。讓搜索引擎更好的抓取網頁內容。

nuxt.js官方為我們提供了兩種部署的方式，一種是靜態資源部署，一種是ssr形式部署。

本文章總結ssr形式的部署完整流程

失敗的嘗試

在項目搭建好以后，狗尾草按很多網友說的，執行npm run build 然后將.nuxt文件和static和nuxt.config.js文件和package.json文件復制壓縮上傳服務器。然后執行npm install最后執行npm run start就可以平穩運行，最后開啟進程守護就好了

狗尾草按如上所說過程進行了一番嘗試后，發現在npm install完畢執行npm run start的時候，項目就會報錯

最簡單的查看，package.json文件中npm run start的配置啟動文件為server/index.js

然鵝，如網友所說上傳文件時，並沒有攜帶server.js。所以npm run start是找不到文件的，必然啟動失敗，然后狗尾草發現在.nuxt文件中是有打包好的server.js文件的，於是修改package.json中的start啟動命令

 "start": "cross-env NODE_ENV=production node ./nuxt/server.js", 

然后發現還是報錯，缺少什么模塊，這個報錯就比較惡心了。然后執行了好幾遍npm install以為是包確實了，但是卻不是。應該是設么配置不對，我索性就放棄了，因為這過程中發現好多依賴文件都沒有打包進.nuxt.js中。

正確的嘗試

1. 將所有文件除node_module文件和其他的.git,.editorconfig等輔助類型的文件忽略掉都上傳上去。

2. 執行npm install安裝依賴包。

3. 嘗試npm run build和npm run start看是否可以啟動

如果啟動失敗，應該就是項目代碼邏輯問題或者，包丟失的問題，檢查確認無誤后保證可以啟動。

4. 配置nginx

server {
  listen 80;
  server_name  www.bgwhite.cn;
  location / {
    proxy_pass http://127.0.0.1:3000;
  }
  error_page 404 = http://www.bgwhite.cn/404.html;
}

訪問域名時，映射到nuxt啟動的端口即可

這里需要注意的是，如果打包的是靜態資源，則需要訪問的就是root xxx/xxxx/index.html

5. pm2開啟進程守護

需要全局安裝一下pm2

npm install pm2

執行完畢后，具體的命令可查看官網提示

pm2 start npm run start

或者配置具體的pm2啟動文件

詳情可查看官網的文檔，后續狗尾草也會出響應的pm2的配置和使用方法

開啟后，通過對應命令查看服務器上是否

 netstat -anp 

 

可以看到狗尾草的nuxt服務是已經啟動。這個時候訪問bgwhtie.cn可以看到是已經可以正產訪問了。

而且網頁內容是可以看到的

 

 

至此nuxt.js部署ssr類型已經完成。靜態資源的部署的話和vue的部署其實是差不多的

采坑

nuxt開啟的默認端口是3000端口，如果服務器上3000端口已經被占用了，怎么辦呢？

修改nuxt的端口號兩種方式

1. 修改nuxt.config.js

export default {  
    server: {    
        port: 8000,     // default: 3000
    host: '0.0.0.0' // default: localhost
  }  
}

2. 修改package.json

"config": {
    "nuxt": {
      "host": "0.0.0.0",
      "port": "3333"
    }
}

至此，一套完整的部署到訪問已經完成！

如果有小伙伴需要咨詢的可，qq留言咨詢，知無不言！