标签: vercel

我不能这样做既可以当正确处理CORS问题PATCH/ POST/PUT从浏览器发送一个请求，Authorization一个头Bearer token（这个工程的浏览器和正确外GET的请求）在现在时代周报无服务器。

如果有帮助，我将Auth0用于授权端。

这是我的now.json标题部分，我为这些尝试了很多组合，但在浏览器中都没有成功。

1. 我尝试使用 npmcors包但没有成功
2. 试图添加routes在now.json
3. 尝试使用在无服务器功能的顶部设置标题 res.addHeader()
4. 还尝试OPTIONS手动处理请求执行此变体：

最后，这是我得到的错误

Access to XMLHttpRequest at 'https://api.example.org/api/users' from origin 'https://example.org' has been blocked by CORS policy: 
Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

不知道我错了什么或如何正确处理这个问题。

我用 vite.js 做了一个 React 构建。在本地主机上进行生产和测试时，一切正常。但是，当我部署到 Netlify 或 vercel 时，无法通过直接输入 URL 来访问我使用 React-router 创建的路由，而只能通过使用应用程序内部的链接从主页（“/”）访问。

如果我单击应用程序中的路线链接，则路线正在工作，但如果我直接输入网址（例如：mypage/about），则会收到 404 错误。

我检查了 vercel 支持，他们说配置中可能缺少重定向，例如默认情况下由 create-react-app 设置的。在CRA中它看起来像这样

{
  "redirects: [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

在浏览完 vite.js 文档后，我找不到任何有关如何在 vite 中设置重定向的提示。

希望你们都玩得开心。我正在开发一个简单的 NextJs 应用程序，我想在其中包含多个子域。我正在 vercel 上部署应用程序。

我的应用程序所做的是它有一个简单的文本区域，您可以在其中编写 MDX，单击“发布”按钮，它将将该 MDX 保存到 firebase firestore 中。文本区域下方显示了之前发布的所有页面的列表。

应用程序呈现所有页面的列表，例如随机生成的页面名称作为子域，而实际域稍后出现，如下所示。

a-mdx-page.mydomain.app

当我打开该 URL 时，它将从 firestore 获取页面 MDX 并使用 next-mdx-remote 包序列化和渲染 MDX。使用 next-mdx-remote 包的原因是我们可以在 MDX 中添加 React 组件，并且它可以像普通 React 组件一样渲染。我已经有一个自定义域，因为在 vercel 免费部署中，您无法在免费子域之上拥有子域。

在 localhost 上一切正常，一切都正常，但问题是当我在 Vercel 上部署代码并导航到子域时，它在网站上显示 ERROR 500，并在日志中显示以下错误。

[GET] /   21:21:03:30

2021-10-24T16:21:04.018Z    8e52d5da-ff1f-4840-a09b-199233834a5d    ERROR   Error: The package "esbuild-linux-64" could not be found, and is needed by esbuild.
If you are installing esbuild with npm, make sure that you don't specify the
"--no-optional" flag. The "optionalDependencies" package.json feature …

由于 Playwright 的 Node.js 版本贬值，我在 Vercel 上的构建开始失败：

错误：Node.js 版本 12.x 已弃用。2022 年 8 月 9 日或之后创建的部署将无法构建。请在项目设置中将 Node.js 版本设置为 16.x 以使用 Node.js 16。此更改是上游基础设施提供商 (AWS) 做出的决定的结果。

其次是：

错误 playwright@1.22.1：引擎“节点”与此模块不兼容。预期版本“>=14”。出现“12.22.9”错误，发现不兼容的模块。

有没有办法更新 Playwright 的内置 Node.js 版本？

在本地没问题（已知警告并且 CSS 渲染良好），但在 Vercel 上我的 Remix 应用程序收到此错误：

Hydration 失败，因为初始 UI 与服务器上呈现的内容不匹配。

业务逻辑运行良好，但 CSS 完全损坏。

2022 年 6 月 26 日 15:50 更新

我从头开始一个新项目，并逐一添加依赖项，并在每一步中部署到 Vercel。没有错误。样式化的组件渲染良好。所以依赖关系不是问题。

然后，我开始通过加载器从数据库中逐段获取数据，并将它们一一呈现在样式组件中。始终破坏 CSS 并产生错误的一件事是在渲染之前将日期时间对象转换为字符串：

const DateTimeSpan = styled.span`
  font-size: 1rem;
`;

const hr = now.getHours();
const min = now.getMinutes();

<DateTimeSpan>
  {`${hr}:${min}`}
</DateTimeSpan>

奇怪的是，只有当我将其格式化为仅渲染时间时，它才会中断。有了日期，就可以了：

const yr = now.getFullYear();
const mth = now.getMonth();
const dd = now.getDate();

<DateTimeSpan>
  {`${yr}-${mth}-${dd}`}
<DateTimeSpan>

我无法解释这一点。

更新于 2022 年 7 月 2 日 21:55

使用上面相同的最简单的项目，我和朋友已经确定，当我们尝试渲染hours时，具有样式组件的 CSS 会中断，即：

const hr = now.getHours();

<DateTimeSpan> …

我正在将 Vercel 部署与 NextJS 应用程序一起使用。当我推送到 master 时，部署会自动运行，但我不想将密钥存储在 GitHub 中。我的无服务器功能依赖于我的数据库。在本地运行时，我可以简单地使用 Google 的默认身份验证凭据，但在部署到 Vercel 时这是不可能的。因此，我创建了一个服务帐户以使服务器能够访问。

如何加载服务帐户凭据而不将其密钥本身推送到 GitHub？

• 我尝试按照本期所述添加密钥，但这不起作用。

• 据我所知，在 Vercel 中设置环境变量没有帮助，因为Google 环境变量需要路径/JSON 文件（而不是简单的文本）。

我有一个 nextjs 项目，:client其参数代表客户端，如下所示：

domain.com/:client

而且我有多个客户......所以我需要重写：

:client.domain.com->domain.com/:client

例如对于客户：

• google.domain.com -> 域名.com/google
• netflix.domain.com -> 域名.com/netflix

...

在同一个项目内。

有办法做到吗？

我想使用 AWS CDK 在 AWS 上部署 NextJS 进行 POC，并且正在寻找选项。在 NextJS 文档中，它说我们只需创建一个实例并运行npm run build && npm start，它就会为我们启动服务。然而，这并不是最优化的部署方式。

Vercel 以尽可能最优化的方式部署它：

我如何使用 AWS 做同样的事情？如何通过 Cloudfront CDN 提供静态资产和页面，以及如何通过 Lambda 或 ECS 提供服务器端呈现的页面和 API？是否有我可以遵循的分步指南来拆分相同的构建文件？

我探索过的其他选择

• AWS Amplify：由于它是一项高级服务，我觉得自己做这一切会便宜很多，并且在 CDK 中给我更大的灵活性（我不确定 Amplify 在幕后如何工作以在 S3 + 上部署 nextjs 资产） Cloudfront + Lambda 堆栈）
• 无服务器框架：有一个插件可以部署nextjs。但是，我想完全控制部署，并且不想依赖任何外部框架。想要使用 AWS CDK 在本地完成此操作。

任何使用 AWS CDK 本地执行此操作的指示都会有所帮助。谢谢。

我想我在这里造成了某种混乱。

根据文档，如果我想要页面的服务器端渲染（SSR），我导出异步函数：

getServerSideProps

但如果我这样做，我就无法构建在本地运行或现在 Zeit now 运行的项目。如果我尝试构建或部署我得到：

页面错误 /_error:getServerSideProps无法导出页面。在此处查看更多信息： https: //err.sh/next.js/gssp-export

错误提供的链接表示我无法导出。但我使用了下面文档中的示例：

import React from "react"

export async function getServerSideProps() {
        return { props: {  } }
}

function Page({ data }) {
    // Render data...
}

export default Page

我必须在某处更改某些配置吗？

如何防止构建这个静态页面？

我非常喜欢 Next.js 的增量静态再生。

但是，我正在寻找一种根据需要强制重新生成静态页面的方法。理想情况下，通过一个命令，当我的源数据库中的数据发生变化时，我可以通过 API 调用触发该命令。

这个想法是在每次数据更改后只重新生成每个页面一次。我可以通过在重新验证间隔后获取目标页面来强制执行 ISR 页面的重新生成，但我正在寻找一种方法，在数据更改之前不冗余地重新生成它们。

任何想法是否可行以及如何？:-)