使用本地包/依赖项将 Gatsby 部署到 Vercel

Question

我有一个使用本地包的 gatsby 站点，并且不可能/不允许将其公开。

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

该包位于 Gatsby 的静态文件夹中，该文件夹位于根目录中，并在构建时复制到公共文件夹中。在我的 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 命令：

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

包应该在应该位于根目录的静态文件夹中

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 所做的）中，它永远不会存在，因为它甚至还没有创建。您正在“攻击”这种行为，因为您已经在本地构建了您的项目并且该文件夹已经存在。

如果您在本地运行 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

总的来说，最后一种方法是最好的，也不太激进，因为如果您使用静态文件夹，您将将该脚本转换为公共文件夹，从而增加文件中不打算这样做的包大小。< /p>

---

解决方案

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