1. 程式人生 > 其它 >Nuxt專案部署伺服器

Nuxt專案部署伺服器

一、在專案的根目錄增加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 {
        listen       
8081; 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列表中所有的程序