在Heroku平台部署Go作为后端、Angular作为前端的全栈应用时，前端根路径配置是容易出现问题的环节，错误的配置会导致页面刷新404、静态资源加载失败等情况，需要针对性调整前后端的配置逻辑。
部署前的环境准备
首先需要确保本地已经安装好Go开发环境和Angular CLI，并且已经在Heroku平台注册账号并安装Heroku CLI。需要提前将Angular项目构建为静态文件，同时准备好Go后端的接口逻辑，确保本地测试时前后端通信正常。
Angular项目构建
在Angular项目根目录执行构建命令，生成生产环境的静态文件，默认会输出到dist目录下：
# 构建Angular生产版本 ng build --prod
Go项目基础结构
Go项目的结构建议如下，将Angular构建后的静态文件放到static目录下，方便后续统一处理：
go-angular-app/ ├── main.go # 后端入口文件 ├── static/ # 存放Angular构建后的静态文件 │ ├── index.html │ ├── assets/ │ └── ... ├── go.mod └── go.sum
前端根路径配置核心逻辑
前端根路径配置的核心是要让Go后端能够正确处理两类请求：一类是静态资源请求，直接返回对应的静态文件；另一类是Angular的前端路由请求，统一返回index.html让Angular的路由系统处理。
静态文件服务配置
Go标准库的net/http包提供了静态文件服务的能力，我们需要将static目录作为静态文件根目录，同时处理静态文件的访问路径：
package main
import (
"net/http"
"path/filepath"
"strings"
)
func main() {
// 配置静态文件服务，指向Angular构建后的目录
fs := http.FileServer(http.Dir("./static"))
// 将静态文件的请求路径前缀设置为/，即根路径下的静态资源直接访问
http.Handle("/", fs)
// 启动服务，Heroku会默认使用环境变量PORT指定的端口
port := os.Getenv("PORT")
if port == "" {
port = "8080"
}
http.ListenAndServe(":"+port, nil)
}
前端路由适配配置
上面的配置存在一个问题，当访问Angular定义的前端路由如/user/list时，Go会尝试寻找/user/list对应的静态文件，找不到就会返回404。需要添加路由兜底逻辑，所有非静态资源、非API接口的请求都返回index.html：
package main
import (
"net/http"
"os"
"path/filepath"
"strings"
)
func main() {
// 静态文件服务
fs := http.FileServer(http.Dir("./static"))
// 自定义处理器，处理路由兜底逻辑
http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
// 获取请求的路径
path := r.URL.Path
// 判断请求的是否是静态文件，静态文件直接返回
// 静态文件通常有文件后缀，或者存在于static目录下
staticFilePath := filepath.Join("./static", path)
// 检查文件是否存在
if _, err := os.Stat(staticFilePath); err == nil {
fs.ServeHTTP(w, r)
return
}
// 如果不是静态文件，也不是API接口请求，返回index.html给Angular路由处理
// 这里假设API接口都以/api开头，根据实际情况调整
if !strings.HasPrefix(path, "/api") {
http.ServeFile(w, r, "./static/index.html")
return
}
// 处理API接口的逻辑，这里可以补充自己的接口处理代码
w.WriteHeader(http.StatusNotFound)
w.Write([]byte("API not found"))
})
port := os.Getenv("PORT")
if port == "" {
port = "8080"
}
http.ListenAndServe(":"+port, nil)
}
Heroku部署配置
完成代码配置后，需要添加Heroku的部署配置文件，确保平台能够正确识别项目类型并构建。
添加Procfile
在项目根目录创建Procfile文件，指定启动命令：
web: ./app
添加构建脚本
为了让Heroku在部署时自动构建Angular项目，需要添加构建脚本，在项目根目录创建build.sh：
#!/bin/bash # 安装Angular依赖并构建 cd frontend npm install ng build --prod --output-path=../static cd .. # 构建Go项目 go build -o app main.go
同时需要给构建脚本添加执行权限，并且调整项目结构，将Angular项目放到frontend目录下，方便构建时区分。
部署到Heroku
执行以下命令完成部署：
# 初始化git仓库 git init git add . git commit -m "init deploy" # 创建Heroku应用 heroku create your-app-name # 推送代码到Heroku git push heroku main
常见问题排查
- 如果页面刷新出现404，检查Go的路由兜底逻辑是否生效，是否所有非API、非静态文件的请求都返回了index.html
- 如果静态资源加载失败，检查静态文件的路径是否正确，Angular构建后的文件是否完整放到了static目录下
- 如果API接口无法访问，检查API路径的前缀是否正确，Go的接口处理逻辑是否正常
按照上述配置完成后，Go与Angular组合的应用就可以在Heroku上稳定运行，前端根路径相关的路由和静态资源访问问题也会得到解决。