在Web服务器上部署Golang-React应用的完整指南

在Web服务器上部署Golang-React应用的完整指南 大家好！

我是Go语言的新手，一直在尝试构建一个简单的Web应用，使用Golang作为后端，React作为前端。

我在将整个应用编译并部署到线上服务器时遇到了困难。如果您能为我指明正确的方向，我将不胜感激。

我遵循的步骤如下：

  1. 将Golang应用编译成Linux可执行文件，并上传到cPanel的public_html目录中。
  2. 在package.json文件中添加了网站名称。
  3. 运行 npm run build 命令来生成build文件夹。
  4. 将build文件夹的内容上传并解压到public_html目录内。
  5. 在cPanel的控制台中运行Golang可执行文件，命令为 PORT=1234 ./app-name。

静态前端显示正常，应用在服务器控制台也运行良好——但似乎在后端和前端之间传递数据时遇到了问题。

非常感谢！


更多关于在Web服务器上部署Golang-React应用的完整指南的实战教程也可以访问 https://www.itying.com/category-94-b0.html

2 回复

你好 @ya1220，欢迎来到论坛！

如果应用在本地运行正常，那么我猜测这可能是你上传应用的环境问题。

可以尝试以下几点：

  • 检查应用是否确实在监听 1234 端口
  • 或许可以尝试使用一个不同的端口
  • 为应用添加日志记录，或改进现有的日志记录，以获取更多关于它可能卡在何处的详细信息

希望对你有帮助。

更多关于在Web服务器上部署Golang-React应用的完整指南的实战系列教程也可以访问 https://www.itying.com/category-94-b0.html


从你的描述来看，问题很可能出在前后端路由配置和静态文件服务上。以下是完整的解决方案：

1. 后端Go服务器配置

你需要修改Go后端，让它同时处理API请求和提供React的静态文件：

package main

import (
    "log"
    "net/http"
    "os"
    "path/filepath"
)

func main() {
    // 设置端口
    port := os.Getenv("PORT")
    if port == "" {
        port = "8080"
    }

    // 静态文件目录（React build输出）
    staticDir := "./public"
    
    // 创建文件服务器
    fs := http.FileServer(http.Dir(staticDir))
    
    // 设置路由
    http.Handle("/", fs)
    
    // API路由示例
    http.HandleFunc("/api/data", func(w http.ResponseWriter, r *http.Request) {
        w.Header().Set("Content-Type", "application/json")
        w.Write([]byte(`{"message": "Hello from Go backend!"}`))
    })
    
    // 健康检查端点
    http.HandleFunc("/health", func(w http.ResponseWriter, r *http.Request) {
        w.WriteHeader(http.StatusOK)
        w.Write([]byte("OK"))
    })
    
    log.Printf("Server starting on port %s", port)
    log.Fatal(http.ListenAndServe(":"+port, nil))
}

2. 构建和部署脚本

创建一个部署脚本 deploy.sh：

#!/bin/bash

# 构建React前端
echo "Building React app..."
cd frontend
npm run build

# 复制构建文件到Go目录
echo "Copying build files..."
rm -rf ../public
cp -r build ../public

# 返回Go目录并构建
echo "Building Go binary..."
cd ..
GOOS=linux GOARCH=amd64 go build -o app-name

echo "Deployment package ready:"
echo "1. app-name (Go binary)"
echo "2. public/ (React build files)"

3. 服务器端运行配置

在cPanel服务器上，你需要：

# 设置权限
chmod +x app-name

# 使用nohup保持进程运行
nohup PORT=1234 ./app-name > app.log 2>&1 &

# 检查进程
ps aux | grep app-name

# 查看日志
tail -f app.log

4. React前端API调用示例

在React应用中正确调用后端API：

// src/api.js
const API_BASE = window.location.origin;

export const fetchData = async () => {
    try {
        const response = await fetch(`${API_BASE}/api/data`);
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return await response.json();
    } catch (error) {
        console.error('Error fetching data:', error);
        throw error;
    }
};

// 在React组件中使用
import { fetchData } from './api';

function App() {
    const [data, setData] = useState(null);

    useEffect(() => {
        fetchData()
            .then(data => setData(data))
            .catch(error => console.error(error));
    }, []);

    return (
        <div>
            {data && <p>{data.message}</p>}
        </div>
    );
}

5. 完整的项目结构

your-project/
├── main.go              # Go后端主文件
├── go.mod              # Go模块文件
├── public/             # React构建输出（由脚本复制）
│   ├── index.html
│   ├── static/
│   └── ...
├── frontend/           # React前端源码
│   ├── package.json
│   ├── src/
│   └── public/
├── deploy.sh           # 部署脚本
└── app-name           # 编译后的Go二进制文件

6. 调试步骤

如果仍有问题，添加调试日志：

// 在main.go中添加中间件记录请求
func loggingMiddleware(next http.Handler) http.Handler {
    return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
        log.Printf("%s %s", r.Method, r.URL.Path)
        next.ServeHTTP(w, r)
    })
}

// 使用中间件
http.Handle("/", loggingMiddleware(fs))

这样配置后，你的Go服务器会：

  1. 处理所有API请求（如 /api/*）
  2. 为React静态文件提供服务
  3. 处理前端路由（通过回退到index.html）

运行部署脚本后，只需要上传 app-name 二进制文件和 public/ 目录到服务器即可。

回到顶部