本文档旨在解决在 Heroku 上部署 Angular 前端和 Go 后端应用时，前端资源没有部署在根目录，而是部署在子目录下的问题。通过修改 Go 后端的文件服务器配置，确保 Angular 应用能够直接通过根域名访问。
在 Heroku 上部署 Angular 和 Go 应用时，一个常见的问题是前端 Angular 应用没有部署在根目录下，导致用户访问时需要在 URL 中包含子目录。本文将详细介绍如何通过调整 Go 后端代码，将 Angular 应用部署到根目录，实现更友好的用户体验。
问题分析
通常，Go 后端会使用 http.FileServer 来提供静态文件服务，例如 Angular 构建后的文件。如果配置不当，http.FileServer 可能会将 Angular 应用部署在子目录中。
例如，以下代码可能会导致问题：
立即学习“前端免费学习笔记（深入）”；
http.Handle("/", logHandler(http.FileServer(http.Dir("../app/"))))
这段代码尝试从 ../app/ 目录提供文件。在 Heroku 环境中，项目根目录是 /app，因此 ../app/ 实际上指向了项目根目录，而不是 Angular 应用所在的 app 目录。
解决方案
要解决这个问题，需要正确配置 http.FileServer 的目录。以下是两种可行的方案：
使用相对路径: 将 http.Dir 的参数改为 app/，直接指向 Angular 应用所在的目录。
http.Handle("/", logHandler(http.FileServer(http.Dir("app/"))))
这种方式简单直接，假设 server.go 文件与 app 目录在同一层级。
使用绝对路径: 使用 /app/app/ 作为路径，明确指定 Angular 应用的绝对路径。
http.Handle("/", logHandler(http.FileServer(http.Dir("/app/app/"))))
注意：这种方式依赖于 Heroku 的目录结构，确保 Angular 应用确实位于 /app/app/。
示例代码
以下是修改后的 server.go 示例代码，使用相对路径来提供 Angular 应用的静态文件：
package mainimport ( "github.com/gorilla/handlers" "log" "net/http" "os")func main() { log.Println("Starting Server") // 使用相对路径 "app/" http.Handle("/", logHandler(http.FileServer(http.Dir("app/")))) log.Println("Listening...") panic(http.ListenAndServe(":"+os.Getenv("PORT"), nil))}func logHandler(h http.Handler) http.Handler { return handlers.LoggingHandler(os.Stdout, h)}
注意事项
Heroku 部署路径: 确保你的 Angular 应用构建后的文件位于 app 目录下。这通常需要在 Angular 项目的构建脚本中进行配置。
Procfile 配置: 确保 Procfile 文件正确配置，以启动 Go 后端服务。例如：
web: server
这表示 Heroku 将执行 server 命令来启动你的应用。这里的 server 应该对应于你的 Go 可执行文件。
环境变量: 确保 PORT 环境变量已正确设置，以便 Go 应用监听 Heroku 分配的端口。
总结
通过正确配置 http.FileServer 的目录，可以轻松地将 Angular 应用部署到 Heroku 的根目录。选择相对路径或绝对路径取决于你的项目结构和个人偏好。确保仔细检查 Heroku 的部署路径和 Procfile 配置，以避免潜在的问题。通过本文的指导，你应该能够成功地在 Heroku 上部署你的 Angular 和 Go 应用，并提供最佳的用户体验。
以上就是在 Heroku 上部署 Angular 前端和 Go 后端的应用的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1423864.html
微信扫一扫 
支付宝扫一扫 
