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中。
正确的嘗試
- 将所有檔案除node_module檔案和其他的.git,.editorconfig等輔助類型的檔案忽略掉都上傳上去。
- 執行npm install安裝依賴包。
- 嘗試npm run build和npm run start看是否可以啟動
如果啟動失敗，應該就是項目代碼邏輯問題或者，包丢失的問題，檢查确認無誤後保證可以啟動。
- 配置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
- 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的端口号兩種方式
- 修改nuxt.config.js
export default {
server: {
port: 8000, // default: 3000
host: '0.0.0.0' // default: localhost
}
} - 修改package.json
"config": {
"nuxt": {
"host": "0.0.0.0",
"port": "3333"
}
} 至此，一套完整的部署到通路已經完成！
如果有小夥伴需要咨詢的可，qq留言咨詢，知無不言！
作者：狗尾草
出處：https://www.cnblogs.com/bgwhite/
-------------------------------------------
個性簽名：海到無邊天作岸，山登絕頂人為峰！
如果覺得這篇文章對你有小小的幫助的話，記得在右下角點個“推薦”哦，部落客在此感謝！