本文档旨在解决在 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 目录在同一层级。
mallcloud商城下载mallcloud商城基于SpringBoot2.x、SpringCloud和SpringCloudAlibaba并采用前后端分离vue的企业级微服务敏捷开发系统架构。并引入组件化的思想实现高内聚低耦合，项目代码简洁注释丰富上手容易，适合学习和企业中使用。真正实现了基于RBAC、jwt和oauth2的无状态统一权限认证的解决方案，面向互联网设计同时适合B端和C端用户，支持CI/CD多环境部署，并提
-
使用绝对路径: 使用 /app/app/ 作为路径，明确指定 Angular 应用的绝对路径。
http.Handle("/", logHandler(http.FileServer(http.Dir("/app/app/"))))注意：这种方式依赖于 Heroku 的目录结构，确保 Angular 应用确实位于 /app/app/。
示例代码
以下是修改后的 server.go 示例代码，使用相对路径来提供 Angular 应用的静态文件：
package main
import (
"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 可执行文件。
总结
通过正确配置 http.FileServer 的目录，可以轻松地将 Angular 应用部署到 Heroku 的根目录。选择相对路径或绝对路径取决于你的项目结构和个人偏好。确保仔细检查 Heroku 的部署路径和 Procfile 配置，以避免潜在的问题。通过本文的指导，你应该能够成功地在 Heroku 上部署你的 Angular 和 Go 应用，并提供最佳的用户体验。
