如何配置Nginx实现通过/appname路径访问S3代理的Angular应用？

要实现通过https://domainname/appname访问Angular应用并正确加载所有资源，需要同时调整Nginx配置和Angular应用的构建参数，具体步骤如下：

1. 调整Nginx配置 #

修改你的nginx.conf，新增针对/appname路径的匹配规则，确保请求能正确转发到S3并处理Angular的前端路由：

server {
    listen 80;
    server_name <servername>.com;
    resolver 8.8.8.8 valid=30s;
    index index.html;
    gzip_types text/plain application/xml application/x-javascript text/css application/json text/javascript;

    # 优先处理/appname路径的请求
    location ^~ /appname {
        set $S3BUCKET "<bucketnamepassedinhere>.s3.amazonaws.com";
        proxy_buffering        off;
        proxy_ignore_headers   "Set-Cookie";
        proxy_hide_header      x-amz-id-2;
        proxy_hide_header      x-amz-request-id;
        proxy_hide_header      x-amz-meta-s3cmd-attrs;
        proxy_hide_header      Set-Cookie;
        proxy_set_header       Host $S3BUCKET;
        proxy_set_header       Connection "";
        proxy_intercept_errors on;

        # 重写路径：去掉/appname前缀后转发到S3
        rewrite ^/appname/(.*)$ /$1 break;
        # 直接访问/appname时，转发到S3的index.html
        rewrite ^/appname$ /index.html break;

        proxy_pass https://$S3BUCKET;
    }

    # 保留原有根路径的处理规则（如果仍需通过根路径访问）
    location ~* ^/(.*) {
        set $S3BUCKET "<bucketnamepassedinhere>.s3.amazonaws.com";
        proxy_buffering        off;
        proxy_ignore_headers   "Set-Cookie";
        proxy_hide_header      x-amz-id-2;
        proxy_hide_header      x-amz-request-id;
        proxy_hide_header      x-amz-meta-s3cmd-attrs;
        proxy_hide_header      Set-Cookie;
        proxy_set_header       Host $S3BUCKET;
        proxy_set_header       Connection "";
        proxy_intercept_errors on;
        proxy_pass https://$S3BUCKET/$1;
        break;
    }
}

配置关键点说明 #

• location ^~ /appname：使用^~确保该规则优先于正则匹配的location，避免请求被其他规则拦截
• 两条rewrite规则：
  • 处理带后缀的请求（如/appname/main.js），去掉/appname前缀后转发到S3对应的文件
  • 处理直接访问/appname的请求，转发到S3的index.html作为Angular应用的入口
• 保留原有根路径规则：如果不需要通过根路径访问，可以删除该location块

2. 调整Angular应用构建参数 #

Angular应用默认从根路径加载资源，部署到子路径时必须指定base-href，否则会出现资源加载404的问题。构建时执行以下命令：

ng build --base-href /appname/

将构建后的所有文件上传到S3桶中，确保文件结构与本地构建产物一致。

内容的提问来源于stack exchange，提问作者stonewalker747