Buy Me a Coffee

如何用 Next.js、.NET Core 和 Nginx 打造一個酷炫的全端專案

嘿！你是不是想打造一個現代又高效的全端應用，但又不想被一堆技術細節搞瘋？這篇文章就是為你而寫！我們將用 Docker 容器，把 Next.js 前端、.NET Core 後端和 Nginx 反向代理打包在一起，實現「一站式」的部署體驗。

快速導覽

  1. 為什麼選這些技術？
  2. 快速建置流程
  3. 效能調校小秘訣
  4. Nginx 避坑指南

Github 專案：https://github.com/greateyin/next-js-dotnet-nginx-all-in-docker

為什麼選這些技術？

技術清單與優勢

技術為什麼選它？
Next.jsServer-Side Rendering（SSR）讓 SEO 友好；開發速度超快！
.NET Core企業級解決方案，性能穩定，支援跨平台。
Nginx反向代理、快取和負載平衡一把罩。

技術架構概覽

這裡是一張簡單的架構圖：

stateDiagram-v2
    state "Next.js (3000)" as NextJS
    state "Nginx (80)" as Nginx
    state ".NET Core API (8080)" as DotNetAPI

    [*] --> NextJS
    NextJS --> Nginx : 前端請求
    Nginx --> DotNetAPI : 代理請求
    DotNetAPI --> [*]

快速建置流程

Dockerfile：多階段建置

# 前端建置
FROM node:20.18-slim AS frontend-builder
WORKDIR /frontend
COPY frontend/ ./
RUN npm install && npm run build

# 後端建置
FROM mcr.microsoft.com/dotnet/sdk:8.0 AS backend-builder
WORKDIR /src
COPY backend/ ./
RUN dotnet publish -c Release -o /app/publish

# 運行階段
FROM mcr.microsoft.com/dotnet/aspnet:8.0 AS runner
WORKDIR /app
COPY --from=frontend-builder /frontend/.next ./frontend/.next
COPY --from=backend-builder /app/publish ./backend/
CMD ["/app/start.sh"]

啟動腳本

#!/bin/sh
cd /app/frontend && npm start &
cd /app/backend && dotnet backend.dll &
nginx -g "daemon off;"

效能調校小秘訣

Docker 映像優化

  1. 多階段建置：減少映像大小，提升建置速度。
  2. 清理無用的暫存檔：用 rm -rf 移除不必要的檔案。
  3. 輕量化映像：用 slim 版 Node.js 和 .NET SDK。

Nginx 設定調校

http {
    gzip on;
    gzip_types text/plain text/css application/json application/javascript;

    proxy_cache_path /var/cache/nginx levels=1:2 keys_zone=cache_zone:10m;
    server {
        location / {
            proxy_pass http://frontend:3000;
            proxy_cache cache_zone;
        }
        location /api {
            proxy_pass http://backend:8080;
            proxy_cache cache_zone;
        }
    }
}

Nginx 避坑指南

路由配置問題

在後端路由配置中：

location /api/ {
    proxy_pass http://127.0.0.1:8080/;
}

這個配置會把 /api/data 轉發為 /data，但實際應保留 /api 前綴。應修改為：

location /api/ {
    proxy_pass http://127.0.0.1:8080;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
}

請求頭設定

添加必要的請求頭配置：

proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;

錯誤處理優化

更詳細的錯誤日誌配置：

error_log /var/log/nginx/error.log warn;
access_log /var/log/nginx/access.log combined;

location = /404.html {
    default_type text/html;
    return 404 '<html><body><h1>404 Not Found</h1></body></html>';
}

透過以上調整，你的 Nginx 設定將更穩定，並且能有效解決常見的 404 錯誤與請求轉發問題。

用以上方法，打造一個穩定高效的全端應用再也不是夢！