部署这个原因
目前使用下来市面上开源最好的抠图工具 Briefnet 其实还是抠的不够好
用 Clipdrop 的在线版抠图效果还不错但是有图像尺寸的限制,而且不仅有抠图的工具,
PS:Figma抠图,目前教育版也免费使用,实测和 Clip 抠的效果差不多
但官方提供了 API 于是进行了部署,直接 Fork 官方的仓库:
记录一下过程中遇到的问题
✔ 可以本地运行
✔ 一个手机账号注册送100点,抠一次图扣1一点,目前使用进度:97/100
× 绑定域名运行还不行
官方文档(Create React App 部署文档)说明了 homepage 字段的作用和 build 目录结构的影响。
- 本地 build 后,静态文件在
build/apis/demos/bulk-remove-background/
目录下,而不是直接在build/
下。 - 这是因为的
package.json
里设置了:"homepage": "/apis/demos/bulk-remove-background/"
- 官方文档也说了,设置 homepage 后,所有资源路径和 build 输出都会以这个路径为前缀。
官方文档怎么说
- 默认情况下,Create React App 假设你的应用部署在服务器根目录,build 输出在
build/
下。 - 如果你要部署到子路径(比如 GitHub Pages 或你的网站的某个子目录),就要设置 homepage 字段,这样资源路径才会正确。
- 但这样 build 输出会在
build/子路径/
下。
By default, Create React App produces a build assuming your app is hosted at the server root.To override this, specify the homepage in your package.json, for example:
"homepage": "<http://mywebsite.com/relativepath>",
This will let Create React App correctly infer the root path to use in the generated HTML file.
在 Vercel 上的部署选择
方案一:部署到根路径(推荐,简单)
- 删除或修改
package.json
里的 homepage 字段为/
或直接删掉。 - 重新 build,静态文件会直接在
build/
下。 - Vercel 的 Output Directory 填
build
。 - 这样访问你的 Vercel 域名根路径就是你的 React 应用。
方案二:部署到子路径(测试可用)
- 保持
homepage
字段为/apis/demos/bulk-remove-background/
。 - build 后,静态文件在
build/apis/demos/bulk-remove-background/
下。 - Vercel 的 Output Directory 填
build/apis/demos/bulk-remove-background
。 - 这样访问你的 Vercel 域名时,需要加上
/apis/demos/bulk-remove-background/
路径。
总结
- 想让 build 目录下直接有静态页面,
package.json
里不要设置 homepage,或者 homepage 设为/
- 想用子路径,Vercel Output Directory 要和 build 目录结构一致
官方文档原文参考:
By default, Create React App produces a build assuming your app is hosted at the server root.To override this, specify the homepage in your package.json, for example:
"homepage": "<http://mywebsite.com/relativepath>",
This will let Create React App correctly infer the root path to use in the generated HTML file.