本文档旨在帮助开发者解决在使用 Angular 前端和 Go 后端在 Heroku 上部署应用程序时，静态资源访问路径不正确的问题。通过修改 Go 后端的文件服务目录配置，确保应用程序能够从根路径正确加载 Angular 应用。本文将提供详细的配置方法和原理说明，助你成功部署应用。
问题描述
在使用 Angular 作为前端，Go 作为后端，并将应用程序部署到 Heroku 上时，可能会遇到 Angular 应用没有部署到根目录的问题。例如，期望应用程序在 foobar.herokuapp.com 访问，但实际却只能在 foobar.herokuapp.com/app/#/ 访问。这通常是由于 Go 后端的文件服务配置不正确导致的。
解决方案
要解决这个问题，需要修改 Go 后端代码中文件服务器的目录配置。关键在于指定正确的静态资源（Angular 应用）的根目录。
修改 server.go 文件
在你的 server.go 文件中，找到处理静态资源的部分。通常，这部分代码使用了 http.FileServer 函数。你需要修改传递给 http.Dir 函数的参数，以指定正确的目录。
立即学习“前端免费学习笔记（深入）”；
原始代码可能如下所示：
http.Handle("/", logHandler(http.FileServer(http.Dir("../app/"))))正确的配置应该是：
http.Handle("/", logHandler(http.FileServer(http.Dir("app/"))))或者，使用绝对路径：
http.Handle("/", logHandler(http.FileServer(http.Dir("/app/app/"))))代码解释：
- http.Handle("/", ...)：这行代码将根路径 / 映射到后面的处理器。
- http.FileServer(http.Dir("app/"))：这行代码创建了一个文件服务器，它将服务于指定目录下的文件。http.Dir("app/") 指定了文件服务器的根目录为 app/。
- logHandler(...)：这是一个自定义的日志处理器，用于记录请求信息。
原理解释
在 Heroku 上，当你执行 Procfile 命令时，项目根目录会被设置为工作目录，其绝对路径为 /app。因此，../app/ 会将目录向上移动一级，回到项目根目录，而 app/ 则直接指向项目根目录下的 app 文件夹，这正是 Angular 应用所在的目录。
完整示例
以下是一个完整的 server.go 文件的示例：
package main
import (
"github.com/gorilla/handlers"
"log"
"net/http"
"os"
)
func main() {
log.Println("Starting Server")
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)
}注意事项
- 目录结构： 确保你的 Angular 应用确实位于项目根目录下的 app 文件夹中。
- Procfile： 确保你的 Procfile 文件配置正确，通常包含类似 web: server 的内容，其中 server 是你的 Go 可执行文件的名称。
- Heroku 部署： 每次修改代码后，都需要重新部署到 Heroku，以使更改生效。
- 缓存问题： 浏览器可能会缓存旧版本的静态资源。在部署新版本后，尝试清除浏览器缓存或使用无痕模式访问。
总结
通过修改 Go 后端的文件服务目录配置，可以轻松解决 Angular 应用部署到 Heroku 后访问路径不正确的问题。理解 Heroku 的工作目录原理以及 http.FileServer 的用法是解决此类问题的关键。确保你的目录结构正确，并遵循上述步骤，即可成功部署你的 Angular 和 Go 应用程序。
