2. 程式人生 > >【nuxt】伺服器部署步驟

【nuxt】伺服器部署步驟

阿新 • • 發佈：2018-12-10

一. 安裝nodejs
建立檔案目錄

mkdir -p /usr/local/software

進入檔案目錄

cd  /usr/local/software

下載nodeJS

wget https://nodejs.org/dist/v8.9.1/node-v8.9.1-linux-x64.tar.gz

注意：

      想要合適的版本node到 https://nodejs.org/dist/ 下自己查詢 到時候複製連結 wget的時候還稱自己的連結即可

解壓NodeJs檔案

tar -zxvf node-v8.9.1-linux-x64.tar.gz -C ../

為nodejs更名

 mv /usr/local/node-v8.9.1-linux-x64/ /usr/local/node8.9.1 
  

  
    
   
  1. 
    
     
    
    
     
      # 軟連結指向到node npm
     
    
    2. 
   
  2. 
    
     
    
    
     
      ln -
      s /usr/
      local/node8.
      9.1/bin/node  /usr/
      local/bin/node
     
    
    3.  
    
   
  3. 
    
     
    
    
     
      ln -
      s /usr/
      local/node8.
      9.1/bin/npm  /usr/
      local/bin/npm 
     
    
    4.

檢視軟鏈是否成功

ls -al /usr/local/bin

軟連結輸出內容


  
    
   
  1. 
    
     
    
    
     
      [[email protected] bin]# ls -al /usr/
      local/bin
     
    
    2. 
   
  2. 
    
     
    
    
     
      total 
      3428
     
    
     
    
    3. 
   
  3. 
    
     
    
    
     
      drwxr-xr-x   
      2 root root    
      4096 Feb  
      6 
      14:
      09 .
     
    
    4. 
   
  4. 
    
     
    
    
     
      drwxr-xr-x. 
      32 root root    
      4096 Feb  
      6 
      14:
      02 ..
     
    
    5. 
   
  5. 
    
     
    
    
     
      lrwxrwxrwx   
      1 root root      
      29 Feb  
      6 
      14:
      09 node -> /usr/
      local/node8.
      9.1/bin/node
     
    
    6. 
   
  6. 
    
     
    
    
     
      lrwxrwxrwx   
      1 root root      
      28 Feb  
      6 
      14:
      09 npm -> /usr/
      local/node8.
      9.1/bin/npm
     
    
    7.

一: 安裝vue相相關包

如果vue-cli沒有安裝，請安裝vue-cli

npm install -g vue-cli

到專案目錄下

cd /data/www/project/shop/yf_mall_v1.0.5

安裝淘寶景象, 因為在國內用npm安裝會比較慢, 所有我們使用淘寶映象安裝 也就是cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

建立cnpm軟鏈

ln -s /usr/local/node8.9.1/bin/cnpm  /usr/local/bin/cnpm

安裝vue相關元件

cnpm install

檢視是cnpm 是否安裝完成

cnpm -v

輸出內容包括:
node版本
npm版本
cnpm 版本等資訊


  
    
   
  1. 
    
     
    
    
     
      [[email protected] yf_mall_v1.
      0.5]# cnpm -v
     
    
    2. 
   
  2. 
    
     
    
    
     
      [email protected]
      5.2.
      0 (/usr/
      local/node8.
      9.1/lib/node_modules/cnpm/lib/parse_argv.js)
     
    
    3. 
   
  3. 
    
     
    
    
     
      [email protected]
      5.6.
      0 (/usr/
      local/node8.
      9.1/lib/node_modules/cnpm/node_modules/npm/lib/npm.js)
     
    
    4. 
   
  4. 
    
     
    
    
     
      [email protected]
      8.9.
      1 (/usr/
      local/node8.
      9.1/bin/node)
     
    
    5. 
   
  5. 
    
     
    
    
     
      [email protected]
      3.3.
      0 (/usr/
      local/node8.
      9.1/lib/node_modules/cnpm/node_modules/npminstall/lib/
      index.js)
     
    
    6. 
   
  6. 
    
     
    
    
     
      prefix=/usr/
      local/node8.
      9.1 
     
    
    7. 
   
  7. 
    
     
    
    
     
      linux x64 
      3.10.
      0-
      693.5.
      2.el7.x86_64 
     
    
    8. 
   
  8. 
    
     
    
    
     
      registry=https:
      //registry.npm.taobao.org
     
    
    9.

一、安裝npm：
安裝pm2 node程序管理器

進入到yf_mall_v1.0.5目錄下安裝pm2
注(重要): 樓主在其他目錄下安裝全域性pm2 雖能安裝成功 但是執行pm2 list的時間一直失敗 在專案目錄下成功了 所以才到專案目錄下執行安裝pm2命令

cd  /data/www/project/shop/yf_mall_v1.0.5
  
cnpm install -g pm2

安裝資訊如下(最後幾行):


  
    
   
  1. 
    
     
    
    
     
      All packages installed (
      194 packages installed from npm registry, 
      1 packages installed from remote url, used 
      3s, speed 
      2.13MB/s, json 
      173(
      1.43MB), tarball 
      5.17MB)
     
    
    2. 
   
  2. 
    
     
    
    
     
      [[email protected]
      10.1] link /usr/local/node8.
      9.1/bin/[email protected] -> 
      /usr/local
      /node8.9.1/lib
      /node_modules/pm2/bin/pm2
     
    
    3. 
   
  3. 
    
     
    
    
     
      [[email protected]
      10.1] link /usr/local/node8.
      9.1/bin/[email protected] -> 
      /usr/local
      /node8.9.1/lib
      /node_modules/pm2/bin/pm2-dev
     
    
    4. 
   
  4. 
    
     
    
    
     
      [[email protected]
      10.1] link /usr/local/node8.
      9.1/bin/[email protected] -> 
      /usr/local
      /node8.9.1/lib
      /node_modules/pm2/bin/pm2-docker
     
    
    5. 
   
  5. 
    
     
    
    
     
      [[email protected]
      10.1] link /usr/local/node8.
      9.1/bin/[email protected] -> 
      /usr/local
      /node8.9.1/lib
      /node_modules/pm2/bin/pm2-runtime
     
    
    6.

建立軟連結

ln -s /usr/local/node8.9.1/bin/pm2  /usr/local/bin/pm2

Nuxt官方部署教程如下:https://zh.nuxtjs.org/guide/commands

由於我們的環境是本地開發，部署於Linux伺服器，下面開始 打包操作：

需要先後執行以下命令

nuxt build

但是樓主安裝的時候提示


  
    
   
  1. 
    
     
    
    
     
      [[email protected] shop]
      # nuxt build
     
    
    2. 
   
  2. 
    
     
    
    
     
      -bash: nuxt: command 
      not found
     
    
    3.

解決方法如下:
把nuxt自帶的nuxt命令放到專案的要目錄下
執行軟鏈(放到根目錄)命令如下:

 ln -s /data/www/project/shop/yf_mall_v1.0.5/node_modules/nuxt/bin/nuxt /data/www/project/shop/yf_mall_v1.0.5/nuxt
  •  

此時專案目錄為:


  
    
   
  1. 
    
     
    
    
     
      [[email protected] yf_mall_v1.0.5]# ls -al
     
    
    2. 
   
  2. 
    
     
    
    
     
      total 228
     
    
    3. 
   
  3. 
    
     
    
    
     
      drwxr-xr-x   12 root root   4096 Feb  6 19:14 .
     
    
    4. 
   
  4. 
    
     
    
    
     
      drwxr-xr-x    5 root root   4096 Feb  6 12:02 ..
     
    
    5. 
   
  5. 
    
     
    
    
     
      -rw-r--r--    1 root root   1536 Feb  6 12:03 app.html
     
    
    6. 
   
  6. 
    
     
    
    
     
      drwxr-xr-x    4 root root   4096 Feb  6 12:03 assets
     
    
    7. 
   
  7. 
    
     
    
    
     
      drwxr-xr-x    6 root root   4096 Feb  6 12:03 components
     
    
    8. 
   
  8. 
    
     
    
    
     
      -rw-r--r--    1 root root    207 Feb  6 12:03 .editorconfig
     
    
    9. 
   
  9. 
    
     
    
    
     
      -rw-r--r--    1 root root  28623 Feb  6 12:03 element-variables.scss
     
    
    10. 
   
  10. 
    
     
    
    
     
      -rw-r--r--    1 root root  11515 Feb  6 12:03 .eslintrc.js
     
    
    11. 
   
  11. 
    
     
    
    
     
      -rw-r--r--    1 root root     92 Feb  6 12:03 .gitignore
     
    
    12. 
   
  12. 
    
     
    
    
     
      drwxr-xr-x    2 root root   4096 Feb  6 12:03 layouts
     
    
    13. 
   
  13. 
    
     
    
    
     
      drwxr-xr-x    2 root root   4096 Feb  6 12:03 middleware
     
    
    14. 
   
  14. 
    
     
    
    
     
      drwxr-xr-x 1106 root root 114688 Feb  6 14:18 node_modules
     
    
    15. 
   
  15. 
    
     
    
    
     
      lrwxrwxrwx    1 root root     64 Feb  6 19:14 nuxt -> /data/www/project/shop/yf_mall_v1.0.5/node_modules/nuxt/bin/nuxt #樓主新增: 注意此行
     
    
    16. 
   
  16. 
    
     
    
    
     
      -rw-r--r--    1 root root   2950 Feb 23 14:20 nuxt.config.js
     
    
    17. 
   
  17. 
    
     
    
    
     
      -rw-r--r--    1 root root   1150 Feb 23 14:20 package.json
     
    
    18. 
   
  18. 
    
     
    
    
     
      drwxr-xr-x   24 root root   4096 Feb 23 14:20 pages
     
    
    19. 
   
  19. 
    
     
    
    
     
      drwxr-xr-x    2 root root   4096 Feb 23 14:20 plugins
     
    
    20. 
   
  20. 
    
     
    
    
     
      -rw-r--r--    1 root root   2843 Feb 23 14:20 README.md
     
    
    21. 
   
  21. 
    
     
    
    
     
      drwxr-xr-x    9 root root   4096 Feb 23 14:20 static
     
    
    22. 
   
  22. 
    
     
    
    
     
      drwxr-xr-x    2 root root   4096 Feb 23 14:20 store
     
    
    23. 
   
  23. 
    
     
    
    
     
      drwxr-xr-x    4 root root   4096 Feb 23 14:20 .svn
     
    
    24.

注：官方推薦的根目錄package.json配置資訊如下(我自定義埠在8025)：


  
    
   
  1. 
    
     
    
    
     
      {
     
    
    2. 
   
  2. 
    
     
    
    
       
      "name": 
      "hao_de_pc",
     
    
    3. 
   
  3. 
    
     
    
    
       
      "version": 
      "1.0.0",
     
    
    4. 
   
  4. 
    
     
    
    
       
      "description": 
      "hao_de_pc",
     
    
    5. 
   
  5. 
    
     
    
    
       
      "author": 
      "wangpengjie <[email protected]>",
     
    
    6. 
   
  6. 
    
     
    
    
       
      "private": 
      true,
     
    
    7. 
   
  7. 
    
     
    
    
       
      "config": {
     
    
    8. 
   
  8. 
    
     
    
    
         
      "nuxt": {
     
    
    9. 
   
  9. 
    
     
    
    
           
      "host": 
      "127.0.0.1",
     
    
    10. 
   
  10. 
    
     
    
    
           
      "port": 
      "8205"
     
    
    11. 
   
  11. 
    
     
    
    
     
          }
     
    
    12. 
   
  12. 
    
     
    
    
     
        },
     
    
    13. 
   
  13. 
    
     
    
    
       
      "scripts": {
     
    
    14. 
   
  14. 
    
     
    
    
         
      "dev": 
      "nuxt",
     
    
    15. 
   
  15. 
    
     
    
    
         
      "build": 
      "nuxt build && PORT=8205 npm start",
     
    
    16. 
   
  16. 
    
     
    
    
         
      "start": 
      "nuxt start",
     
    
    17. 
   
  17. 
    
     
    
    
         
      "generate": 
      "nuxt generate",
     
    
    18. 
   
  18. 
    
     
    
    
         
      "lint": 
      "eslint --ext .js,.vue --ignore-path .gitignore .",
     
    
    19. 
   
  19. 
    
     
    
    
         
      "precommit": 
      "npm run lint"
     
    
    20. 
   
  20. 
    
     
    
    
     
        },
     
    
    21. 
   
  21. 
    
     
    
    
     
      }
     
    
    22.

OK，將 根目錄的這幾個資料夾都上傳到 伺服器的 nuxt 資料夾（我的話 對應伺服器資料夾為：/data/www/project/shop/yf_mall_v1.0.5）：

再安裝下依賴外掛：


  
    
   
  1. 
    
     
    
    
     
      cd /data/www/project/shop/yf_mall_v1
      .0
      .5
     
    
    2. 
   
  2. 
    
     
    
    
     
      npm install
     
    
    3.

注: 為方便與pm2守護進行結合, 使用更加方便nuxt.js服務端渲染應用部署這樣就完成了
官方先後執行 npm run build 、npm start 即可完成部署。
而我這邊只要執行 npm run build ，其實我只是把兩個合併成一個，並設定了埠以便區別其他應用，避免端口占用！

簡單說一下nuxt命令(來自官方):

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

*1.下面啟動Nuxt專案

npm run start


*2.到專案目錄下用pm2執行啟動Nuxt專案命令

pm2 start npm --name "jsyfShopNuxt" -- run start
  • 首先一點，必須先啟動 nuxt專案，再啟動 pm2 專案才可以

再做apache的逆向代理配置，你想代理幹嘛用的。。就不解釋了，有新的小哥哥小姐姐可以去帖子看：https://www.cnblogs.com/Nouno/p/6029950.html

 

最終你在 v-host 檔案裡寫的配置為：

不加資原始檔夾嗯。。。


  
    
   
  1. 
    
     
    
    
     
      <VirtualHost *:
      80>
     
    
    2. 
   
  2. 
    
     
    
    
     
          ServerAdmin 
      [email protected]qq.com
     
    
    3. 
   
  3. 
    
     
    
    
     
          php_admin_value open_basedir /
      data/www/test.anendbro.com:/tmp:/
      var/tmp:/proc:/
      data/www/
      default/phpmyadmin
     
    
    4. 
   
  4. 
    
     
    
    
     
          ServerName test.anendbro.com
     
    
    5. 
   
  5. 
    
     
    
    
     
          ServerAlias test.anendbro.com
     
    
    6. 
   
  6. 
    
     
    
    
     
          ErrorLog /
      data/wwwlog/test.anendbro.com/error.log
     
    
    7. 
   
  7. 
    
     
    
    
     
          CustomLog /
      data/wwwlog/test.anendbro.com/access.log combined
     
    
    8. 
   
  8. 
    
     
    
    
     	
     
    
    9. 
   
  9. 
    
     
    
    
     
          ProxyRequests On
     
    
    10. 
   
  10. 
    
     
    
    
     	
     
    
    11. 
   
  11. 
    
     
    
    
     
      	ProxyPass / http:
      //localhost:8205/
     
    
    12. 
   
  12. 
    
     
    
    
     
          ProxyPassReverse / http:
      //localhost:8205/
     
    
    13. 
   
  13. 
    
     
    
    
     
      </VirtualHost>
     
    
    14.

 最後幾點補充：

  1. 關於pm2常用命令：

  
    
   
  1. 
    
     
    
    
      
     
    
    2. 
   
  2. 
    
     
    
    
     
      pm2 list 
      # 檢視當前正在執行的程序
     
    
    3. 
   
  3. 
    
     
    
    
     
      pm2 start all  
      # 啟動所有應用
     
    
    4. 
   
  4. 
    
     
    
    
     
      pm2 restart all  
      # 重啟所有應用
     
    
    5. 
   
  5. 
    
     
    
    
     
      pm2 stop all 
      # 停止所有的應用程式
     
    
    6. 
   
  6. 
    
     
    
    
     
      pm2 
      delete all 
      # 關閉並刪除所有應用
     
    
    7. 
   
  7. 
    
     
    
    
     
      pm2 logs 
      # 控制檯顯示所有日誌
     
    
    8. 
   
  8. 
    
     
    
    
      
     
    
    9. 
   
  9. 
    
     
    
    
     
      pm2 start 
      0  
      # 啟動 id為 0的指定應用程式
     
    
    10. 
   
  10. 
    
     
    
    
     
      pm2 restart 
      0  
      # 重啟 id為 0的指定應用程式
     
    
    11. 
   
  11. 
    
     
    
    
     
      pm2 stop 
      0 
      # 停止 id為 0的指定應用程式
     
    
    12. 
   
  12. 
    
     
    
    
     
      pm2 
      delete 
      0 
      # 刪除 id為 0的指定應用程式
     
    
    13. 
   
  13. 
    
     
    
    
      
     
    
    14. 
   
  14. 
    
     
    
    
     
      pm2 logs 
      0 
      # 控制檯顯示編號為0的日誌
     
    
    15. 
   
  15. 
    
     
    
    
     
      pm2 show 
      0  
      # 檢視執行編號為0的程序
     
    
    16. 
   
  16. 
    
     
    
    
     
      pm2 monit jsyfShopNuxt 
      # 監控名稱為jsyfShopNuxt的程序
     
    
    17.

注:
pm2官網： http://pm2.keymetrics.io/
pm2-github: https://github.com/Unitech/pm2

2. 全部設定完畢，但你的所有檔案都顯示502 錯誤：

   你看下你的代理設定是不是設定完全了。。。我當時錯誤是因為

 如圖第一個設定錯了丟了 / 這玩意導致全部無法訪問。。。

OK以上設定完畢，如果還有

nuxt問題可以加這個群 大佬解答632394867

vue問題可以加這個群 大佬解答115658205

【以上有一半以上轉載於：https://blog.csdn.net/hanwuqia0370/article/details/79269161 感謝 貼主 的方法】

一. 安裝nodejs
建立檔案目錄

相關推薦

【nuxt】伺服器部署步驟

一. 安裝nodejs 建立檔案目錄 mkdir -p /usr/local/software 進入檔案目錄 cd /usr/local/software 下載nodeJS wget https://nodejs.org/

【docker】docker部署spring boot專案在伺服器上

IDE:idea 工具:docker spring boot:2.0.1 ======================================== 簡單記錄一下流程，以供參考： 第一步：首先得有一個spring boot的專案【集成了jpa+mybatis的spring boot 例子：ht

【二】SCCM部署規劃

sccm 規劃 sccm 本篇主要對SCCM的前期規劃進行討論。 1.Active Directory整合 在ConfigMgr部署中，可以選擇CofigMgr和現有的Active Directory進行整合，既然整合與否並非強制性的，那與Active Directo

大數據【二】HDFS部署及文件讀寫（包含eclipse hadoop配置）

throw 大數據 我的電腦 ssh 生效 manager 方法 slave .sh 一　　原理闡述 1‘　　DFS 　　　　分布式文件系統（即DFS，Distributed File System），指文件系統管理的物理存儲資源不一定直接連接在本地節點上，而是通過計算機網

【SpringMVC】---搭建框架步驟

enc dex xmlns 4.3 base isp quest bind 得到 項目如下 一、加入 Jar 包 部分jar包可以不導（第4、9、11個可以不導入） 二、在 Web.xml 中配置 DispatcherServlet <?xml v

【轉載】Docker部署nginx並修改配置文件

scrip pan eve 部署 keepaliv proxy format gin 一模一樣 docker 部署個nginx docker run --name nginx-health-web-pc -d -p 6800:80 -v /usr/

【nmon】伺服器效能監控工具nmon安裝和使用

目錄 一、檢視linux系統伺服器版本資訊 ​二、nmon下載 三、nmon安裝 ​四、安裝成功校檢 五、測試監控 六、監控資料採集 一、檢視linux系統伺服器版本資訊 （Linux檢視版本當前作業系統核心資訊）：uname -a （Linux檢視當

基於【SpringBoot】的微服務【Jenkins】自動化部署

基於【SpringBoot】的微服務【Jenkins】自動化部署 　 一、關於自動化部署 　　關於自動化部署的優點，我就不在這裡贅述了；只要想想手工打包、上傳、部署、重啟的種種，就會有很多場景歷歷在目，相信經歷過的朋友都能體會其中的酸甜苦辣； 而一旦到了大型專案，比如所微服務化之後的

【手記】VSTO部署中的坑

區域網部署，客戶機安裝時報【部署清單簽名的證書或其位置不受信任】： 在【Internet 屬性】裡（可執行inetcpl.cpl開啟），把伺服器內網IP加進【受信任站點】就好，不用管excel信任中心。 XP等nt5.x系統安裝時報【VSTOInstaller.exe無法定位程式輸入點Ge

【Nginx】Nginx部署安裝

環境：CentOS7.2 x64 一、安裝及執行nginx 1、下載&解壓： cd ~/app wget https://nginx.org/download/nginx-1.14.0.t

【Linux】伺服器安全使用

背景 Root許可權氾濫，操作水平不同，員工對各伺服器熟悉程度不同，會使伺服器存在很大不穩定性，以及操作安全隱患 一、手動管理賬號和許可權 將不同職能員工分為不同的組建立賬號 賬號分為三種級別：初級

【紀念】伺服器被刪除了

因為沒錢付伺服器年費，所以一直都是月付，然後每個月伺服器商會發來簡訊告訴我要繳費了。 但是這個月沒有收到簡訊，然後最近忙成狗了也沒有怎麼看郵箱，於是就把這事兒給忘了。直到今天同事說你網站打不開了啊，上去一看，過期太久給自動刪除了。 影響 管理員說資料真的刪除了！ 於是就真的找不回來了

【cordova】cordova安裝步驟（windows）

原文: 【cordova】cordova安裝步驟（windows） 官方安裝文件地址： http://cordova.apache.org/#getstarted 1 安裝nodejs（已經安裝了的請跳過這一步） nodejs官網 https://nodejs

【Nginx】Nginx部署Windows設定80埠

　　Nginx部署在Windows埠做負載均衡時，配置其監聽80埠。Start時會發現無法啟動，原因為其80埠已被佔用。 即使IIS中關閉全部80埠的網站後訪問此80端口出現的是404，而非網路斷開連線。可以推斷出IIS或相關容器一直監聽 導致Nginx無法啟動的。通過CMD->netstat -a

【Nginx】Nginx部署Windows設置80端口

沒有 art 手動 網站 被占用 斷開連接 導致 目前 stat 　　Nginx部署在Windows端口做負載均衡時，配置其監聽80端口。Start時會發現無法啟動，原因為其80端口已被占用。 即使IIS中關閉全部80端口的網站後訪問此80端口出現的是404，而非網絡斷開連

【WCF】IIS釋出步驟

進入控制元件面板-程式和功能-啟用或關閉Windows功能 設定Internet Information Services，完全勾選（或者勾選上“全球資訊網服務-常見HTTP功能-HTTP錯誤”，“全球資訊網服務-常見HTTP功能-效能功能”以及“全球資訊網服務-應用程式開發功

【Tomcat】伺服器配置虛擬目錄

當我們的網站內容越來越多時，存放網站資原始檔的地方的空間不夠用了，這時候為了能擴充套件並且不影響原有網站的訪問，我們可以來配置虛擬目錄。 虛擬目錄所對映存放的內容可以與原有網站的內容不在同位置（磁碟、伺服器主機等）但使用者在訪問網站時，卻感覺不到任何區別。 在Tom

【Redis】redis部署

環境：CentOS7.2 x64 一、安裝及執行redis 1、下載&解壓： cd ~/app wget http://download.redis.io/releases/redis-4.0.11.tar.gz tar -zxvf redis-4.0.11.t

【SpringBoot】熱部署

spring-boot-devtools 方式 pom檔案 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring

【整理】weblogic下發步驟使用命令列代替控制檯介面

專案要求專案下發時不用進控制檯介面操作，直接用命令列（頭都大了） 一開始只知道 ./startWebLogic.sh ./stopNodeManager.sh這怎麼能解決啊。。。啊。。。 整個下發過程： 1.備份、停止、刪除原有部署專案 2.停止受管服務節點 3.重新部署、