标签: vercel

我正在尝试将应用程序部署到 Vercel，并在构建时收到此错误

14:13:58.168    Cloning github.com/ChrisB007/moodflics (Branch: main, Commit: 7a2acfe)
14:13:58.575    Cloning completed: 406.06ms
14:13:58.624    Analyzing source code...
14:13:59.946    Installing build runtime...
14:14:03.139    Build runtime installed: 3.193s
14:14:07.055    Build cache not provided
14:14:08.517    Installing dependencies...
14:14:09.142    npm WARN read-shrinkwrap This version of npm is compatible with lockfileVersion@1, but package-lock.json was generated for lockfileVersion@2. I'll try to do my best with it!
14:14:23.664    npm WARN moodflics@0.1.0 No repository field.
14:14:23.676    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules/fsevents):
14:14:23.677    npm WARN notsup …

我正在使用动态图像。在 localhost 上一切正常，但是当我在 vercel 上部署 next.js-app 时，只显示后备图像（默认图像出现 404 错误）。

顺便说一句，当我对图像进行硬编码时，而不是使用动态路径，一切正常。所以我认为问题出在动态路径中的某个地方（？）。

这是相关代码：

function isImageValid(src) {
  let promise = new Promise((resolve) => {
    let img = document.createElement("img");
    img.onerror = () => resolve(false);
    img.onload = () => resolve(true);
    img.src = src;
  });

  return promise;
}

function Img({ src, fallbackSrc, ...rest }) {
  const imgEl = React.useRef(null);
  React.useEffect(() => {
    isImageValid(src).then((isValid) => {
      if (!isValid) {
        imgEl.current.src = fallbackSrc;
      }
    });
  }, [src]);

  return <img {...rest} ref={imgEl} src={src} />;
} 
 
const ItemImage = ({ …

开发一个使用 next-auth 进行身份验证的 next.js 应用程序。当前将 GitHub 设置为唯一的提供者。

在开发中，身份验证工作得很好。

在生产中，单击“使用 GitHub 登录”后，我会被定向到 404。

我 99% 确信这与我在 GitHub OAuth 应用程序中设置的回调 URL 有关。出于开发目的，它设置为 http://localhost:3000/api/auth/callback/github。显然这对于​​已部署的应用程序没有好处，但我不知道将其设置为什么。我尝试了几个不同的 URL，但没有成功。

除了回调 URL 之外，我还需要在代码中设置其他内容才能使其在生产中正常工作吗？

我想知道是否有办法阻止 Vercel 将直接提交自动部署到生产环境。我不介意每次都要单击一个额外的按钮\xe2\x80\x94这可能吗？我看到了忽略的构建步骤文档，但我真的不明白如何使用它，或者它是否是正确的使用方法。

代码

完整的代码库和文件夹结构可以在GitHub中查看

这是 Swagger 相关路由（必须使其成为独立服务器）

// api/v1.ts

import express = require("express");
import swaggerJSDoc = require("swagger-jsdoc");
import swaggerUi = require("swagger-ui-express");
import packageJSON = require("../package.json");
import path = require("path");

const app = express();
app.use(express.json());
app.use(express.static(path.resolve(__dirname, "../", "public")));

const swaggerSpec = swaggerJSDoc({
  swaggerDefinition: some_spec,
  apis: ["api/*"]
});

const cssOpts = some_css_override;

app.use("/api/v1", swaggerUi.serve, swaggerUi.setup(swaggerSpec, cssOpts));

module.exports = app;

问题

当我运行vercel dev（本地主机：3000/api/v1）时，我按预期看到文档：

但是，当我将代码推送到触发vercel build 的分支时，我看到以下内容：

检查控制台，我看到：

DevTools failed to load source map: Could not parse content for https://colormaster-1unjfn63b-lbragile.vercel.app/api/v1/swagger-ui-bundle.js.map: Unexpected token …

我正在创建一个页面，可以在其中概述我的所有笔记/摘要。

笔记的页面是转换为动态文件中使用的 HTML 的 Markdown 文件。
\n\'/note\' 页面是包含一组所有笔记的一页。现在我想实现一个搜索功能来对笔记进行排序。

当我运行npm run dev它时，它会启动本地主机并且一切正常（搜索栏也是如此）。\n但是当我推送到我的 Github 存储库并在 Vercel 上部署时，它会给出 500：内部服务器错误。

在 Vercel 日志中，您可以看到 /note 是服务器端页面，因为它具有“\xce\xbb”符号。

\n

18:40:46.860 \xce\xbb /注释 12.2 kB 104 kB

\n

是router.push("/notes")这个原因造成的还是其他原因？

源代码：https://github.com/Wilmox/portfolio
\nVercel 托管页面：https://portfolio-p3hy5j90k-wilmox.vercel.app/

这也是问题实际发生的 gif：

我希望有一个人可以帮助我 ：）

我的notes/index.js 的代码：

import Head from \'next/head\';\nimport Link from \'next/link\';\nimport styles from \'../../styles/Home.module.css\';\nimport Footer from \'../../components/Footer.js\';\nimport Navigation from \'../../components/Navigation\';\nimport { Rating } from \'@material-ui/core\';\nimport Chip from \'../../components/Chip.js\';\n\nimport …

我正在尝试在 Vercel 上的无服务器功能中使用画布，但遇到了一个错误，我不知道如何解决：

Error: /lib64/libz.so.1: version ZLIB_1.2.9' 未找到（/var/task/api/node_modules/canvas/build/Release/libpng16.so.16 需要）`

我的 package.json 中有这个，但它似乎安装了 zlib 1.2.7：

  "scripts": {
    "vercel-build": "yum install libuuid-devel libmount-devel zlib && cp /lib64/{libuuid,libmount,libblkid,libz}.so.1 node_modules/canvas/build/Release/"
  },

正如我在构建日志中看到的那样zlib-1.2.7-18.amzn2.x86_64 already installed and latest version

我该如何安装 1.2.9？

我正在使用next-i18next模块来提供多语言支持。

我还有一些静态页面和动态页面。两者在本地都工作正常。

我在 vercel 上部署了所有静态页面，在 vercel 上都运行良好。但动态页面在 vercel 上不起作用。它显示该动态页面的 404 页面。

下面是动态页面的代码。（页面/测试页面/[questionId].js）

import { useState, useEffect } from "react";
import {Layout} from "@components/common";
import { useRouter } from 'next/router';
import { useTranslation } from 'next-i18next'
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
import { TestComponent } from '@components/TestComponent'

const TestPage = () => 
{
    const { t } = useTranslation('common')
    const router = useRouter()
    const {questionId} = router.query;
    const [isApiLoaded,setIsApiLoaded] = useState(false)
    
    return (
        <TestComponent 
            t={t}
            isApiLoaded={isApiLoaded}
            setIsApiLoaded={setIsApiLoaded}
        /> …

我正在尝试使用 Vercel next.js 中的新边缘函数，但它在生产中不起作用，总是给出 404 错误。

我按照这个例子做了，但没有任何效果。

也许是因为我使用的是 i18n？

我的_middleware.js文件如下所示：

import {NextResponse } from 'next/server'

export default function middleware(req) {
    const { pathname } = req.nextUrl
    let hostname = req.headers.get('host')


if (
    !pathname.includes('.') && // exclude all files in the public folder
    !pathname.startsWith('/api') // exclude all API routes
) {
    if (
        !hostname.includes('example.vercel.app') &&
        hostname !== 'example.com' &&
        hostname !== 'localhost:3000'
    ) {
        return NextResponse.rewrite(`/_sites/${hostname}${pathname}`)
    }
}
}

在页面下我使用这个结构：

/pages
 /_sites
  [sites]
    index.js

请帮我找到解决方案。

我已经用nodeJS和Express构建了api服务器

然后我使用 CORS 包启用了 CORS

import cors from "cors";
const app = express();
app.use(
  cors({
    origin: "*",
  })
);

维塞尔配置：

import cors from "cors";
const app = express();
app.use(
  cors({
    origin: "*",
  })
);

但是，我在访问vercel上的API服务器时总是出现CORS错误。

Access to XMLHttpRequest at 'https://apiurl/' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

我正在本地测试并设置启用 CORS。上面的代码片段有问题。

请指出这里有什么问题。

谢谢