OpenResty配置静态网站

结城 Nginx 13 次阅读 1172 字 发布于 2026-05-03 预计阅读时间: 5 分钟

这是使用OpenResty用于代理个人网站的例子。

这里放置到server的服务器块内部。

    location /api/ {
        proxy_pass http://localhost:4430/; 
        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; 
        rewrite ^/api/(.*)$ /$1 break; 
    }

在1panle创建相关的静态网站，选择好网站的静态文件目录，然后在相应的网站配置中添加以下反向代理配置，需要根据实际的服务端运行数据进行调整。

在创建网站的地方只需要选择静态网站，不要选择反向代理，反向代理是需要代理服务端已经有的服务，如果你只是一个纯粹的静态网页，然后通过ajax请求实际后端的话，就只需要布置一个静态网站就可以了。

静态网站部署默认情况下nginx会配置路由为自己的路由，去寻找自己路径下面的html文件，我们需要修改默认配置以用来支持nginx找不到路径后将路由交给vue路由接管。

有关nginx的简单教程在这里

名称说明
轮询默认。
weight权重分配，默认为 1。权重越高，被分配的客户端请求就越多。
ip_hash依据 IP 分配，这样每个访客可以固定访问一个后端服务。
least_conn依据最少连接，把请求优先分配给连接数少的后端服务。
url_hash依据 URL 分配，这样相同的 URL 会被分配到同一个后端服务。
fair依据响应时间，响应时间短的服务将会被优先分配。

在使用 Vue 和 Nginx 部署时，如果通过 Nginx 反向代理后访问页面时刷新或直接访问非根路径（如 /about​）出现 404​ 错误，这是因为 Vue 使用的是前端路由（如 vue-router​ 的 history​ 模式），而 Nginx 默认会尝试直接加载对应的文件路径（如 /about​ 会被解释为 /about/index.html），但该文件并不存在。

为了解决这个问题，需要在 Nginx 中配置路由重定向，让所有未找到的路径都重定向到 index.html，由 Vue 的前端路由接管。

示例 Nginx 配置

server {
    listen 80;
    server_name your-domain.com;

    # 指定 Vue 项目构建后的文件路径
    root /path/to/your/vue/dist;

    index index.html;

    # 静态文件处理
    location / {
        try_files $uri /index.html;
    }

    # 可选：处理静态资源（如 JS、CSS、图片等）
    location ~* \.(?:ico|css|js|gif|jpe?g|png|woff2?|eot|ttf|svg|otf|webp)$ {
        expires 6M;
        access_log off;
        add_header Cache-Control "public";
    }

    # 可选：防止访问隐藏文件
    location ~ /\. {
        deny all;
    }

    # 可选：gzip 压缩
    gzip on;
    gzip_types text/plain application/javascript text/css application/json application/xml;
    gzip_min_length 1000;
}

配置说明

  1. ​​try_files $uri /index.html;​
  • 这行配置的作用是：当请求的资源（如 /about​）不存在时，Nginx 会将请求重定向到 index.html，由 Vue 的前端路由接管。
  1. 缓存静态资源
  • 配置静态资源的缓存策略（如 expires 6M），以提高加载速度。
  1. 隐藏文件保护
  • 防止用户访问隐藏文件（如 .env​ 或 .git）。
  1. gzip 压缩
  • 启用 gzip 压缩以减少传输数据量。

步骤总结

  1. 确保 Vue 项目已经使用 npm run build​ 或 yarn build​ 生成了生产环境的 dist 文件夹。
  2. 将 dist 文件夹部署到服务器上的指定目录。
  3. 修改 Nginx 配置文件，添加 try_files 配置。
  4. 重启 Nginx 服务：
   sudo nginx -s reload

验证

部署完成后：

  1. 访问 http://your-domain.com 应该加载首页。
  2. 直接访问 http://your-domain.com/about​ 或刷新页面，不会再出现 404 错误，页面会正常加载。

如果问题依然存在，请确认：

  • Vue 项目是否正确打包。
  • Nginx 配置文件是否生效。
  • Nginx 是否有权限访问 dist 目录。

目前使用的nginx配置

# api接口请求代理
    location /api/ {
        proxy_pass http://localhost:4430/; 
        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; 
        rewrite ^/api/(.*)$ /$1 break; 
    }
    # 静态文件处理
    location / {
        try_files $uri /index.html;
    }

    # 可选：处理静态资源（如 JS、CSS、图片等）
    location ~* \.(?:ico|css|js|gif|jpe?g|png|woff2?|eot|ttf|svg|otf|webp)$ {
        expires 6M;
        access_log off;
        add_header Cache-Control "public";
    }

    # 可选：防止访问隐藏文件
    location ~ /\. {
        deny all;
    }

     # 拦截常见爬虫的 User-Agent
    set $block_crawler 0;
    if ($http_user_agent ~* (AhrefsBot|SemrushBot|MJ12bot|DotBot|Baiduspider|YandexBot|Sogou|360Spider|spider|crawler)) {
        set $block_crawler 1;
    }
    if ($block_crawler = 1) {
        return 403;
    }

    # 可选：gzip 压缩
    gzip on;
    gzip_types text/plain application/javascript text/css application/json application/xml;
    gzip_min_length 1000;