如何部署Golang后端并关联已上线的React前端？

一、先编译后端可执行文件 #

服务器上不一定装了Go环境，先在本地把代码编译成对应服务器系统的可执行文件：

• 如果服务器是Linux 64位，执行：

  GOOS=linux GOARCH=amd64 go build -o portfolio-backend main.go
  

  生成的portfolio-backend就是能直接在服务器运行的程序。

二、上传到服务器并配置权限 #

• 用scp或者FTP工具，把编译好的文件传到服务器的某个目录，比如/var/www/portfolio-backend/
• 给文件加执行权限：

  chmod +x /var/www/portfolio-backend/portfolio-backend
  

三、让后端后台稳定运行（用systemd） #

直接运行程序的话，断开SSH就会停止，用systemd配置成服务：

1. 创建服务文件/etc/systemd/system/portfolio-backend.service，内容如下：

   [Unit]
   Description=作品集后端服务
   After=network.target
   
   [Service]
   User=www-data
   WorkingDirectory=/var/www/portfolio-backend
   ExecStart=/var/www/portfolio-backend/portfolio-backend
   Restart=always
   
   [Install]
   WantedBy=multi-user.target
   

2. 执行以下命令启动并设置开机自启：

   sudo systemctl daemon-reload
   sudo systemctl start portfolio-backend
   sudo systemctl enable portfolio-backend
   

四、配置Nginx反向代理（绑定域名） #

后端跑在8080端口，要通过域名访问，用Nginx把域名请求转发到后端：

1. 编辑Nginx站点配置文件（比如/etc/nginx/sites-available/exampledomain.com）：

   server {
       listen 80;
       server_name exampledomain.com;
   
       # 前端静态文件路由（指向你的React build文件夹）
       location / {
           root /var/www/portfolio-frontend;
           try_files $uri $uri/ /index.html;
       }
   
       # 后端API路由，转发到8080端口
       location /email/ {
           proxy_pass http://localhost:8080;
           proxy_set_header Host $host;
           proxy_set_header X-Real-IP $remote_addr;
           proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
       }
   }
   

2. 启用配置并重启Nginx：

   sudo ln -s /etc/nginx/sites-available/exampledomain.com /etc/nginx/sites-enabled/
   sudo nginx -t  # 检查配置是否正确
   sudo systemctl restart nginx
   

五、调整前后端连接配置 #

1. 后端CORS更新：把Go代码里的AllowedOrigins改成前端实际的域名（如果用HTTPS要加上https://）：

   c := cors.New(cors.Options{
       AllowedOrigins:   []string{"https://exampledomain.com"}, // 替换成你的真实域名
       AllowedMethods:   []string{http.MethodPost},
       AllowCredentials: true,
   })
   

   重新编译后端，然后重启服务：sudo systemctl restart portfolio-backend

2. 前端请求地址修改：在React的联系表单请求代码里，把API地址改成域名对应的路径：

   const sendEmail = async (formData) => {
       try {
           const res = await fetch('https://exampledomain.com/email/', {
               method: 'POST',
               headers: { 'Content-Type': 'application/json' },
               body: JSON.stringify(formData)
           });
           // 后续处理逻辑
       } catch (err) {
           console.error(err);
       }
   };
   

六、关键注意事项 #

• Gmail SMTP权限：用Gmail发邮件的话，别直接用账号密码，去Google账号设置里生成应用专用密码（需要开启两步验证），替换代码里的***，否则会被拦截。
• HTTPS配置：一定要给域名配HTTPS（比如用Let's Encrypt免费证书），不然浏览器会拦截HTTP的API请求，混合内容会报错。
• 端口安全：服务器不需要对外开8080端口，Nginx已经做了转发，只需要开放80（HTTP）和443（HTTPS）端口就行。

内容的提问来源于stack exchange，提问作者intero