Angular+Go项目如何部署Heroku

在Heroku上部署Angular + Go项目时遇到静态资源访问路径问题？本文针对此类常见困扰，提供详尽的解决方案。通过修改Go后端的文件服务目录配置，确保Angular应用能够从根路径正确加载，告别“/app/#/”的尴尬访问方式。本文深入解析Heroku工作目录原理和`http.FileServer`的用法，并提供可直接使用的`server.go`示例代码，助你轻松解决部署难题，成功发布你的Angular + Go应用。解决Angular应用部署后访问路径不正确的问题，让你的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/"))))

正确的配置应该是：

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》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！