英文:
Standalone Next.js server returns 404 for static content unless next start is called at least once
问题
我试图将以下项目部署到生产环境：https://github.com/saleor/apps
涉及的子模块：https://github.com/saleor/apps/tree/main/apps/slack
以下是我正在执行的步骤。
- cd /apps/slack
- pnpm install
- pmpm build（这将运行graphql-codegen && next build）
我在next.config.js中设置了 output: "standalone"
问题是，当我尝试运行独立服务器时：
node .next/standalone/apps/slack/server.js
我会收到404错误：
直到我执行以下操作：
- pnpm start（运行next start）
- 打开浏览器并转到
localhost:3000 - 终止 pnpm start
然后404错误消失了... 即使在运行 node .next/standalone/apps/slack/server.js 时也是如此。
我之所以询问，是因为这似乎与Next.js有关，而不是应用本身？但我对Next.js或Node开发不熟悉，所以不确定。
对我来说这是一个问题，因为我想制作一个Docker镜像。但我在将这个工作流转化为Dockerfile时遇到了问题。
编辑：
我尝试使用https://github.com/vercel/next.js/tree/canary/examples/with-docker 中的Dockerfile。
但是他们在构建过程中没有包括 start。
编辑2：
通过运行 diff -qr working/ broken/ 我发现在运行 pnpm start 后没有任何差异。
这可能是由Chrome缓存引起的吗？
编辑3：
看起来是缓存问题，因为在运行pnpm start并从Chrome访问页面后，使用独立的server.js时Firefox中的问题仍然存在。
但我不知道为什么使用 next start 时页面会加载，而使用 node server.js 时不会。
谢谢。
英文:
I'm trying to deploy the following project to production: https://github.com/saleor/apps
The submodule in question: https://github.com/saleor/apps/tree/main/apps/slack
Here are the steps I'm taking.
- cd /apps/slack
- pnpm install
- pmpm build (this runs graphql-codegen && next build)
I have set output: "standalone" in my next.config.js
The problem is when I try to run the standalone server using:
node .next/standalone/apps/slack/server.js
I get 404s:
Until I do:
- pnpm start (runs next start)
- Open a browser and go to
localhost:3000 - Kill pnpm start
Then the 404s go away... even when running node .next/standalone/apps/slack/server.js
I'm asking because this seems to be related to Next.js not to the app itself? But I'm not experienced with Next.js or Node development so I'm not sure.
This is a problem for me because I want to make a docker image. And I'm having issues translating this workflow into a Dockerfile.
Edit:
I tried using the Dockerfile from https://github.com/vercel/next.js/tree/canary/examples/with-docker
However they don't include start in the build process.
Edit 2:
By running diff -qr working/ broken/ I found no differences after running pnpm start.
Can this be caused by Chrome caching?
Edit 3:
It appears to be a caching issue, as after running pnpm start and accessing the page from chrome the issue persists in Firefox when using the standalone server.js
However I have no idea why the page loads when using next start and not node server.js
Thanks.
答案1
得分: 3
在一个pnpm monorepo中，当使用Next.js独立输出时，您需要手动复制静态和public文件夹。
另外，还会输出一个最小的server.js文件，可以用来替代next start。这个最小的服务器默认情况下不会复制public或.next/static文件夹，因为最好由CDN来处理这些文件夹，尽管在手动复制这些文件夹到standalone/public和standalone/.next/static文件夹之后，server.js文件将自动提供这些文件。
然而，我将它们复制到了错误的目标位置，导致了404错误。
请将其复制到standalone/apps/slack/.next而不是standalone/.next，对于public文件夹也是一样的。
https://nextjs.org/docs/app/api-reference/next-config-js/output#automatically-copying-traced-files
英文:
In a pnpm monorepo, when using Next.js standalone output you have to manually copy the static and public folders.
> Additionally, a minimal server.js file is also output which can be used instead of next start. This minimal server does not copy the public or .next/static folders by default as these should ideally be handled by a CDN instead, although these folders can be copied to the standalone/public and standalone/.next/static folders manually, after which server.js file will serve these automatically.
However I was copying them to the wrong destination, causing the 404s.
Copy to standalone/apps/slack/.next instead of standalone/.next, same thing for public.
https://nextjs.org/docs/app/api-reference/next-config-js/output#automatically-copying-traced-files
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论