Nuxt項目的部署

時間  2019-11-06
標籤 nuxt 項目 部署 简体版
原文   原文鏈接

項目介紹

項目中整合 vue + nuxt + axios + vuex + vue-router (nuxt 自帶 vuex 和 vue-router)，一個基於 Nuxt 的服務器端渲染 Demohtml

PC端GitHub地址vue

移動端GitHub地址node

1、PC端項目部署

關於項目部署折騰了我好多時間，網上許多百度來的文檔不適合個人項目，因此本身摸索着終於部署起來了，開心O(∩_∩)O~~android

一、項目打包

詳情請看 Nuxt官網webpack

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

第一步、在本地 npm run build,會在.nuxt文件夾下生成dist文件;ios

第二步、把本地文件的.nuxt,static,package.json,nuxt.config.js,這四個文件夾放到服務器目錄文件下，我在服務器上建立了run/www/visneyNuxt路徑，四個文件放到裏面;nginx

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

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

二、Nginx配置

項目進行到如今，在服務器上的項目正常沒有問題，可是當咱們在瀏覽器中輸入http://www.visney.cn/，額，震驚，你並無看到本身想要的結果，(；′⌒`)web

這時候就改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進行守護了

三、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守護，部署亮了會像上面那麼簡單嗎，請聽我細細道來：

移動端項目機票

2、移動端項目部署

一、項目打包

項目打包與PC端一致，請參考PC端部署方法

二、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;
        }
    }
}
複製代碼

二、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
        }
    ]
}
複製代碼

三、 啓動pm2守護

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

OK，項目完成！！

###三、 pm2瀏覽器中使用可視化的窗口

pm2項目成功以後能夠在服務器的瀏覽器上可視化的視圖,能夠在網頁中監控,效果以下：

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

第一步：登陸註冊，我在這裏使用的是Github帳號登陸，以下：

第二步：鏈接本地項目

第三步： 啓動項目， pm2 start process.json,ok,如今能夠看到效果了，以下：

最後

文章到這就要結束了。

PC端GitHub地址

移動端GitHub地址

若是你們以爲這個項目有點意思，歡迎 star。謝謝，O(∩_∩)O~

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程