使用 Angular 前端和 Go 后端在 Heroku 上部署应用程序

使用 angular 前端和 go 后端在 heroku 上部署应用程序

本文档旨在帮助开发者解决在使用 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/"))))

正确的配置应该是：

Animate AI

Animate AI是个一站式AI动画故事视频生成工具

234 查看详情 Animate AI

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 应用程序。

以上就是使用 Angular 前端和 Go 后端在 Heroku 上部署应用程序的详细内容，更多请关注其它相关文章！

# git # 前端 # 文件服务器 # 不正确 # 应用程序 # ai # 后端 # app # 浏览器 # 处理器 # github # go # 建设电商网站报价 # 建设网站方案模板 # 燃气设备网站建设特价 # 人兽seo综合查询 # seo绩效指标怎么设置 # url优化网站实验 # 海口网站优化和营销推广 # 濮阳网站建设的地方 # 福州百度seo建设 # 网站建设的定义是什么 # 能在 # 当你 # 是个 # 是一个 # 这行 # 文件系统

相关栏目：【 Google疑问12 】【 Facebook疑问10 】【优化推广96088 】【技术知识133117 】【 IDC资讯59369 】【网络运营7196 】【 IT资讯61894 】

2025-11-16

4008744355

使用 Angular 前端和 Go 后端在 Heroku 上部署应用程序

问题描述

解决方案

修改 server.go 文件

原理解释

完整示例

注意事项

总结

了解您产品搜索量及市场趋势，制定营销计划

同行竞争及网站分析保障您的广告效果

提交您的需求，1小时内享受我们的专业解答。

运城市盐湖区信雨科技有限公司

4008744355

服务/方案/案例/支持

关于我们

Notice