Nuxt專案的部署

Sandop發表於2018-08-29

專案介紹

專案中整合 vue + nuxt + axios + vuex + vue-router (nuxt 自帶 vuex 和 vue-router)，一個基於 Nuxt 的伺服器端渲染 Demo

PC端GitHub地址

移動端GitHub地址

一、PC端專案部署

關於專案部署折騰了我好多時間，網上許多百度來的文件不適合我的專案，所以自己摸索著終於部署起來了，開心O(∩_∩)O~~

1、專案打包

詳情請看 Nuxt官網

命令	描述
nuxt	啟動一個熱載入的 Web 伺服器（開發模式） localhost:3000
nuxt build	利用 webpack 編譯應用，壓縮 JS 和 CSS 資源（釋出用）
nuxt start	以生成模式啟動一個 Web 伺服器 (`nuxt build` 會先被執行)
nuxt generate	編譯應用，並依據路由配置生成對應的 HTML 檔案 (用於靜態站點的部署)

第一步、在本地 npm run build,會在.nuxt資料夾下生成dist檔案;

第二步、把本地檔案的.nuxt,static,package.json,nuxt.config.js,這四個資料夾放到伺服器目錄檔案下，我在伺服器上建立了run/www/visneyNuxt路徑，四個檔案放到裡面;

第三步、用cmd進入目錄資料夾，安裝依賴，npm install -production;

第四步、npm start 此時執行的是 http://localhost:3000;

2、Nginx配置

專案進行到現在，在伺服器上的專案正常沒有問題，但是當我們在瀏覽器中輸入http://www.visney.cn/，額，震驚，你並沒有看到自己想要的結果，(；′⌒`)

這時候就改Nginx出場時候啦，噹噹噹當~~~

(1)、Nginx安裝

第一步、Nginx 的安裝步驟比較簡單，安裝在windows上推薦使用壓縮包的安裝方式，下載地址;

第二步、有穩定版本和最新版本及以前版本，推薦使用穩定版本開發

第三步、下載完成之後，進行解壓可以看到如下檔案結構

第四步、雙擊nginx,exe 就啟動了。在頁面輸入localhost。出現如下介面則表示安裝成功。預設監聽80埠號

第五步、若你的伺服器上80埠被佔用，需要修改埠，Windows 下安裝目錄\conf\nginx.conf中的

server {
 listen  80;
 server_name localhost;
  
 ……
}
複製程式碼

改為

server {
 listen  81;
 server_name localhost;
  
}
 
複製程式碼

(2)、Nginx基礎屬性配置

這裡說明下我的配置，詳細引數說明請百度瞭解

第一步、找到安裝目錄下conf 檔案下的nginx.conf檔案開啟進行屬性配置

第二步、配置程式碼參考了很多的文件，主要參考https://segmentfault.com/a/1190000012774650，程式碼如下

    worker_processes  1;

    events {
        worker_connections  1024;
    }

    http {
        include       mime.types;
        default_type  application/octet-stream;
        sendfile        on;
        keepalive_timeout  65;

        upstream nodenuxt {
            server 127.0.0.1:3000; # nuxt 專案監聽PC端埠
            keepalive 64;
        }
        server {
            listen       80;
            server_name  www.visney.cn;

            location / {
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection "upgrade";
                proxy_set_header Host $host;
                proxy_set_header X-Nginx-Proxy true;
                proxy_cache_bypass $http_upgrade;
                proxy_pass http://nodenuxt;
            }

            error_page   500 502 503 504  /50x.html;
            location = /50x.html {
                root   html;
            }
        }
    }
複製程式碼

第三步、在nginx根目錄下開啟命令視窗，nginx -t 檢視nginx的配置檔案的目錄第四步、若緹詩沒有問題，nginx -s reload 重新載入nginx(當配置資訊發生修改時)

Nginx其他命令：

start nginx windows下的啟動命令 nginx -s quit 停止ngix nginx -s reload 重新載入nginx(當配置資訊發生修改時) nginx -h 檢視幫助資訊

完成以上配置，當你開啟瀏覽器，輸入http://www.visney.cn/，(@ο@) 哇～，終於成功了 T_T

(3)、Nginx配置 301重定向

301重定向是網頁更改地址後對搜尋引擎最友好的方法，配置visney.cn自動跳轉www.visney.cn，具體配置如下：

    server {
        listen       80;
        server_name  visney.cn;
        return       301 http://www.visney.cn$request_uri;
    }
複製程式碼

但是當你關閉伺服器上nuxt執行黑視窗時候，你的服務也斷了，心累(╯﹏╰)，就算不關閉黑視窗，有時候執行也是會斷的，不要問我怎麼知道的說多了都是淚，這時候就需要PM2進行守護了

3、PM2守護程式

(1)、pm2全域性安裝

npm i pm2 -g
複製程式碼

(2)、pm2啟動nuxt專案

關於啟動nuxt專案這裡試了很多坑，網上看了好多啟動方式都沒有成功，最多的一種是pm2 start npm --name "xxx" -- run build,在我的專案中也是沒有成功，

我的啟動方式是 pm2 start node_modules/nuxt/bin/nuxt-start --name xxx ,成功！！！！

這裡的xxx是專案名稱，即package.json中的name

(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列表中所有的程式
複製程式碼

** 至此，nuxt專案部署就完成了，長出一口氣，舒服！ But，後來我的移動端的專案完成了，也需要Nginx配置，pm2守護，部署亮了會像上面那麼簡單嗎，請聽我細細道來：

移動端專案機票

二、移動端專案部署

1、專案打包

專案打包與PC端一致，請參考PC端部署方法

2、Nginx配置

第一步、移動端Nuxt專案監聽埠為127.0.0.1:3001

第二步、這裡移動端訪問配置了二級域名http://m.visney.cn/，

第三步、在nginx中配置了移動端訪問和PC端訪問的判斷

upstream nodenuxtphone {
        server 127.0.0.1:3001;      # nuxt 專案監聽移動端埠
        keepalive 64;
    }
    server {
        listen       80;
        server_name  m.visney.cn;   # 移動端代理為二級域名

        location / {
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
            proxy_set_header Host $host;
            proxy_set_header X-Nginx-Proxy true;
            proxy_cache_bypass $http_upgrade;
            proxy_pass http://nodenuxtphone;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
複製程式碼

** 全部配置如下 **

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;

    keepalive_timeout  65;

    upstream nodenuxt {
        server 127.0.0.1:3000; # nuxt 專案監聽PC端埠
        keepalive 64;
    }
    server {
        listen       80;
        server_name  www.visney.cn;

        location / {
            if ($http_user_agent ~* (mobile|nokia|iphone|ipad|android|samsung|htc|blackberry)) {
                rewrite ^/(.*)$ http://m.visney.cn redirect;      
                
                #這裡隨意使用,這一行代表域名欄會跳轉到m.aaa.com
                #監聽裝置核心，移動端自動跳轉到http://m.visney.cn
            }
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
            proxy_set_header Host $host;
            proxy_set_header X-Nginx-Proxy true;
            proxy_cache_bypass $http_upgrade;
            proxy_pass http://nodenuxt;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

    server {
        listen       80;
        server_name  visney.cn;
        return       301 http://www.visney.cn$request_uri;
    }

    upstream nodenuxtphone {
        server 127.0.0.1:3001;      # nuxt 專案監聽移動端埠
        keepalive 64;
    }
    server {
        listen       80;
        server_name  m.visney.cn;   # 移動端代理為二級域名

        location / {
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
            proxy_set_header Host $host;
            proxy_set_header X-Nginx-Proxy true;
            proxy_cache_bypass $http_upgrade;
            proxy_pass http://nodenuxtphone;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}
複製程式碼

2、PM2配置

真正坑在這裡，嘿嘿~~~

高高興興的pm2 start node_modules/nuxt/bin/nuxt-start --name xxx （xxx為移動端專案名稱）

手機訪問沒有效果，納尼，出了什麼問題！？彆著急，解決方法如下：

當同時使用pm2 start node_modules/nuxt/bin/nuxt-start --name xxx 守護兩個專案時候，兩個專案都是用了3000埠，而移動端的3001無法反向代理，所以無法訪問。我試著在移動端的package.json中更改埠號，然而沒有用，T_T

所以，這時候我在PC端專案與移動端專案的根目錄下，分別單獨配置了啟動檔案process.json，為移動端配置埠 "port": "3001"

PC端設定process.json啟動

{
    "apps": [
        {
        "name": "visney",
        "cwd": "",
        "script": "node_modules/nuxt/bin/nuxt-start",
        "log_date_format": "YYYY-MM-DD HH:mm Z",
        "error_file": "/var/log/node-app/node-app.stderr.log",
        "out_file": "log/node-app.stdout.log",
        "pid_file": "pids/node-geo-api.pid",
        "instances": 3,
        "min_uptime": "60s",
        "max_restarts": 10,
        "max_memory_restart": "300M",
        "cron_restart": "1 0 * * *",
        "watch": false,
        "merge_logs": true,
        "exec_interpreter": "node",
        "exec_mode": "fork",
        "autorestart": false,
        "vizion": false
        }
    ]
}
複製程式碼

移動端設定process.json啟動

{
    "apps": [
        {
        "name": "visneyphone",
        "cwd": "",
        "script": "node_modules/nuxt/bin/nuxt-start",
        "log_date_format": "YYYY-MM-DD HH:mm Z",
        "error_file": "/var/log/node-app/node-app.stderr.log",
        "out_file": "log/node-app.stdout.log",
        "pid_file": "pids/node-geo-api.pid",
        "instances": 3,
        "min_uptime": "60s",
        "max_restarts": 10,
        "max_memory_restart": "300M",
        "cron_restart": "1 0 * * *",
        "watch": false,
        "port": "3001",
        "merge_logs": true,
        "exec_interpreter": "node",
        "exec_mode": "fork",
        "autorestart": false,
        "vizion": false
        }
    ]
}
複製程式碼

3、啟動pm2守護

PC端根目錄移動端根目錄下分別啟動 pm2 start process.json

OK，專案完成！！

###3、 pm2瀏覽器中使用視覺化的視窗

pm2專案成功之後可以在伺服器的瀏覽器上視覺化的檢視,可以在網頁中監控,效果如下：

登入地址 https://app.keymetrics.io

第一步：登入註冊，我在這裡使用的是Github賬號登入，如下：

第二步：連線本地專案

第三步：啟動專案，pm2 start process.json,ok,現在可以看到效果了，如下：

最後

文章到這就要結束了。

PC端GitHub地址

移動端GitHub地址

如果大家覺得這個專案有點意思，歡迎 star。謝謝，O(∩_∩)O~

阿里雲部署nuxt專案
2018-04-26
阿里UX
Nuxt專案總結
2019-09-26
UX
使用 nuxi clean 命令清理 Nuxt 專案
2024-09-01
UX
Nginx部署Vue前端專案，部署多個Vue專案
2024-06-21
NginxVue前端
使用 nuxi prepare 命令準備 Nuxt 專案
2024-09-07
UX
前端專案部署
2019-03-04
前端
docker部署專案
2018-07-10
Docker
一個nuxt(vue)+mongoose全棧專案聊聊我粗淺的專案架構
2018-08-07
UXVueGo全棧架構
[部署02] Docker 部署vue專案
2020-03-21
DockerVue
scrapyd+gerapy的專案部署
2020-07-18
一個基於nuxt+iview-admin+koa2 的專案
2018-06-22
UXView
Docker 部署 vue 專案
2024-09-24
DockerVue
Docker部署Java專案
2024-08-19
DockerJava
nginx部署vue專案
2024-03-08
NginxVue
Docker部署SpringBoot專案
2024-06-16
DockerSpring Boot
專案部署到Linux
2022-07-27
Linux
SpringBoot專案熱部署
2020-01-10
Spring Boot熱部署
Docker部署Python專案
2020-06-24
DockerPython
docker中部署專案
2020-09-24
Docker
Linux部署專案流程
2019-05-30
Linux
CentOS 部署 flask專案
2019-03-03
CentOSFlask
爬蟲專案部署
2018-04-03
爬蟲
Linux部署之Docker方式部署專案
2020-09-04
LinuxDocker
React專案模板-從專案搭建到部署
2019-03-02
React
Tomcat 部署專案的三種方法
2020-04-07
Tomcat
vue專案部署時報的警告
2018-03-13
Vue
nuxt.js專案部署到生產環境時其中後端介面寫外網地址不行的問題
2019-11-27
UXJS後端
使用 nuxi upgrade 升級現有nuxt專案版本
2024-09-10
UX
OA專案-虛擬機器上部署專案
2018-05-23
虛擬機
MHBlog專案部署記錄
2024-10-24
微前端專案部署方案
2023-04-10
前端
安卓部署Java專案
2023-01-24
安卓Java
Flask web專案 gunicorn部署
2024-05-01
FlaskWeb
C# 專案 docker 部署
2024-04-24
C#Docker
Windows環境部署專案
2024-05-08
Windows
利用 systemd 部署 golang 專案
2019-09-16
Golang
使用 Docker 部署 vue 專案
2019-12-31
DockerVue
使用 Docker 部署 Angular 專案
2019-12-19
DockerAngular

Nuxt專案的部署

專案介紹

一、PC端專案部署

1、專案打包

2、Nginx配置

(1)、Nginx安裝

(2)、Nginx基礎屬性配置

(3)、Nginx配置 301重定向

3、PM2守護程式

(1)、pm2全域性安裝

(2)、pm2啟動nuxt專案

(3)、pm2其他命令

二、移動端專案部署

1、專案打包

2、Nginx配置

2、PM2配置

3、 啟動pm2守護

最後

相關文章

3、啟動pm2守護