Nginx搭建前端本地预览环境的完整步骤教学

worker_processes 1;       # 启动的 worker 数量

events {
    worker_connections 1024;  # 每个 worker 最大连接数
}

http {
    include /opt/homebrew/etc/nginx/mime.types;   # 识别常见文件类型
    default_type application/octet-stream;

    sendfile on;              # 高效传输文件
    keepalive_timeout 65;     # 长连接超时时间

    # 日志文件路径
    access_log /Users/luoluqi/Desktop/ngnix-server/logs/access.log;
    error_log  /Users/luoluqi/Desktop/ngnix-server/logs/error.log warn;

    server {
        listen 8080;                               # 监听端口
        server_name localhost;                     # 本地访问域名

        root /Users/luoluqi/Desktop/blockify-ui/docs-dist; # 前端打包目录
        index index.html;

        # 单页面应用路由处理
        location / {
            try_files $uri $uri/ /index.html;
        }

        # 静态资源缓存
        location ~* .(js|css|png|jpg|jpeg|gif|svg|ico|woff2?|ttf|eot)$ {
            expires 30d;
            add_header Cache-Control "public";
        }

        # 禁止访问隐藏文件
        location ~ /. {
            deny all;
        }
    }
}

#!/bin/bash
BASE_DIR=$(cd "$(dirname "$0")"; pwd)
NGINX_CONF="$BASE_DIR/nginx.conf"

case "$1" in
  start)
    echo "Starting Nginx..."
    nginx -c "$NGINX_CONF"
    ;;
  reload)
    echo "Reloading Nginx configuration..."
    nginx -s reload
    ;;
  stop)
    echo "Stopping Nginx..."
    nginx -s stop
    ;;
  *)
    echo "Usage: ./nginx.sh {start|reload|stop}"
    exit 1
    ;;
esac

"scripts": {
  "nginx:start": "./nginx.sh start",
  "nginx:reload": "./nginx.sh reload",
  "nginx:stop": "./nginx.sh stop"
}

npm run nginx:start
npm run nginx:reload
npm run nginx:stop