在 Heroku 上部署 Angular 前端和 Go 后端的应用

本文档旨在解决在 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 的目录。以下是两种可行的方案：

1. 使用相对路径: 将 http.Dir 的参数改为 app/，直接指向 Angular 应用所在的目录。

   http.Handle("/", logHandler(http.FileServer(http.Dir("app/"))))

   登录后复制

   这种方式简单直接，假设 server.go 文件与 app 目录在同一层级。

   

   AppMall应用商店

   AI应用商店，提供即时交付、按需付费的人工智能应用服务

   56

   查看详情

2. 使用绝对路径: 使用 /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 可执行文件。

• 环境变量: 确保 PORT 环境变量已正确设置，以便 Go 应用监听 Heroku 分配的端口。

总结

通过正确配置 http.FileServer 的目录，可以轻松地将 Angular 应用部署到 Heroku 的根目录。选择相对路径或绝对路径取决于你的项目结构和个人偏好。确保仔细检查 Heroku 的部署路径和 Procfile 配置，以避免潜在的问题。通过本文的指导，你应该能够成功地在 Heroku 上部署你的 Angular 和 Go 应用，并提供最佳的用户体验。

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