1

我有一个带有 react-snap 的反应应用程序，可以在 ec2 实例上正常工作。

实例上的 nginx 配置看起来像

server {
        root /var/www/xxx.yyy.com;
        index index.html index.htm index.nginx-debian.html;

        server_name xxx.yyy.com www.xxx.yyy.com;

        location / {
                try_files $uri $uri/ /200.html$is_args$args;
        }
}

我最近将所有内容移植到 aws amplify。使用 SPA 的默认重写规则，所有页面都可以正常加载，但社交爬虫无法爬取页面以获取元信息。

AWS 为 SPA 放大默认重定向和重写规则

[
    {
        "source": "</^[^.]+$|\\\\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>",
        "target": "/200.html",
        "status": "200",
        "condition": null
    }
]

我还注意到，在 ec2 实例上，所有 url 都有一个试用斜线，而它在 aws amplify 中丢失了？

我尝试了几种不同的配置，如果我在源代码中添加 /

/</^[^.]+$|\\\\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>

社交爬虫工作，缺少的斜杠也出现在页面上，但某些页面（如 404）在导航栏上没有 Route 链接抛出：

Error>
<Code>AccessDenied</Code>
<Message>Access Denied</Message>
<RequestId>XXXXXXX</RequestId>
<HostId>XXXXXXXXXXXXXX</HostId>
</Error>

有人使用 AWS 放大进行 react-snap 吗？我不精通重写规则，所以任何帮助表示赞赏。

这是我的构建文件在放大时的样子：

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - '# This installs Chrome on any RHEL/CentOS/Amazon Linux variant.'
        - curl https://intoli.com/install-google-chrome.sh | bash
        - npm ci
    build:
      commands:
        - npm run build
    postbuild:
      commands:
        - react-snap
  artifacts:
    baseDirectory: build
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*
      - /opt/google/**/*

在 Package.json 我有


"reactSnap": {
    "puppeteerArgs": [
      "--no-sandbox",
      "--disable-setuid-sandbox"
    ],
    "puppeteerExecutablePath": "/opt/google/chrome/google-chrome"
  },
"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "postbuild": "react-snap"
  },
4

0 回答 0