[Bug] 使用cloudflare的r2储存上传图片提示错误

[maxage]

📦 Environment

Docker

📌 Version

v1.9.3

💻 Operating System

Other Linux

🌐 Browser

Chrome

🐛 Bug Description

错误描述

按照要求，设置到了cloudflare的R2储存，绑定了域名。在上传图片时候提示。文件上传失败，请检查网络连接或稍后再试 详情: Error: fileEnv.NEXT_PUBLIC_S3_DOMAIN is not set while enable server upload

配置文件：

  ### 储存设置
  S3_BUCKET: lobechat（储存桶名）
  S3_ENDPOINT: https://d712b5fb5xxxxxxxxxxxxe128ddf199d8e.r2.cloudflarestorage.com（S3 API）
  NEXT_PUBLIC_S3_DOMAIN: https://lobechat.xxxxx.cc (自定义域，域名是在cloudflare托管的)
  S3_ACCESS_KEY_ID: 589650ec967xxxxxxxx497f0af613b614 （管理员权限）
  S3_SECRET_ACCESS_KEY: af646c7b0f58xxxxxxx4141be09c478f9b7d1d2xxxxxx6f1b409a087f3（管理员权限）

在cloudflare的R2里面也能看到通过前端上传进去的图片，但是右上角提示错误，也无法识别。

并且CORS也正确设置 [ { "AllowedOrigins": [ "https://lobechat前端访问域名", ], "AllowedMethods": [ "GET", "PUT", "HEAD", "POST", "DELETE" ], "AllowedHeaders": [ "*" ], "ExposeHeaders": [], "MaxAgeSeconds": 3000 } ]

[lobehubbot]

👀 @maxage

Thank you for raising an issue. We will investigate into the matter and get back to you as soon as possible. Please make sure you have given us as much context as possible.\ 非常感谢您提交 issue。我们会尽快调查此事，并尽快回复您。 请确保您已经提供了尽可能多的背景信息。

[Lovest20018]

一样的问题，还有ACCESS_CODE参数客户端需要手动输入下，不然直接提示无权限。

[lobehubbot]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

---

The same problem, and the client needs to enter the ACCESS_CODE parameter manually, otherwise it will directly prompt that there is no permission.

[maxage]

一样的问题，还有ACCESS_CODE参数客户端需要手动输入下，不然直接提示无权限。

我没有设置ACCESS_CODE 用的Auth0登录进去的

[lobehubbot]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

---

Same problem, the client needs to enter the ACCESS_CODE parameter manually, otherwise it will directly prompt that there is no permission.

I did not set ACCESS_CODE and logged in using Auth0.

[Lovest20018]

一样的问题，还有ACCESS_CODE参数客户端需要手动输入下，不然直接提示无权限。

我没有设置ACCESS_CODE 用的Auth0登录进去的

看到大佬说过，ACCESS_CODE应该是不需要了，不过Auth0配置文档上面还写着必须。 我删了ACCESS_CODE就没提示无权限了，跟你现在一样的问题。

[lobehubbot]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

---

The same problem, and the client needs to enter the ACCESS_CODE parameter manually, otherwise it will directly prompt that there is no permission.

I did not set ACCESS_CODE and used Auth0 to log in.

I saw the boss said that ACCESS_CODE should not be needed, but the Auth0 configuration document still says it is required. After I deleted ACCESS_CODE, there was no prompt about no permission. I have the same problem as you now.

[bentwnghk]

NEXT_PUBLIC_S3_DOMAIN 這個環境變量不能像一般環境變量在容器啟動時讀入。

[lobehubbot]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

---

NEXT_PUBLIC_S3_DOMAIN This environment variable cannot be read when the container starts like general environment variables.

[arvinxx]

这个是遗留 bug，会在知识库/文件上传功能发布时一并修复

[lobehubbot]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

---

This is a legacy bug and will be fixed when the knowledge base/file upload function is released.

[534002646]

这个是遗留 bug，会在知识库/文件上传功能发布时一并修复

请问什么时候会发布

[lobehubbot]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

---

This is a legacy bug and will be fixed when the knowledge base/file upload function is released

When will it be released?

[sqkkyzx]

使用腾讯云COS，遇到同样问题，前端报错：

Error: fileEnv.NEXT_PUBLIC_S3_DOMAIN is not set while enable server upload

图片实际已经上传到对象存储。

[wxy-skye]

同问，什么时候发布。毕竟这个影响日常使用了。

I have the same question - when will it be released? After all, this is affecting everyday use.

[arvinxx]

@534002646 预计这两周吧。

同问，什么时候发布。毕竟这个影响日常使用了。

@wxy-skye 如果你的使用强依赖图片上传，可以先使用客户端 db 模式

[lobehubbot]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

---

@534002646 I think it will take two weeks.

Also asked, when will it be released. After all, this affects daily use.

@wxy-skye If your application strongly relies on image upload, you can use the client db mode first

[dalefengs]

minio 同样的问题

[lobehubbot]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

---

minio same problem

[briankwon]

这个是遗留 bug，会在知识库/文件上传功能发布时一并修复

@arvinxx 请问能否考虑通过环境配置在上传文件时支持path style？目前使用了virtual host形式，对动态IP的服务器来说配置会比较繁琐

具体区别如下： With path-style lookups, applications can access the bucket using its full path as minio.example.net/mybucket.

With virtual-host lookups, application can access the bucket as a virtual host as mybucket.minio.example.net/.

[urzz]

同楼上，cloudflare tunnel 的证书只支持到二级域名，如果使用 virtual host，依赖tunnel的minio服务就无法直接使用了。如果是 Path Style 可以使用二级域名访问

[lobehubbot]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

---

Same as above, the cloudflare tunnel certificate only supports second-level domain names. If you use virtual host, the minio service that relies on the tunnel cannot be used directly. If it is Path Style, you can use the second-level domain name to access it.

[arvinxx]

@briankwon path style 是啥？是 s3 标准的实现吗？

[lobehubbot]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

---

@briankwon What is path style? Is it an implementation of the s3 standard?

[briankwon]

@briankwon path style 是啥？是 s3 标准的实现吗？

@arvinxx path style和virtual host在s3是访问bucket和object的不同方式，URL 的结构和域名解析不太一样

假设minio的域名是minio.example.net，bucket为mybucket，object为config.env，具体区别如下： path-style——minio.example.net/mybucket/config.env virtual-host——mybucket.minio.example.net/config.env

可以发现bucket的位置是不同的，一个体现在path一个体现在域名，path-style在使用更简单，而virtual-host会涉及到部署反向代理解析等问题，对于个人使用有一定成本。

可以通过amazon s3 client初始化时控制是否激活path style，关于JavaScript SDK我找到了相关文档，https://github.com/aws/aws-sdk-js-v3/blob/main/UPGRADING.md

[lobehubbot]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

---

@briankwon What is path style? Is it an implementation of the s3 standard?

@arvinxx path style and virtual host are different ways to access buckets and objects in S3. The structure of the URL is different from the domain name resolution.

Assume that the domain name of minio is minio.example.net, the bucket is mybucket, and the object is config.env. The specific differences are as follows: path-style——minio.example.net/mybucket/config.env virtual-host——mybucket.minio.example.net/config.env

It can be found that the bucket locations are different. One is reflected in the path and the other is reflected in the domain name. Path-style is easier to use, while virtual-host will involve issues such as deploying reverse proxy resolution, which has a certain cost for personal use.

You can control whether to activate path style when initializing the amazon s3 client. I found relevant documents about JavaScript SDK, https://github.com/aws/aws-sdk-js-v3/blob/main/UPGRADING.md

[80imike]

minio 同样的问题

使用的版本是 1.9.6 最新版本

[lobehubbot]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

---

minio same problem

[arvinxx]

@briankwon 了解了。那看来可以加个环境变量来支持这种写法。

[lobehubbot]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

---

@briankwon Got it. It seems that you can add an environment variable to support this writing method.

[RidiculousBuffal]

关于NEXT_PUBLIC_变量在DOCKER中不能自动注入NEXTJS的问题下面是一个临时的解决方法: 在dockerfile中使用ARG参数取代ENV参数即:

ARG NEXT_PUBLIC_S3_DOMAIN="https://hpcow-******com" ENV NEXT_PUBLIC_S3_DOMAIN = ${NEXT_PUBLIC_S3_DOMAIN}

经过测试可以解决这个问题,我这边是腾讯云做OSS所以 @sqkkyzx 应该可以通过我这个方式解决这个问题 @maxage @wxy-skye @bentwnghk 希望对各位有用呀！😀😀 参考链接: https://stackoverflow.com/questions/76124346/how-can-i-pass-an-env-variable-to-next-js-app-running-inside-a-docker-container https://github.com/vercel/next.js/discussions/14030

[lobehubbot]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

---

Regarding the problem that NEXTPUBLIC variables cannot be automatically injected into NEXTJS in DOCKER, the following is a temporary solution: Use the ARG parameter in the dockerfile instead of the ENV parameter:

ARG NEXT_PUBLIC_S3_DOMAIN="https://hpcow-******com"
ENV NEXT_PUBLIC_S3_DOMAIN = ${NEXT_PUBLIC_S3_DOMAIN}
```docker
After testing, this problem can be solved. Tencent Cloud is doing OSS here, so
@sqkkyzx should be able to solve this problem through my method @maxage @wxy-skye @bentwnghk I hope it will be useful to everyone! 😀😀
![Snipaste_2024-08-13_17-52-24](https://github.com/user-attachments/assets/e6e108df-e2dc-4992-b232-9e5a7136fd1c)
Reference links:
[https://stackoverflow.com/questions/76124346/how-can-i-pass-an-env-variable-to-next-js-app-running-inside-a-docker-container](url)
[https://github.com/vercel/next.js/discussions/14030](url)  

[mujiannan]

部署后能够上文文件到s3或兼容存储桶（如minio ），但遇到了前端报错：NEXT_PUBLIC_S3_DOMAIN is not set while enable server upload，原因是官方镜像build时就已经嵌入了前端代码，在容器运行时注入的环境变量只在后端生效。next.js的文档Configuring: Environment Variables | Next.js (nextjs.org)：

By default, environment variables are only available on the server. To expose an environment variable to the browser, it must be prefixed with NEXT_PUBLIC_. However, these public environment variables will be inlined into the JavaScript bundle during next build.

临时解决办法（workaround）：自行build镜像，build时就把自己的NEXT_PUBLIC 开头的环境变量打进去。

[80imike]

关于NEXT_PUBLIC_变量在DOCKER中不能自动注入NEXTJS的问题下面是一个临时的解决方法: 在dockerfile中使用ARG参数取代ENV参数即:

ARG NEXT_PUBLIC_S3_DOMAIN="https://hpcow-******com" ENV NEXT_PUBLIC_S3_DOMAIN = ${NEXT_PUBLIC_S3_DOMAIN}

经过测试可以解决这个问题,我这边是腾讯云做OSS所以 @sqkkyzx 应该可以通过我这个方式解决这个问题 @maxage @wxy-skye @bentwnghk 希望对各位有用呀！😀😀 参考链接: https://stackoverflow.com/questions/76124346/how-can-i-pass-an-env-variable-to-next-js-app-running-inside-a-docker-container https://github.com/vercel/next.js/discussions/14030

不错，期待官方镜像尽快把这个修复加进去

[lobehubbot]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

---

Regarding the problem that the NEXTPUBLIC variable cannot be automatically injected into NEXTJS in DOCKER, the following is a temporary solution: use the ARG parameter in the dockerfile instead of the ENV parameter:

ARG NEXT_PUBLIC_S3_DOMAIN="https://hpcow-******com" ENV NEXT_PUBLIC_S3_DOMAIN = ${NEXT_PUBLIC_S3_DOMAIN}

This problem can be solved after testing. I use Tencent Cloud to do OSS here, so @sqkkyzx should be able to solve this problem through my method @maxage @wxy-skye @bentwnghk I hope it will be useful to everyone! 😀😀  Reference link: https://stackoverflow.com/questions/76124346/how-can-i-pass-an-env-variable-to-next-js-app-running-inside-a- docker-container https://github.com/vercel/next.js/discussions/14030

Not bad, I hope the official image will add this fix as soon as possible

[arvinxx]

关于NEXT_PUBLIC_变量在DOCKER中不能自动注入NEXTJS的问题下面是一个临时的解决方法: 在dockerfile中使用ARG参数取代ENV参数即:

ARG NEXT_PUBLIC_S3_DOMAIN="https://hpcow-******com" ENV NEXT_PUBLIC_S3_DOMAIN = ${NEXT_PUBLIC_S3_DOMAIN}

经过测试可以解决这个问题,我这边是腾讯云做OSS所以 @sqkkyzx 应该可以通过我这个方式解决这个问题 @maxage @wxy-skye @bentwnghk 希望对各位有用呀！😀😀 参考链接: https://stackoverflow.com/questions/76124346/how-can-i-pass-an-env-variable-to-next-js-app-running-inside-a-docker-container https://github.com/vercel/next.js/discussions/14030

你这个是运行时方案还是构建时方案？

[lobehubbot]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

---

Regarding the problem that the NEXTPUBLIC variable cannot be automatically injected into NEXTJS in DOCKER, the following is a temporary solution: use the ARG parameter in the dockerfile instead of the ENV parameter:

ARG NEXT_PUBLIC_S3_DOMAIN="https://hpcow-******com" ENV NEXT_PUBLIC_S3_DOMAIN = ${NEXT_PUBLIC_S3_DOMAIN}

This problem can be solved after testing. I use Tencent Cloud to do OSS here, so @sqkkyzx should be able to solve this problem through my method @maxage @wxy-skye @bentwnghk I hope it will be useful to everyone! 😀😀  Reference Link: https://stackoverflow.com/7612434/how-can-d-d-d- I-p ass -an-variable-to-next-js-app-running-inSide-A-Docker- container https://github.com/vercel/next.js/discussions/14030

Is this your runtime solution or build time solution?

[mujiannan]

关于NEXT_PUBLIC_变量在DOCKER中不能自动注入NEXTJS的问题下面是一个临时的解决方法: 在dockerfile中使用ARG参数取代ENV参数即: ARG NEXT_PUBLIC_S3_DOMAIN="https://hpcow-******com" ENV NEXT_PUBLIC_S3_DOMAIN = ${NEXT_PUBLIC_S3_DOMAIN} 经过测试可以解决这个问题,我这边是腾讯云做OSS所以 @sqkkyzx 应该可以通过我这个方式解决这个问题 @maxage @wxy-skye @bentwnghk 希望对各位有用呀！😀😀 参考链接: https://stackoverflow.com/questions/76124346/how-can-i-pass-an-env-variable-to-next-js-app-running-inside-a-docker-container https://github.com/vercel/next.js/discussions/14030

你这个是运行时方案还是构建时方案？

这个明显是构建时方案，需要用户自行build镜像的。

[lobehubbot]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

---

Regarding the problem that the NEXTPUBLIC variable cannot be automatically injected into NEXTJS in DOCKER, the following is a temporary solution: use the ARG parameter in the dockerfile instead of the ENV parameter: ARG NEXT_PUBLIC_S3_DOMAIN="https://hpcow-******com" ENV NEXT_PUBLIC_S3_DOMAIN = ${NEXT_PUBLIC_S3_DOMAIN} This problem can be solved after testing. I use Tencent Cloud to do OSS here, so @sqkkyzx should be able to solve this problem through my method @maxage @wxy-skye @bentwnghk I hope it will be useful to everyone! 😀😀  Reference Link: https://stackoverflow.com/7612434/how-can-d-d-d- I-p ass -an-variable-to-next-js-app-running-inSide-A-Docker- container https://github.com/vercel/next.js/discussions/14030

Is this a run-time solution or a build-time solution?

This is obviously a build-time solution that requires users to build the image themselves.

[RidiculousBuffal]

关于NEXT_PUBLIC_变量在DOCKER中不能自动注入NEXTJS的问题下面是一个临时的解决方法: 在dockerfile中使用ARG参数取代ENV参数即: ARG NEXT_PUBLIC_S3_DOMAIN="https://hpcow-******com" ENV NEXT_PUBLIC_S3_DOMAIN = ${NEXT_PUBLIC_S3_DOMAIN} 经过测试可以解决这个问题,我这边是腾讯云做OSS所以 @sqkkyzx 应该可以通过我这个方式解决这个问题 @maxage @wxy-skye @bentwnghk 希望对各位有用呀！😀😀 参考链接: https://stackoverflow.com/questions/76124346/how-can-i-pass-an-env-variable-to-next-js-app-running-inside-a-docker-container https://github.com/vercel/next.js/discussions/14030

你这个是运行时方案还是构建时方案？

应该算构建时方案

[lobehubbot]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

---

Regarding the problem that the NEXTPUBLIC variable cannot be automatically injected into NEXTJS in DOCKER, the following is a temporary solution: use the ARG parameter in the dockerfile instead of the ENV parameter: ARG NEXT_PUBLIC_S3_DOMAIN="https://hpcow-******com" ENV NEXT_PUBLIC_S3_DOMAIN = ${NEXT_PUBLIC_S3_DOMAIN} This problem can be solved after testing. I use Tencent Cloud to do OSS here, so @sqkkyzx should be able to solve this problem through my method @maxage @wxy-skye @bentwnghk I hope it will be useful to everyone! 😀😀  Reference Link: https://stackoverflow.com/7612434/how-can-d-d-d- I-p ass -an-variable-to-next-js-app-running-inSide-A-Docker- container https://github.com/vercel/next.js/discussions/14030

Is this a run-time solution or a build-time solution?

It should be considered a build-time solution

[arvinxx]

@RidiculousBuffal 构建时方案没法做进官方镜像里的吧

[lobehubbot]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

---

@RidiculousBuffal The plan cannot be included in the official image when building, right?

[sqkkyzx]

@RidiculousBuffal 构建时方案没法做进官方镜像里的吧

能不能不从环境变量中读取这个配置，换其他方案呢，比如传入一个配置文件之类，或者直接从数据库读取

[lobehubbot]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

---

@RidiculousBuffal The build plan cannot be included in the official image, right?

Instead of reading this configuration from environment variables, can we use other solutions, such as passing in a configuration file or directly reading from the database?

[arvinxx]

传入一个配置文件之类，或者直接从数据库读取

构建时变量和运行时变量的区别就是构建时变量是在构建阶段注入然后写死在构建产物里的，所以它没法在运行时灵活修改。

就先不用出其他主意了，这个问题我们会在知识库/文件上传的 feature 中修复掉的，耐心等待就好

[lobehubbot]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

---

Pass in a configuration file or the like, or read directly from the database

The difference between build-time variables and run-time variables is that build-time variables are injected during the build phase and hard-coded into the build product, so they cannot be flexibly modified at run time.

There is no need to come up with other ideas now. We will fix this problem in the knowledge base/file upload feature. Just wait patiently.

[arvinxx]

已修复： https://github.com/lobehub/lobe-chat/pull/3487

[lobehubbot]

✅ @maxage

This issue is closed, If you have any questions, you can comment and reply.\ 此问题已经关闭。如果您有任何问题，可以留言并回复。

[lobehubbot]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

---

Fixed: https://github.com/lobehub/lobe-chat/pull/3487