NGINX 切换根路径通过路径参数并运行 Angular 项目

huangapple
go评论84阅读模式
英文:

NGINX switch root by path param and run for angular project

问题

我想要通过第一个URL路径参数来更改根目录。

示例URL为：https://example-domain.com/uuid_1/product/list?mode=card

预期行为是将根目录切换到uuid_1的路径参数，并且其余路径(/product/list?mode=card)应该在Angular项目中运行。

我需要用于此情况的nginx配置。我尝试了一些配置但失败了。

成功场景

  1. 示例 1:
  3. URL: https://example-domain.com/uuid_1
  5. 然后：
  6. 根目录 => /main_folder/uuid_1/angular/dist
  7. 为Angular运行 => /
  1. 示例 2:
  3. URL: https://example-domain.com/uuid_2/product/list?mode=card
  5. 然后：
  6. 根目录 => /main_folder/uuid_2/angular/dist
  7. 为Angular运行 => /product/list?mode=card
  1. 示例 3:
  3. URL: https://example-domain.com/uuid_3/product/edit?id=abc
  5. 然后：
  6. 根目录 => /main_folder/uuid_3/angular/dist
  7. 为Angular运行 => /product/edit?id=abc

服务器文件夹层次结构

  1. - main_folder
  2.   - uuid_1
  3.     - angular_project_dist
  4.       - index.html
  5.       - ...(Angular项目的其余文件) 
  6.   - uuid_2
  7.     - angular_project_dist
  8.       - index.html
  9.       - ...(Angular项目的其余文件) 
  10.   - uuid_3
  11.     - angular_project_dist
  12.       - index.html
  13.       - ...(Angular项目的其余文件) 
  14.   - uuid_4
  15.     - angular_project_dist
  16.       - index.html
  17.       - ...(Angular项目的其余文件)

失败的NGINX配置:

  1. server {
  3. 	server_name example-domain.com;
  5. 	index index.html index.htm;
  7. 	# 阻止访问 .htaccess 文件，如果 Apache 的文档根目录
  8. 	location ~ /\.ht {
  9. 		deny all;
  10. 	}
  12.     location / {
  14.         if ($uri ~* /([^/]+)/(.*)){
  15.             set $project_id $1;
  16.             set $rest_of_uri /$2;
  17.         }
  18.         root /var/www/example-domain.com/$project_id/angular/dist/;
  19.         try_files $rest_of_uri $rest_of_uri/ /index.html;
  20.     }
  21. }

请检查上述Nginx配置是否符合您的要求。

英文:

I want to change the root directory by first URL path param.

The example URL is: https://example-domain.com/uuid_1/product/list?mode=card

Expected behaviour is that the root should be switched to path param of uuid_1. And rest path (/product/list?mode=card) should be run for the angular project.

I need the nginx config for this situation. I tried some config but failed.

Success Scenerios

  1. Example 1:
  3. URL: https://example-domain.com/uuid_1
  5. THEN:
  6. root => /main_folder/uuid_1/angular/dist
  7. run for angular => /
  1. Example 2:
  3. URL: https://example-domain.com/uuid_2/product/list?mode=card
  5. THEN:
  6. root => /main_folder/uuid_2/angular/dist
  7. run for angular => /product/list?mode=card
  1. Example 3:
  3. URL: https://example-domain.com/uuid_3/product/edit?id=abc
  5. THEN:
  6. root => /main_folder/uuid_3/angular/dist
  7. run for angular => /product/edit?id=abc

Server Folder Hierarchy

  1. - main_folder
  2.   - uuid_1
  3.     - angular_project_dist
  4.       - index.html
  5.       - ...(rest_of_files_of_angular_project) 
  6.   - uuid_2
  7.     - angular_project_dist
  8.       - index.html
  9.       - ...(rest_of_files_of_angular_project) 
  10.   - uuid_3
  11.     - angular_project_dist
  12.       - index.html
  13.       - ...(rest_of_files_of_angular_project) 
  14.   - uuid_4
  15.     - angular_project_dist
  16.       - index.html
  17.       - ...(rest_of_files_of_angular_project)

Failed NGINX config:

  1. server {
  3. 	server_name example-domain.com;
  5. 	index index.html index.htm;
  7. 	# deny access to .htaccess files, if Apache's document root
  8. 	location ~ /\.ht {
  9. 		deny all;
  10. 	}
  12.     location / {
  14.         if ($uri ~* /([^/]+)/(.*)){
  15.             set $project_id $1;
  16.             set $rest_of_uri /$2;
  17.         }
  18.         root /var/www/example-domain.com/$project_id/angular/dist/;
  19.         try_files $rest_of_uri $rest_of_uri/ /index.html;
  20.     }
  21. }

答案1

得分: 1

Here is the translation:

"在if...set块之外，你可以使用具有命名捕获的正则表达式位置来创建变量。

例如：

  1. location ~ ^/(?<project_id>[^/]+)(?<rest_of_uri>/.*)$ {
  2.     root /var/www/example-domain.com/$project_id/angular/dist/;
  3.     try_files $rest_of_uri $rest_of_uri/ /index.html =404;
  4. }

如果你想在这个位置内查找index.html，你需要在try_files语句的末尾添加=404，否则Nginx会将其视为重定向并搜索另一个位置来处理请求。请参阅try_files文档。"

英文:

Instead of the if...set block, you could use a regular expression location with named captures to create the variables.

For example:

  1. location ~ ^/(?&lt;project_id&gt;[^/]+)(?&lt;rest_of_uri&gt;/.*)$ {
  2.     root /var/www/example-domain.com/$project_id/angular/dist/;
  3.     try_files $rest_of_uri $rest_of_uri/ /index.html =404;
  4. }

If you want to find index.html within this location you will need to add =404 to the end of the try_files statement, otherwise Nginx will treat it as a redirect and search for another location to process the request. See try_files documentation.

huangapple
  • 本文由 发表于 2023年5月30日 05:46:03
  • 转载请务必保留本文链接：https://go.coder-hub.com/76360480.html
  • nginx
  • nginx-config
  • nginx-location
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定