如何在单击按钮时在 nginx 中的多个页面中重定向

Question

我有一个使用 TypeScript 创建的包含多个页面（登录、注册、忘记密码等）的 Web 应用程序。 我想创建这样的配置文件，当用户点击登录页面上的提交按钮时，它应该将他们带到主页，或者如果他们点击忘记密码，它应该将他们带到忘记密码页面。我如何在 nginx 中实现这个场景。

我进行了研究，但找不到相关文档或博客。

附上我的示例 nginx.conf 供您参考。这个 Conf 文件只有所有这些页面的位置配置。

worker_processes  1;
events {
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    server {
        listen       80;
        server_name  _;
        root   html/webconsole/WebConsole/src;

        location / {
            index  index.html index.htm;
        }
        location /register {
            alias  html/webconsole/WebConsole/src/app/register/;
            index register.component.html register.component.htm;
        }
        location /register-confirm {
            alias  html/webconsole/WebConsole/src/app/register-confirm/;
            index register-confirm.component.html register-confirm.component.htm;
        }
        location /login {
            alias  html/webconsole/WebConsole/src/app/login/;
            index login.component.html login.component.htm;
        }
        location /forget-pwd {
            alias  html/webconsole/WebConsole/src/app/forget-pwd/;
            index forget-pwd.component.html forget-pwd.component.htm;
        }
        location /resend {
            alias  html/webconsole/WebConsole/src/app/resend/;
            index resend.component.html resend.component.htm;
        }
        
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

让我知道如何才能达到我的要求。

提前致谢

Answer 1

我居然找到了答案！因为我正在使用 Angular 应用程序。我需要安装 node.js & npm & 需要运行 ng build 来获取我的代码包 & 使用该包我可以为 nginx 提供服务

后续步骤：

1. 安装 Nodejs&npm
2. 为节点包执行 npm 安装
3. 在我的源目录中安装 Angular cli 并运行 ng build 命令

Answer 2

你可以使用try_files指令：

root html/webconsole/WebConsole/src;
location / {
    index index.html index.htm;
    try_files $uri $uri/ /app$uri$uri.component.html /app$uri$uri.component.htm =404;
}

try_files 指令的每个参数，除了最后一个被视为 URI 的参数。因此对于http://example.com/register 请求，nginx 将采用/register 部分并检查以下文件是否存在（请记住，$uri 变量等于/register）：

• 为第一个参数$uri-html/webconsole/WebConsole/src/register文件；
• 对于第二个参数$uri/ - html/webconsole/WebConsole/src/register/index.html 和html/webconsole/WebConsole/src/register/index.htm 文件（您被声明为索引文件的文件）；
• 对于第三个参数/app$uri$uri.component.html（每次出现$uri 都替换为/register）-html/webconsole/WebConsole/src/app/register/register.component.html 文件；
• 最后是html/webconsole/WebConsole/src/app/register/register.component.htm 文件。

如果以上文件都没有找到，nginx会返回HTTP 404 Not found，由第五个=404参数指定。

还有一件事要提到。每一次这样的检查都会导致stat UNIX 系统调用。为了稍微减少服务器工作量，我建议删除未使用的文件扩展名 - 仅保留 .html 或 .htm 变体，具体取决于您的实际文件扩展名。例如，

root html/webconsole/WebConsole/src;
location / {
    index index.html;
    try_files $uri $uri/ /app$uri$uri.component.html =404;
}

此配置将产生不超过 3 个stat 系统调用（与第一个配置版本的 5 个stat 调用相比）。