# 在項(xiàng)目根目錄下執(zhí)行
npm run build
# 或者
yarn build

dist/
├── css/
├── js/
├── img/
├── favicon.ico
└── index.html  <-- 入口文件

# CentOS
sudo yum install epel-release
sudo yum install nginx

# Ubuntu
sudo apt update
sudo apt install nginx

# 啟動并設(shè)置開機(jī)自啟
sudo systemctl start nginx
sudo systemctl enable nginx

server {
    # 監(jiān)聽端口，HTTP 默認(rèn)為 80
    listen       80;
    # 服務(wù)器域名或 IP
    server_name  www.example.com;

    # 日志路徑（建議配置，方便排錯）
    access_log  /var/log/nginx/my-app.access.log;
    error_log   /var/log/nginx/my-app.error.log;

    # 核心配置：靜態(tài)資源映射
    location / {
        # 指定靜態(tài)資源文件的根目錄
        # 這里對應(yīng)你上傳 dist 文件夾的絕對路徑
        root   /usr/share/nginx/html/my-app;
        
        # 指定默認(rèn)首頁
        index  index.html index.htm;
    }
}

nginx -t   # 檢查語法是否正確
nginx -s reload # 重載配置

server {
    listen       80;
    server_name  www.example.com;
    root   /usr/share/nginx/html/my-app;
    index  index.html;

    location / {
        # 核心指令 try_files
        # 含義：嘗試按照順序訪問文件
        # 1. $uri: 找有沒有對應(yīng)的具體文件（比如 style.css）
        # 2. $uri/: 找有沒有對應(yīng)的目錄
        # 3. /index.html: 如果前兩個都找不到，無條件重定向到 index.html
        try_files $uri $uri/ /index.html;
    }
}

server {
    # ... 省略前面的配置 ...

    # 匹配所有以 /api/ 開頭的請求
    location /api/ {
        # 后端服務(wù)地址
        # 注意：結(jié)尾是否有斜杠 '/' 區(qū)別很大，下面詳細(xì)說明
        proxy_pass http://192.168.1.100:8080/;
        
        # 代理設(shè)置（標(biāo)準(zhǔn)配置，直接復(fù)制即可）
        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;

        # 可選：如果后端接口響應(yīng)慢，可以增加超時時間
        proxy_connect_timeout 60s;
        proxy_read_timeout 60s;
    }
}

server {
    # ... 基礎(chǔ)配置 ...

    # --- 開啟 Gzip 壓縮 ---
    gzip on;
    # 啟用 gzip 壓縮的最小文件，小于設(shè)置值的文件將不會壓縮
    gzip_min_length 1k;
    # gzip 壓縮級別，1-9，數(shù)字越大壓縮的越好，也越占用CPU時間
    gzip_comp_level 6;
    # 進(jìn)行壓縮的文件類型
    gzip_types text/plain text/css text/javascript application/json application/javascript application/x-javascript application/xml;
    # 是否在http header中添加Vary: Accept-Encoding，建議開啟
    gzip_vary on;

    # --- 瀏覽器緩存策略 ---
    
    # 1. 針對 index.html：永遠(yuǎn)不緩存
    # 因?yàn)?index.html 引用了帶 hash 的 js/css，如果它被緩存了，發(fā)版后用戶將無法加載新資源
    location = /index.html {
        add_header Cache-Control "no-cache, no-store, must-revalidate";
        add_header Pragma "no-cache";
        add_header Expires "0";
        # 這里需要重新指定 root，或者利用外層的 root 配置
        try_files $uri $uri/ =404; 
    }

    # 2. 針對靜態(tài)資源（JS/CSS/圖片）：設(shè)置超長緩存
    # Webpack/Vite 打包后的文件名都帶 hash (e.g., app.a1b2c3d4.js)
    # 文件內(nèi)容變了 hash 才會變，所以可以放心設(shè)置永久緩存
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
        expires 1y; # 緩存一年
        add_header Cache-Control "public, no-transform";
        access_log off; # 靜態(tài)資源訪問不記錄日志，減少磁盤 I/O
    }

    # 其他配置...
}

# --- 第一階段：構(gòu)建階段 ---
# 使用 Node 鏡像打包
FROM node:18-alpine as build-stage

# 設(shè)置工作目錄
WORKDIR /app

# 先復(fù)制 package.json 安裝依賴（利用 Docker 緩存層）
COPY package*.json ./
RUN npm install --registry=https://registry.npmmirror.com

# 復(fù)制源代碼并構(gòu)建
COPY . .
RUN npm run build

# --- 第二階段：生產(chǎn)環(huán)境 Nginx ---
FROM nginx:stable-alpine as production-stage

# 復(fù)制第一階段構(gòu)建好的 dist 目錄到 Nginx 默認(rèn)目錄
# 注意：Vite 默認(rèn)打包目錄是 dist，如果是 create-react-app 可能是 build
COPY --from=build-stage /app/dist /usr/share/nginx/html

# 復(fù)制自定義的 Nginx 配置文件（見下文 7.2）
COPY nginx.conf /etc/nginx/conf.d/default.conf

# 暴露端口
EXPOSE 80

# 啟動 Nginx，daemon off 保證容器不退出
CMD ["nginx", "-g", "daemon off;"]

server {
    listen       80;
    server_name  localhost; # Docker 內(nèi)部通常用 localhost 即可

    # 開啟 gzip
    gzip on;
    gzip_min_length 1k;
    gzip_comp_level 6;
    gzip_types text/plain text/css text/javascript application/json application/javascript application/x-javascript application/xml;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        # 解決 Router History 模式 404
        try_files $uri $uri/ /index.html;
    }

    # 接口代理
    location /api/ {
        # 注意：在 Docker 中，如果后端也在 Docker 里，這里寫后端容器的服務(wù)名
        # 如果后端在宿主機(jī)，可以使用 host.docker.internal (Mac/Win) 或 宿主機(jī)真實(shí) IP
        proxy_pass http://backend-service:8080/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

# 1. 構(gòu)建鏡像
docker build -t my-frontend-app:v1 .

# 2. 運(yùn)行容器
# -d 后臺運(yùn)行
# -p 80:80 將宿主機(jī)的 80 端口映射到容器的 80 端口
docker run -d -p 80:80 --name my-frontend my-frontend-app:v1

# /etc/nginx/conf.d/frontend.conf

server {
    # 1. 端口與域名
    listen       80;
    server_name  www.example.com;
    
    # 2. 根目錄設(shè)置
    root   /usr/share/nginx/html/dist;
    index  index.html;

    # 3. 日志設(shè)置
    access_log  /var/log/nginx/host.access.log  main;
    error_log   /var/log/nginx/host.error.log  warn;

    # 4. Gzip 壓縮優(yōu)化
    gzip on;
    gzip_static on; # 如果存在 .gz 文件直接使用，不現(xiàn)場壓縮
    gzip_min_length 1k;
    gzip_buffers 4 16k;
    gzip_comp_level 6;
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    gzip_vary on;
    gzip_disable "MSIE [1-6]\.";

    # 5. 主應(yīng)用路由 (SPA 支持)
    location / {
        # 解決單頁應(yīng)用 History 模式刷新 404 問題
        try_files $uri $uri/ /index.html;
        
        # 針對 index.html 設(shè)置協(xié)商緩存或不緩存
        add_header Cache-Control "no-cache, no-store, must-revalidate";
    }

    # 6. 靜態(tài)資源長緩存
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 30d;
        add_header Cache-Control "public, no-transform";
        access_log off;
    }

    # 7. 反向代理接口
    location /api/ {
        # 假設(shè)后端接口地址
        proxy_pass http://127.0.0.1:8080/api/;
        
        # 傳遞真實(shí) IP
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        
        # 支持 WebSocket (如果需要)
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }

    # 8. 錯誤頁面處理
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}