如何將打包好的靜態網頁部署至伺服器

Ksig發表於2018-12-18
網頁伺服器

在完成書查查應用之後，需要將應用部署至伺服器，記錄一下部署的過。

本地成功執行

首先是執行 npm run build 打包應用，打包好的頁面是無法直接訪問的，具體原因在這裡：Vue-cli 部署。

大概內容是：

dist 目錄需要啟動一個 HTTP 伺服器來訪問 (除非你已經將 baseUrl 配置為了一個相對的值)，所以以 file:// 協議直接開啟 dist/index.html 是不會工作的。在本地預覽生產環境構建最簡單的方式就是使用一個 Node.js 靜態檔案伺服器。

所以我需要使用 Node.js 起一個靜態伺服器，我這裡用的是 Express，方法： 利用 Express 託管靜態檔案。

只需要很簡單的幾行程式碼：

const express = require('express');
const app = express();
app.use(express.static('./dist'));
const port = 3003;
app.listen(port, function (err) { 
 if (err) { 
   console.log(err);
    return;
  
  }  console.log('Listening at http://localhost:' + port + '\n');

  });
複製程式碼

然後執行 node filename.js 服務就成功起來啦。這時候訪問 localhost:3003 就可以訪問部署好的靜態頁面。

下一步是上傳程式碼到伺服器。

上傳檔案到伺服器

我使用的是 scp 命令上傳檔案到伺服器上的，具體程式碼是：

scp -r ./dist root@120.79.162.***:/home/library-book-search/web/// 將 dist 資料夾 上傳至 120.79... 的 /home/library-book/search/web/ 中複製程式碼
  • scp：上傳命令
  • -r：上傳檔案是資料夾
  • ./dist：本地需要上傳檔案的位置
  • root@120…：使用 root 使用者名稱登入遠端伺服器 120….
  • :/home/library-book-search/web/：表示儲存在遠端伺服器上的地址

回車之後輸入伺服器密碼，就可以等待檔案上傳成功了。

在伺服器上起服務

首先進入到專案所在的資料夾，然後和在本地一樣，執行 node filename.js 這樣服務就成功跑起來了，然後訪問發現並不 ok，搗鼓半天之後阿里雲這個埠並不是預設開放的，所以需要在阿里雲的控制檯把這臺伺服器需要使用的埠開啟。

成功開啟埠之後終於訪問成功了，於是美滋滋的關掉命令列，準備和朋友炫耀一番，結果打臉了，又訪問失敗了。再一頓思考之後發現，當關閉命令列介面之後，node 服務會自動關閉。所以我們的服務就撲街了。

這個時候就需要使用 PM2 來維護我的服務啦，在服務起上全域性安裝 PM2 之後，pm2 start filename.js ，專案就真正的完美啦。這下關掉命令列介面也不用擔心任務爆炸了。

來源：https://juejin.im/post/5c1872a16fb9a049be5d6a01

相關文章