Nuxt專案部署伺服器
阿新 • • 發佈:2022-12-01
一、在專案的根目錄增加ecosystem.config.js檔案
pm2的配置檔案,pm2啟動的時候會自動讀取該配置
module.exports = { apps: [ { name: 'nuxt-website', //名稱可以自定義 exec_mode: 'cluster', instances: 'max', // Or a number of instances script: './node_modules/nuxt/bin/nuxt.js', args: 'start' } ] }
二、nuxt.config.js中配置server節點
module.exports = { //埠可以自定義,主要要跟nginx配置的代理埠保持一致 server: { port: 8000,// default: 3000 host: '0.0.0.0', timing: false }, }
三、專案打包
執行打包命令後,將專案內以下檔案複製到伺服器指定目錄
.nuxt static nuxt.config.js package.json package-lock.json ecosystem.config.js
四、登入伺服器進入前端專案部署的目錄安裝依賴包
npm install
其實就是安裝前端專案的執行所需的環境依賴包,安裝報錯的話檢查是否缺環境或者環境版本問題(nodejs);
安裝報錯還有種解決方法就是將本地的node_modules給直接扔進伺服器專案安裝目錄 只不過包太大一般都不採用這種方式
五、安裝完依賴之後 執行npm start
啟動專案
執行結果如下:重點是需要看listenging的值,後面nginx部署需要用到
六、配置nginx
這裡省略伺服器安裝nginx的步驟,建議面向百度安裝
安裝完nginx後,對應nginx目錄內有一個conf目錄 ,配置目錄內nginx.conf
// An highlighted block server { listen8081; server_name localhost; location / { //這裡的代理地址就是上一步前端專案npm start執行後的地址 proxy_pass http://10.0.0.10:8000; } }
配置完nginx記得重啟(執行nginx -s reload)
七、pm2 程序守護
1. 安裝全域性pm2
npm install -g pm2
2. 啟動服務
進入到nuxt專案對應的資料夾,執行
pm2 --name=你的服務名 start npm -- run start //比如專案我在ecosystem.config.js裡面自定義了名稱‘nuxt-website’,那這裡執行命令就是:pm2 --name=nuxt-website start npm -- run start
3. 附上pm2常用命令
pm2 list 檢視所有程序 pm2 show 0 檢視程序詳細資訊,0為PM2程序id pm2 stop all 停止PM2列表中所有的程序 pm2 stop 0 停止PM2列表中程序為0的程序 pm2 reload all 過載PM2列表中所有的程序 pm2 reload 0 過載PM2列表中程序為0的程序 pm2 delete 0 刪除PM2列表中程序為0的程序 pm2 delete all 刪除PM2列表中所有的程序