如何使用 AWS Amplify 在子路径上部署

Question

我有一个 React 应用程序，我想通过

/troubleshoot

访问它

我在我的 React 应用程序中进行了设置

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import App from "App";

// Material Dashboard 2 React Context Provider
import { MaterialUIControllerProvider } from "context";

ReactDOM.render(
  <BrowserRouter basename="/troubleshoot">
    <MaterialUIControllerProvider>
      <App />
    </MaterialUIControllerProvider>
  </BrowserRouter>,
  document.getElementById("root")
);

和package.json

{
  "name": "test",
  "version": "2.1.0",
  "private": true,
  "homepage": "/troubleshoot",

我已将其部署在 AWS Amplify 上

但我发现它不起作用

我能够使用 nginx docker 镜像来完成这项工作

我的 docker 文件。我将构建放入故障排除文件夹中

FROM nginx:latest
COPY ./nginx/default.conf /etc/nginx/conf.d/default.conf
RUN rm -rf /usr/share/nginx/html
RUN mkdir -p /usr/share/nginx/html/troubleshoot
COPY ./build/ /usr/share/nginx/html/troubleshoot/
RUN ls -alR /usr/share/nginx/html

和我的 nginxconf

server {
  
  listen       80;
  
  location /troubleshoot {
      root   /usr/share/nginx/html;
      index  index.html index.htm;
      try_files $uri $uri/ /troubleshoot/index.html;
  }
}

并且一切都与上面的 docker docker 设置一起工作。

但我现在想使用 AWS Amplify 进行设置。我做不到

如果我想直接访问

/

但不想访问

/troubleshoot

，则 AWS amplify 可以工作

Answer 1

通过放大重定向来解决

要使用 Amplify 重定向解决此问题，请转到 Amplify UI 中的“重写和重定向”部分。添加一条规则以将所有内容从

/troubleshoot/*

重定向到

/*

。以下是 JSON 格式的规则示例：

[
    {
        "source": "/troubleshooting/<*>",
        "target": "/<*>",
        "status": "200",
        "condition": null
    }
]

您可以将此规则用于一般目的，但如果您需要指定 404 页面或特定重定向，则可能需要不同的规则。您可以在此链接中找到有关使用 Amplify 进行重定向的语法和建议的更多信息。

用nginx解决

如果您将 nginx 与特定 Dockerfile 结合使用，则可以使用

redirect

指令在 .conf 配置文件中配置重定向。这是一个例子：

location ~ ^/troubleshooting(.*) {
    root /usr/share/nginx/html;
    try_files $1 $1/ /index.html =404;
}

为了更好地理解这个方法，你可以参考这个问题。