使用本地 package/dependency 将 Gatsby 部署到 Vercel

Question

我有一个使用本地包的 gatsby 站点，它不是 possible/allowed 使其成为 public。

站点在本地构建良好，但是当我尝试将其部署到 Vercel 上时，它找不到包。我发现了一些相关问题，但到目前为止 none 的解决方案对我有用。

该包位于 Gatsby 的静态文件夹中，该文件夹位于根目录中，并在构建时被复制到 public 文件夹中。在我的 package.json 中，我有以下内容：

"devDependencies": {
    "fslightbox-react": "file:./public/fslightbox-react-pro-1.4.2.tgz",
  },
 "scripts": {
    "install-plugin": "cd public && yarn add fslightbox-react-pro-1.4.2.tgz",
    "build": "yarn install-plugin && gatsby build",
  },

然后在 Vercel 设置中，我使用 yarn build

覆盖构建命令

我尝试了 install-plugin 命令的多种变体并尝试更改路径，但在部署时我不断收到以下错误：

error "./public/fslightbox-react-pro-1.4.2.tgz": Tarball is not in network and can not be located in cache (["/vercel/path0/public/fslightbox-react-pro-1.4.2.tgz","/vercel/.cache/yarn/v6/npm-fslightbox-react-1.4.2-aa6c77ceb2feb8487853163cb9a3d3a3d91ca85f/node_modules/fslightbox-react/.yarn-tarball.tgz"])

我之前使用的是 npm，虽然错误消息略有不同，但基本上也无法在 /vercel/path0/public/...

中找到包

我几乎可以肯定这是一些基本的东西，我只是忽略了一些明显的东西，但在这一点上，我们将不胜感激任何帮助或指点。

解决方案，因此没有人需要仔细阅读所有评论： 不需要在 vercel 中覆盖命令，只需像这样修复安装插件命令：

"install-plugin": "cd static && yarn add file:static/fslightbox-react-pro-1.4.2.tgz",
"build": "yarn install-plugin && gatsby build",

包应该在 static 文件夹中，该文件夹应该位于根目录中

Answer 1

您是否尝试过更改 Vercel 仪表板中的构建命令？

根据他们的文档，您可以 customize your build and deploy command:

在这里，在您的构建命令或安装命令中，您可以添加如下内容：

INSTALL COMMAND: yarn install && yarn install-plugin
BUILD COMMAND: yarn install-plugin && gatsby build

顺便说一下，我刚刚注意到 devDependencies 的位置是：

"fslightbox-react": "file:./public/fslightbox-react-pro-1.4.2.tgz",

/public 文件夹仅在您已经构建项目时存在，这意味着在全新安装（Vercel 所做的）中，它永远不会存在，因为它甚至还没有创建。您正在“破解”此行为，因为您已经在本地构建了项目并且该文件夹已经存在。

如果您在本地运行 a gatsby clean（删除 .cache 和 /public 文件夹），您应该能够在本地重现该问题。尝试使用类似于以下内容的内容将依赖项位置更改为静态文件夹：

"fslightbox-react": "file:./static/fslightbox-react-pro-1.4.2.tgz",

或者直接使用解压后的文件

或者，您可以将依赖项上传到拥有的私有存储库并使用自定义版本，而无需直接使用该文件：

"devDependencies" : {
  "fslightbox-react" : "git+https://[GITHUB_TOKEN]:x-oauth-basic@github.com/[USER]/[YOUR_REPO_URL].git",
}

来源：npm install private github repositories by dependency in package.json

总的来说，最后一种方法是最好的并且不太激进，因为如果您使用静态文件夹，您将将该脚本转换到 public 文件夹，增加一个文件中的包大小，而不是打算这样做。

解决方案

"install-plugin": "cd static && yarn add file:static/fslightbox-react-pro-1.4.2.tgz",
"build": "yarn install-plugin && gatsby build",

使用本地 package/dependency 将 Gatsby 部署到 Vercel

Deploy Gatsby to Vercel with local package/dependency

gatsby

vercel

解决方案