Vue

前端頁面部署方式的全面解析與比較

整理部署方式：

  1. FTP上傳： 這是最傳統的方式，將你的前端檔案（HTML，CSS，JavaScript等）上傳到你的web伺服器。大多數的web主機提供FTP訪問，這也是小型專案的快速部署方式。
  2. 使用Git： 如果你的伺服器支援Git，你可以設定一個Git倉庫，並使用**git push**指令部署你的前端頁面。這種方式方便版本控制，也支援多人協作。
  3. 使用SSH：可以透過SSH將你的檔案推送到你的伺服器，這個過程可以透過腳本自動化。
  4. 使用雲端服務： 像AWS S3，Google Cloud Storage，Azure Storage等服務可以託管靜態網站，通常它們提供了很好的效能和安全性。
  5. 使用專門的前端部署服務： 服務如Netlify，Vercel等，這些平台通常提供一站式服務，包括版本控制，持續集成，HTTPS和CDN等。
  6. 使用CDN服務： 這些服務可以將你的網站部署到全球的伺服器上，加速存取速度。例如，Cloudflare，Akamai等。
  7. 容器化部署： 使用如Docker等工具，將前端套用容器化，然後在Kubernetes等容器編排平台進行部署。

Nginx

1.將你的前端程式碼上傳到伺服器上的某個目錄，例如 /var/www/mywebsite。
2.建立Nginx設定檔:Nginx的設定檔通常位於 /etc/nginx/ 目錄下，特定路徑可能會因伺服器的不同而略有不同。
在該目錄下，你通常會找到一個叫做 sites-available 的目錄
在這個目錄下，你可以為每個網站建立一個設定檔。例如，你可以建立一個新的設定文件，命名為 mywebsite：sudo nano /etc/nginx/sites-available/mywebsite

1
2
3
4
5
6
7
8
9
10
server {
 listen 80;
 server_name your_domain_or_IP;

 location / {
 root /var/www/mywebsite;
 index index.html;
 try_files $uri $uri/ =404;
 }
}

應該替換為你的程式碼所在的目錄:/var/www/mywebsite
應該替換為你的網域或IP位址:your_domain_or_IP
listen:此配置意味著Nginx將監聽80端口，並為所有指向你的網域或IP位址的請求提供服務
Nginx將傳回404狀態碼:如果請求的檔案不存在，Nginx將傳回404狀態碼。

4.啟用網站
建立並編輯完設定檔後，你需要建立一個到 sites-enabled 目錄的符號連結來啟用你的網站：

1
sudo ln -s /etc/nginx/sites-available/mywebsite /etc/nginx/sites-enabled/

5.檢查設定檔
重啟Nginx之前，檢查你的設定檔有沒有語法錯誤:

1
sudo nginx -t

如果沒有錯誤，你會看到類似這樣的輸出：

1
nginx: configuration file /etc/nginx/nginx.conf test is successful

6.重啟Nginx
需要重啟Nginx來讓你的設定生效：

1
sudo service nginx restart

前端頁面應該可以透過你的網域名稱或IP位址存取了。
注意，如果你的伺服器有防火牆，你可能需要設定防火牆來允許HTTP和HTTPS流量。

更完整的 Nginx 配置

首先，你需要為你的網域取得一個SSL證書，你可以使用Let’s Encrypt提供的免費證書。

設定檔可能如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
server {
    listen 80;
    server_name your_domain_or_IP;
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl;

    server_name your_domain_or_IP;

    ssl_certificate /etc/letsencrypt/live/your_domain_or_IP/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/your_domain_or_IP/privkey.pem;

    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_prefer_server_ciphers on;
    ssl_ciphers "EECDH+AESGCM:EDH+AESGCM:AES256+EECDH:AES256+EDH";

    location / {
        root /var/www/mywebsite;
        index index.html;
        try_files $uri $uri/ =404;
    }

    location ~* \\.(jpg|jpeg|png|gif|ico|css|js|pdf)$ {
        expires 30d;
    }

    gzip on;
    gzip_vary on;
    gzip_min_length 10240;
    gzip_proxied expired no-cache no-store private auth;
    gzip_types text/plain text/css text/xml text/javascript application/x-javascript application/xml;
    gzip_disable "MSIE [1-6]\\.";
}
  • 第一個 server 區塊監聽80個端口，也就是HTTP的預設端口，然後把所有的請求重定向到HTTPS。
  • 第二個 server 區塊監聽443端口，也就是HTTPS的預設端口。
  • ssl_certificate 和 ssl_certificate_key 指向你的SSL憑證和私鑰的位置。
  • ssl_protocols 和 ssl_ciphers 定義了你伺服器支援的SSL協定和加密套件。
  • location / 區塊定義了你的網站的根目錄和預設文件，以及如何處理不存在的路徑。
  • location ~* \\.(jpg|jpeg|png|gif|ico|css|js|pdf)$ 區塊定義了對於靜態檔案如圖片，CSS文件，JavaScript檔案等，客戶端應該快取30天。
  • gzip 相關的行啟用了gzip壓縮，並定義了哪些類型的檔案應該被壓縮。

這只是一個基本的配置範例，你可以根據你的需求進行修改。
有許多其他的選項可以配置，例如負載平衡，
反向代理，HTTP/2支援等。

負載平衡

使用 Nginx 來做負載平衡的實作非常直接。以下是一個簡單的範例來說明如何設定 Nginx 來實現對多個伺服器的負載平衡。

假設你有兩個或更多的應用程式伺服器實例，它們分別託管在不同的 IP 位址或主機名稱下**。你可以在 Nginx 設定檔中設定一個 upstream 模組，然後在 server 模組中將請求反向代理到這個 upstream。 **

首先，你需要在你的 Nginx 設定檔（一般位於 /etc/nginx/nginx.conf 或 /etc/nginx/conf.d/ 目錄下的某個檔案）中定義一個 upstream。例如：

1
2
3
4
5
6
7
http {
    upstream myapp {
        server app1.example.com;
        server app2.example.com;
    }
    ...
}

在這個例子中，myapp 是你定義的 upstream 的名字，app1.example.com 和 app2.example.com 是你的應用程式伺服器的位址。

然後，在 server 模組中，你可以將來自客戶端的請求代理到這個 upstream：

1
2
3
4
5
6
7
server {
    listen 80;

    location / {
        proxy_pass <http://myapp>;
    }
}

在這個範例中，所有來自客戶端的 HTTP 請求（即 :80 連接埠的請求）都會被 Nginx 轉送到定義的 upstream（即 myapp）。 Nginx 預設使用輪詢（round-robin）演算法將請求指派給 upstream 中的伺服器，你也可以設定其他的負載平衡演算法，如最少連接（least_conn）或 IP 雜湊（ip_hash）。

這樣，Nginx 就會把請求平衡地轉送到你的各個應用程式伺服器實例上，實現負載平衡。注意這個配置對於前端靜態頁面來說可能不太必要，因為靜態頁面通常不會對伺服器產生太大負載，但對於動態應用來說是非常有用的。

Docker

使用 Docker 來部署前端應用程式是一種很好的方式，因為它可以將你的應用程式及其依賴項打包到一個獨立、可移植的容器中，可以在任何安裝了 Docker 的環境中運行。

以下是使用 Docker 部署一個基本的靜態前端頁面的步驟：

1.建立 Dockerfile

在你的專案根目錄中，建立一個名為”Dockerfile”的檔案。這個檔案是用來定義你的 Docker 映像的，可以看作是一個自動化的腳本。以下是一個簡單的 Dockerfile 範例，其中使用了官方的 Nginx 映像來部署靜態頁面：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 使用官方的 Nginx 镜像
FROM nginx:latest

# 删除 Nginx 默认的静态资源
RUN rm -rf /usr/share/nginx/html/*

# 将你的静态资源复制到 Nginx 的静态资源目录下
COPY ./dist /usr/share/nginx/html

# 暴露 80 端口
EXPOSE 80

# 启动 Nginx
CMD ["nginx", "-g", "daemon off;"]

2.建置 Docker 映像

在專案根目錄下，你可以使用 docker build 指令來根據 Dockerfile 建立 Docker 映像：

1
docker build -t my-frontend-app .

其中，-t my-frontend-app 參數用於為您的 Docker 映像命名，. 指定了 Dockerfile 所在的位置（在這裡，它在目前目錄下）。

3：运行 Docker 容器

你现在可以使用 docker run 命令来运行你刚刚构建的 Docker 镜像：

1
docker run -p 80:80 -d my-frontend-app

參數指定了將容器的 80 端口映射到宿主機的 80 端口，d 參數指定了以後台模式運行容器。

現在你應該可以在你的瀏覽器中透過造訪 http://localhost 來查看你的前端頁面了。

如果你的前端應用更複雜，或者需要與後端服務進行交互，你可能需要進行更複雜的配置，例如使用 Docker Compose 來管理多個服務，或使用環境變數來配置你的應用程式。

負載平衡
如果你的前端應用使用 Docker 部署，有多種方式可以實現負載平衡。以下是一些常見的方法：

  1. 使用 Docker Swarm：

Docker Swarm 是 Docker 的原生叢集管理和編排工具。在 Swarm 叢集中，你可以建立一個服務，然後指定服務的副本數量。 Swarm 會自動在叢集的節點間分配這些副本，實現負載平衡。

以下是一個簡單的 Docker Swarm 服務建立指令：

1
docker service create --name my-frontend-app --publish 80:80 --replicas 3 my-frontend-app

在這個命令中，–name my-frontend-app 指定了服務的名稱，–publish 80:80 指定了將容器的80 端口映射到宿主機的80 端口，–replicas 3 指定了創建3 個副本，my-frontend-app 是你的Docker 映像的名稱。

2.使用 Kubernetes：
Kubernetes 是一個更強大的容器編排平台，它也支援負載平衡。在 Kubernetes 中，你可以建立一個 Deployment 和一個 Service，Kubernetes 會自動為你的應用提供負載平衡。

以下是一個簡單的 Kubernetes Deployment 和 Service 的定義：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
apiVersion: apps/v1
kind: Deployment
metadata:
  name: my-frontend-app
spec:
  replicas: 3
  selector:
    matchLabels:
      app: my-frontend-app
  template:
    metadata:
      labels:
        app: my-frontend-app
    spec:
      containers:
      - name: my-frontend-app
        image: my-frontend-app
        ports:
        - containerPort: 80

---

apiVersion: v1
kind: Service
metadata:
  name: my-frontend-app
spec:
  type: LoadBalancer
  ports:
  - port: 80
  selector:
    app: my-frontend-app

在這個定義中，Deployment 建立了 3 個前端應用的副本，Service 為這些副本提供了一個負載平衡器。

  1. 使用雲端服務提供者的負載平衡器：

如果你的應用程式部署在雲端環境（如 AWS, Google Cloud, Azure 等），你可以使用雲端服務供應商的負載平衡服務。這些負載平衡服務通常提供了更強大的功能，例如自動擴縮容，健康檢查，SSL 終結等。

以上都是實現 Docker 負載平衡的一些方式，你可以根據你的特定需求和環境選擇最合適的方式。

PM2

PM2 主要用於管理和維護 Node.js 應用，但你也可以使用 PM2 來運行一個靜態伺服器，用來部署你的前端頁面。
透過使用像 http-server 這樣的簡單的靜態檔案伺服器來完成
1.安装 http-server

1
npm install http-server --save

2.建立一個 PM2 的設定文件
你需要建立一個 PM2 的設定文件，例如 ecosystem.config.js。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
module.exports = {
 apps: [
 {
    name: 'frontend',
    script: 'node_modules/http-server/bin/http-server',
    args: './dist -p 8080', // 這裡的 ./dist 是你的前端頁面的路徑，-p 8080 是你要監聽的端口
    instances: 'max',
    exec_mode: 'cluster',
    watch: true, // 如果你希望在檔案改變時自動重新啟動伺服器，可以設定 watch 為 true
    env: {
    NODE_ENV: 'production',
 },
 },
 ],
};

3.使用 PM2 啟動你的前端頁面
利用 PM2 提供的特性，例如應用的自動重啟和負載平衡。

1
pm2 start ecosystem.config.js

http-server 是一個非常簡單的靜態檔案伺服器，
如果你需要更複雜的功能（例如SSL、反向代理等），你可能需要考慮使用更強大的伺服器軟體，例如Nginx 或Express .js。

技術 優點 缺點 出現時間 適合場景 不適合場景
Nginx 輕量級，高效能，可作為反向代理和負載平衡器 需要手動配置和管理 2004年 任何需要靜態頁面服務的項目 需要動態伺服器端渲染的項目
PM2 Serve 可以使用PM2來管理靜態服務程序 不包含反向代理或負載平衡器 PM2:2014年 需簡單的靜態檔案服務 需複雜的HTTP請求處理或負載平衡的項目
Docker 容器化，跨平台 需要手動管理容器和映像 2013年 任何需要跨平台部署或以統一方式部署多種服務的項目
小規模或簡單的項目可能，
引入不必要的複雜性
GitHub Pages 免費，支援自訂域名，整合GitHub 功能有限，僅支援靜態內容 2008 年 簡單的個人、專案或組織頁面 複雜的、需要後端的應用
Netlify/Vercel 提供自動部署，函數即服務等 免費版有一些限制 Netlify:2014年,
Vercel:2015年		 靜態網站和Jamstack應用 大規模、複雜的後端應用

Node express Vercel部署
參考資料