【一文系列】一篇文章记录使用Apache Http Server部署前后端分离项目
“一文系列”目标是仅通过一篇文章来解决一个类别问题，简洁高效，快速获取知识，提升技能。
前言
最近在工作中出于兼容历史项目的考虑，需要使用Apache Http Server（下文简称Apache）对新开发的前后端分离项目进行部署。本文主要记录了在工作中使用Apache从头到尾对前后端分离项目进行部署的过程并给出了实验案例，以及在各个环节遇到的问题与解决方案，目标是能够方便读者在遇到类似场景时可以快速上手并规避常见的问题。
让我们开始吧！！！
一、背景介绍
前后端分离架构是互联网公司主要使用的架构，能使开发团队能够并行开发前端和后端，并使用不同的技术栈。Apache作为Apache软件基金会最著名的项目之一，在进行大型企业网站、个人博客、电子商务平台和各种Web应用程序的构建与部署上得到广泛应用。在本次的部署过程中主要是以ubuntu server作为操作系统，apache2作为Web服务器为例进行的，在其他环境中本文依然可以作为参考。
二、环境介绍
1. 服务器环境
| 操作系统 | 版本 | ip | 域名 |
|---|---|---|---|
| ubuntu server | 20.04.5 LTS | 192.168.1.13 |
test.example.com |
2. 前后端环境
| 前端框架 | 后端框架 |
|---|---|
| Ant Design Pro | SpringBoot |
三、部署过程
1.前期准备
- 需要在服务上安装apache2服务
ubuntu server上可直接使用apt工具进行安装
# 确保apt工具的更新
sudo apt update
# 安装apache2
sudo apt install apache2
按照成功的Apache服务会自动启动
查看服务状态
# 查看Apache服务状态，状态为active（running）时说明安装并启动成功
sudo systemctl status apache2.service
- 启动后端服务，本文案例中SpringBoot后端启动端口为
28080，接口前缀为/api。 - 打包前端应用，打包路径为
/apps/example/front/dist。
2.修改apache2.conf配置，解决403禁止访问问题
默认情况下根路径下的所有资源是被拒绝的，需要开启。
sudo vim /etc/apache2/apache2.conf
3.启用Apache Proxy模块
Proxy模块可以使Apache作为中间服务器，将客户端请求转发给其他服务器，并将响应返回给客户端；同时可以支持反向代理、正向代理、负载均衡、代理认证等功能。在本文中使用Proxy模块的目的是前端发送的所有前缀为/api的请求转发到后端的28080服务中。
先确认是否已经启用Proxy模块 （新安装的Apache服务没有启用该模块）：
# 查看启用的模块
ls /etc/apache2/mods-enabled/
如果能看到下图红框中的内容，说明已经启用了Proxy模块，否则需要开启Proxy模块。
开启Proxy模块
# 开启所有Proxy模块功能
a2enmod proxy*
4.站点配置
完成上述操作，就可以进行站点配置，完成前后端的对接。
创建并编辑 /etc/apache2/sites-available/test.example.com.conf，未创建时可以直接拷贝/etc/apache2/sites-available/000-default.conf作为模版
# 创建站点配置文件
sudo cp /etc/apache2/sites-available/000-default.conf /etc/apache2/sites-available/test.example.com.conf
# 开始编辑
sudo vim /etc/apache2/sites-available/test.example.com.conf
配置示例如下（这里仅以80端口为例）：
<VirtualHost *:80>
# The ServerName directive sets the request scheme, hostname and port that
# the server uses to identify itself. This is used when creating
# redirection URLs. In the context of virtual hosts, the ServerName
# specifies what hostname must appear in the request's Host: header to
# match this virtual host. For the default virtual host (this file) this
# value is not decisive as it is used as a last resort host regardless.
# However, you must set it for any further virtual host explicitly.
ServerName test.example.com
ServerAlias test.example.com
ServerAdmin webmaster@localhost
# 前端应用打包路径
DocumentRoot /apps/example/front/dist
# Available loglevels: trace8, ..., trace1, debug, info, notice, warn,
# error, crit, alert, emerg.
# It is also possible to configure the loglevel for particular
# modules, e.g.
#LogLevel info ssl:warn
ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined
# 后端接口转发，注意：必须开启Proxy模块才可以使用以下配置
<Location /api>
# 正向代理
ProxyPass http://127.0.0.1:28080/api
# 反向代理
ProxyPassReverse http://127.0.0.1:28080/api
</Location>
# For most configuration files from conf-available/, which are
# enabled or disabled at a global level, it is possible to
# include a line for only one particular virtual host. For example the
# following line enables the CGI configuration for this host only
# after it has been globally disabled with "a2disconf".
#Include conf-available/serve-cgi-bin.conf
</VirtualHost>
更多VirtualHost配置信息请参考官方文档：VirtualHost官网配置文档
5.启用配置
新的配置可通过以下命令进行启用
# 启用新的配置
a2ensite test.example.com.conf
查看配置是否成功启用
ls /etc/apache2/sites-enabled/
当看到如下效果时说明新的站点配置已经启用
6.重启Apache服务
完成上述配置，需要重启Apache服务进行生效
sudo systemctl restart apache2.service
查看一下Apache服务额状态
sudo systemctl status apache2.service
当出现下图情况时，说明apache服务成功重启?。
四、访问测试
1. 配置本地hosts
由于本文中给出的域名test.example.com为测试使用的假域名（真域名则可跳过这步)，若想在本地访问生效，需要配置本地hosts，具体配置如下（这里以macos为例）
# 在/etc/hosts文件下加上下面这行
192.168.1.13 zzy.in.homelab.com
2. 使用postman测试
- 后端接口测试 当出现以下情况，说明后端api接口已经连通，成功的第一步！！！
- 前端页面测试 如果出现下图中的情况，那么恭喜整个部署过程大功告成?
总结
一文总结
本文通过使用Apache成功地部署了一个前后端分离的项目。Apache充当了前端应用和后端API之间的代理，并将它们组合在同一个域名下。这种部署方式不仅简化了配置和管理，还提供了更好的灵活性和可扩展性。本文给出的案例比较简单，更加复杂的配置读者可进一步通过学习官方文档来解决工作中更加复杂的问题。 最后希望笔者的文章能给大家带来帮助，内容方面如有不足之处也希望大家多多给出意见和建议，让我们共同进步！！！
