apache服务器部署antd项目

最近工作需要，使用apache服务器，部署前端项目。之前有用过nginx，发现nginx的教程一搜一大片，apache的教程少得可怜。

前端项目使用antd pro脚手架（基于 Ant Design 和 umi），在网上找了跟多资料，没有完全能说明白的，或者说没有完全能够符合需求的。

整体项目，属于前后端分离项目。所以apache服务器部署前端页面，并且需要实现反向代理功能。目前已在windows、centos8、suse linux12 sp5系统环境中已实现部署，故在此做一下记录。

补充官方文档地址：Documentation: Apache HTTP Server - The Apache HTTP Server Project

一、windows

windows下安装、部署都很简单。网上的教程也比较多。

1.下载apache服务器压缩包，解压。此处使用的apache版本：httpd-2.4.54-o111o-x64-vs17.zip

解压完成后，找到目录：/Apache24/conf/下的httpd.conf配置文件，先修改一下，Define SRVROOT "D:\java\Apache24"，解压的目录，然后保存。

win+R，输入cmd打开命令窗口。cd切换到解压后文件所放置的位置，进入bin目录。

执行httpd安装命令：

httpd -k install

若有拒绝访问的错误，要用管理员身份打开命令窗口，重新运行：httpd -k install

安装完成后，打开计算机管理，找到apache服务项，选择后，右键单击，便可选择相应操作（启动、停止、重新启动），也可以点击左上角相应的操作（停止、重启动）。

 服务启动成功后，打开浏览器，地址栏输入127.0.0.1:80，回车。则会展示默认的apache页面。

2.找到/apahce24/conf/httpd.conf配置文件，此文件是apache的核心配置文件。配置各种信息，也可以引入其它外部的配置文件。

此处修改为，解压出来的路径。

 此处为apache服务的端口号，我这里修改为8080

 

找到这些行，去掉前面的 # 号（意思为去掉注释）。

LoadModule rewrite_module modules/mod_rewrite.so
LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_http_module modules/mod_proxy_http.so

Include conf/extra/httpd-vhosts.conf #引入外部的配置文件

找到 Directory配置，将其中的AllowOverride None修改为AllowOverride All，一共有两处，全改了就可以了，下面截图中的配置。（方便查看，此处已将注释的行删掉了）

第一处

第二处，此处的路径就是存放前端项目文件的根路径，也可以自己指定。

找到/Apache24/conf/extra/httpd-vhosts.conf配置文件，创建虚拟主机配置反向代理。此处的端口号要与httpd.conf中的端口号对应。此处的路径也是存放前端项目文件的根路径，可以自己指定（要与httpd.conf中Directory配置的路径一致）。

ProxyPass、ProxyPassReverse的值可以先写为：http://www.baidu.com，进行验证。注意第一个 / 后面要有空格。修改完成后保存。

 重启服务

 此时在浏览器访问：127.0.0.1:8080，回车，页面会跳转至百度。则证明反向代理成功。

后续http://www.baidu.com可以修改为自己想要代理的地址。

ProxyPass、ProxyPassReverse参数后面的 / 可以写为：/api 这种方式，那么只有访问 /api 路径下的地址时，才会触发反向代理。

例如请求地址为：127.0.0.1:8080/api，此时才会跳转到百度。

 3.在Apache24目录下，创建".htaccess"配置文件。文件内容直接复制下面的能容。此配置是为了解决基于单页面项目跳转路由的问题。

    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]

4.找到/Apahce/htdocs目录，此目录是存放静态页面的根目录，默认是有一个index.html页面的，可以先备份一下，修改名称为index_back.html。然后将打包好的前端静态页面文件，复制到此处。重启服务，访问：127.0.0.1:8080

 二、centOS8

查看是否已安装，若已安装则卸载。

rpm -qa | grep httpd

卸载命令：

rpm -e --nodeps httpd

通过yum命令安装：

yum install httpd -y

出现下方提示，则说明没有安装yum源，需要先安装yum源。

配置yum源

 先进入/etc/yum.repos.d目录，删除此目录下所有的配置文件

cd /etc/yum.repos.d #进入此目录

ll                  #查看目录中文件

rm -rf ./*          #删除当前目录下所有文件

 下载centos8的镜像源：

wget -O /etc/yum.repos.d/CentOS-Base.repo https://mirrors.aliyun.com/repo/Centos-8.repo

 清除所有文件，建立缓存：

yum -y clean all   #清除所有文件
yum -y makecache   #建立缓存

重新执行apache安装：

yum install httpd -y

安装完成，通过yum命令安装，安装的apache目录在：/etc/httpd
默认存放页面的目录在：/var/www/html

 启动服务：

systemctl start httpd #启动

systemctl stop httpd #停止

systemctl restart httpd #重启

打开浏览器，地址栏输入：127.0.0.1:80，回车，展示默认的apache测试页面。

到此，apache服务已经安装完成，接下来进行配置。每次的配置修改，都要重启服务。

/etc/httpd/conf/httpd.conf配置文件，是apache的核心配置文件，包含端口号、引入外部配置文件、开启功能模块等配置。

找到此配置文件中的 Listen 参数，可进行端口号的修改，此处默认80端口。

找到标签，将标签中的内容替换为下方的内容。

	Options Indexes FollowSymLinks
	AllowOverride None
	Require all granted

	
		RewriteEngine On
		RewriteBase /
		RewriteRule ^index\.html$ - [L]
		RewriteCond %{REQUEST_FILENAME} !-f
		RewriteCond %{REQUEST_FILENAME} !-d
		RewriteRule . /index.html [L]
	

 配置反向代理，在/etc/httpd/conf/httpd.conf配置文件中的最后，添加下方内容：

	DocumentRoot "/var/www/html"

	ServerName yourServerName
	ProxyRequests Off
	ProxyPass / http://www.baidu.com
	ProxyPassReverse / http://www.baidu.com

此处的ProxyPass、ProxyPassReverse 两个参数值 设置为" / http://www.baidu.com"，注意 / 后有空格，意思是访问所有路径都会代理到 百度。测试先这么写，后续可根据需要进行修改。

此配置文件中的三处位置路径要一致，要修改的话也要一起修改：

  

配置SElinux，centos8默认是开启SElinux策略的，会阻止资源的访问。
检查 SElinux策略 httpd 网络访问的配置：

getsebool -a | grep httpd_can_network_connect

把httpd_can_network_connect设置为on，临时配置，重启后失效。

setsebool httpd_can_network_connect=1

若想永久生效则执行写入配置文件的命令，重启后保留配置。

setsebool -P httpd_can_network_connect 1

若以上方式无效，这执行下面的命令，关掉SElinux。。

setenforce 0 #关闭

setenforce 1 #开启

注：setenforce 0，只是临时关闭，重启系统后还会开启。若要永久关闭：输入命令vim /etc/selinux/config，将SELINUX=enforcing改为SELINUX=disabled，然后保存退出。

重启apache服务：

systemctl restart httpd

打开浏览器，地址栏输入：127.0.0.1:80，回车，页面会跳转至百度，则反向代理已生效。

最后将前端项目打包好的dist文件，放到/var/www/html路径下。

记得修改刚刚测试的反向代理，根据需要我这里这样修改。将页面文件放在"/var/www/html/dist"，三处的路径都要修改（上面截图），要一致。代理的请求修改为，只有访问"/api"开头的路由时才会代理到"127.0.0.1:8080"后台的服务。

重启服务，在浏览器访问127.0.0.1:80，展示前端页面。

若修改了存放页面的根目录后，访问提示没有权限的问题，则修改目录下所有文件 获取所有权限，例如将路径修改为"/home/yourname/html/dist"，则获取这个路径下所有文件的权限：

chmod -R 777 /home/yourname/html/dist

三、suse linux

1.安装Apache服务器：

通过zypper命令安装，安装的apache目录在：/etc/apache2

zypper install apache

如果安装失败，则配置zypper的仓库源，再执行安装命令。

zypper ar http://ftp5.gwdg.de/pub/opensuse/discontinued/distribution/12.5/repo/oss/suse main
zypper ar http://download.opensuse.org/distribution/12.5/repo/non-oss/suse/ nonoss
zypper ar http://download.opensuse.org/update/12.5/suse update

安装完成后，启动apache服务。

rcapache2 start

进行验证，浏览器访问：127.0.0.1:80，此时浏览器会展示下方页面。

 原因是，配置文件默认的页面路径是在：/srv/www/htdocs，而此目录下默认是空的，没有index.html文件，服务器找不到index.html页面，所以报错。其实可以先不用管这个问题，后续还要将前端打包好的页面文件放到这个路径下，到时访问就不会有问题。

若想先进行测试，可以先创建一个index.html页面，执行下面语句，再刷新浏览器。

echo "Hello world" > /srv/www/htdocs/index.html

接下来进行配置，在/etc/apache2/下找到loadmodule.conf配置文件添加下面三行，并保存。

LoadModule rewrite_module /usr/lib64/apache2-prefork/mod_rewrite.so
LoadModule proxy_module /usr/lib64/apache2-prefork/mod_proxy.so
LoadModule proxy_http_module /usr/lib64/apache2-prefork/mod_proxy_http.so

找到/etc/apache2/httpd.conf配置文件，此配置文件是apache的核心配置文件。修改的其它配置文件，最终都是引入到了此配置文件中，才生效的。找到下面这一行，将其标签注释掉（标签前加 # 号）。目的是引入上一步修改的loadmodule.conf配置文件。
Include /etc/apache2/loadmodule.conf

配置端口号：

Apache的端口号默认为80（如有需要可进行修改），在/etc/apache2/下找到listen.conf配置文件。

Listen 80，修改为 Listen xxxx（需要配置的端口号）。测试这里先不做修改，默认80端口。

配置前端静态文件路径：

在/etc/apache2/下找到default-server.conf配置文件，修改DocumentRoot 、Directory 两处配置，没有则添加。/srv/www/htdocs，此路径存放静态页面的位置，也可以根据自己的需要进行更换。配置文件默认会有一个标签，复制下面内容直接覆盖。

DocumentRoot "/srv/www/htdocs"



    Options Indexes FollowSymLinks
    AllowOverride None
    Require all granted

    
        RewriteEngine On
        RewriteBase /
        RewriteRule ^index\.html$ - [L]
        RewriteCond %{REQUEST_FILENAME} !-f
        RewriteCond %{REQUEST_FILENAME} !-d
        RewriteRule . /index.html [L]
    

配置请求的反向代理：

在/etc/apache2/vhosts.d/下找到vhost.template文件复制一份，将新文件后缀名改为”.conf”。
修改VirtualHost 配置，没有则添加。VirtualHost 标签中的端口号，需要与listen.conf配置文件中的端口号对应，默认是80端口。DocumentRoot的路径要与default-server.conf配置文件中的一致。
此处为了方便测试，将反向代理的地址写为：www.baidu.com，后续可根据需要进行更换。默认配置文件中会有标签，里面有很多的内容，直接全部删掉，替换为下面的内容。

    DocumentRoot "/srv/www/htdocs"

    ServerName yourServerName
    ProxyRequests Off

    ProxyPass / http://www.baidu.com
    ProxyPassReverse / http://www.baidu.com

配置完成，重启apache服务。

rcapache2 start #启动

rcapache2 stop #停止

rcapache2 restart #重启

浏览器访问：127.0.0.1:80，页面跳转至百度。

最后一步，就是将前端antd项目打包好的dist目录下的全部文件，放到/srv/www/htdocs路径下，打开浏览器进行访问。当然为了方便，完全可以将 default-server.conf、vhost.conf中页面路径的值修改为“/srv/www/htdocs/dist”，dist目录下就是所有的前端文件。别忘了将，代理的地址改为实际业务的地址。

 

如果修改了静态页面存放的路径，浏览器访问时，提示没有权限，则执行命令获取DocumentRoot 对应目录下所有权限。例如：页面文件存放在 "/home/yourname/htdocs"。

chmod -R 777 /home/yourname/htdocs

注：centos以及suse linux环境中全装配置apache时，我都是使用的root用户进行的操作，为了防止在操作过程中的一些权限不足的问题。总的来说不同环境下安装apache服务，安装的目录结构可能不同，但是配置的思路都是一样的。

结束语：为了帮助到更多的小伙伴，可以进行转发，但请注明出处。