整理部署方式：
FTP上傳： 這是最傳統的方式，將你的前端檔案（HTML，CSS，JavaScript等）上傳到你的web伺服器。大多數的web主機提供FTP訪問，這也是小型專案的快速部署方式。使用Git： 如果你的伺服器支援Git，你可以設定一個Git倉庫，並使用**git push**指令部署你的前端頁面。這種方式方便版本控制，也支援多人協作。使用SSH： 可以透過SSH將你的檔案推送到你的伺服器，這個過程可以透過腳本自動化。使用雲端服務： 像AWS S3，Google Cloud Storage，Azure Storage等服務可以託管靜態網站，通常它們提供了很好的效能和安全性。使用專門的前端部署服務： 服務如Netlify，Vercel等，這些平台通常提供一站式服務，包括版本控制，持續集成，HTTPS和CDN等。使用CDN服務： 這些服務可以將你的網站部署到全球的伺服器上，加速存取速度。例如，Cloudflare，Akamai等。容器化部署： 使用如Docker等工具，將前端套用容器化，然後在Kubernetes等容器編排平台進行部署。
Nginx 1.將你的前端程式碼上傳到伺服器上的某個目錄，例如 /var/www/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_IPlisten: 此配置意味著Nginx將監聽80端口，並為所有指向你的網域或IP位址的請求提供服務Nginx將傳回404狀態碼: 如果請求的檔案不存在，Nginx將傳回404狀態碼。
4.啟用網站
1 sudo ln -s /etc/nginx/sites-available/mywebsite /etc/nginx/sites-enabled/
5.檢查設定檔
如果沒有錯誤，你會看到類似這樣的輸出：
1 nginx: configuration file /etc/nginx/nginx.conf test is successful
6.重啟Nginx
1 sudo service nginx restart
前端頁面應該可以透過你的網域名稱或IP位址存取了。
更完整的 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壓縮，並定義了哪些類型的檔案應該被壓縮。
這只是一個基本的配置範例，你可以根據你的需求進行修改。
負載平衡 使用 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 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 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 為這些副本提供了一個負載平衡器。
使用雲端服務提供者的負載平衡器：
如果你的應用程式部署在雲端環境（如 AWS, Google Cloud, Azure 等），你可以使用雲端服務供應商的負載平衡服務。這些負載平衡服務通常提供了更強大的功能，例如自動擴縮容，健康檢查，SSL 終結等。
以上都是實現 Docker 負載平衡的一些方式，你可以根據你的特定需求和環境選擇最合適的方式。
PM2 PM2 主要用於管理和維護 Node.js 應用，但你也可以使用 PM2 來運行一個靜態伺服器，用來部署你的前端頁面。
1 npm install http-server --save
2.建立一個 PM2 的設定文件
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 啟動你的前端頁面
1 pm2 start ecosystem.config.js
http-server 是一個非常簡單的靜態檔案伺服器，
技術
優點
缺點
出現時間
適合場景
不適合場景
Nginx
輕量級，高效能，可作為反向代理和負載平衡器
需要手動配置和管理
2004年
任何需要靜態頁面服務的項目
需要動態伺服器端渲染的項目
PM2 Serve
可以使用PM2來管理靜態服務程序
不包含反向代理或負載平衡器
PM2:2014年
需簡單的靜態檔案服務
需複雜的HTTP請求處理或負載平衡的項目
Docker
容器化，跨平台
需要手動管理容器和映像
2013年
任何需要跨平台部署或以統一方式部署多種服務的項目
小規模或簡單的項目可能，
引入不必要的複雜性
GitHub
Pages 免費，支援自訂域名，整合GitHub
功能有限，僅支援靜態內容
2008 年
簡單的個人、專案或組織頁面
複雜的、需要後端的應用
Netlify/Vercel
提供自動部署，函數即服務等
免費版有一些限制
Netlify:2014年,
靜態網站和Jamstack應用
大規模、複雜的後端應用
Node express Vercel部署 參考資料
