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

apache服务器部署antd项目_第1张图片

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

apache服务器部署antd项目_第2张图片

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

执行httpd安装命令:

httpd -k install

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

apache服务器部署antd项目_第3张图片

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

apache服务器部署antd项目_第4张图片

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

apache服务器部署antd项目_第5张图片

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

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

apache服务器部署antd项目_第6张图片

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

 apache服务器部署antd项目_第7张图片

找到这些行,去掉前面的 # 号(意思为去掉注释)。

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,一共有两处,全改了就可以了,下面截图中的配置。(方便查看,此处已将注释的行删掉了)

第一处

apache服务器部署antd项目_第8张图片

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

apache服务器部署antd项目_第9张图片

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

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

apache服务器部署antd项目_第10张图片

 重启服务

apache服务器部署antd项目_第11张图片

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

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

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

apache服务器部署antd项目_第12张图片

例如请求地址为: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

apache服务器部署antd项目_第13张图片

 二、centOS8

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

rpm -qa | grep httpd

卸载命令:

rpm -e --nodeps httpd

通过yum命令安装:

yum install httpd -y

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

apache服务器部署antd项目_第14张图片

配置yum源

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

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

ll                  #查看目录中文件

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

apache服务器部署antd项目_第15张图片

 下载centos8的镜像源:

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

apache服务器部署antd项目_第16张图片

 清除所有文件,建立缓存:

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

apache服务器部署antd项目_第17张图片

重新执行apache安装:

yum install httpd -y

apache服务器部署antd项目_第18张图片

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

apache服务器部署antd项目_第19张图片

apache服务器部署antd项目_第20张图片

 启动服务:

systemctl start httpd #启动

systemctl stop httpd #停止

systemctl restart httpd #重启

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

apache服务器部署antd项目_第21张图片

到此,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",注意 / 后有空格,意思是访问所有路径都会代理到 百度。测试先这么写,后续可根据需要进行修改。

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

apache服务器部署antd项目_第22张图片

apache服务器部署antd项目_第23张图片

apache服务器部署antd项目_第24张图片  

配置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"后台的服务。

apache服务器部署antd项目_第25张图片

重启服务,在浏览器访问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,此时浏览器会展示下方页面。

apache服务器部署antd项目_第26张图片

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

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

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

apache服务器部署antd项目_第27张图片

接下来进行配置,在/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目录下就是所有的前端文件。别忘了将,代理的地址改为实际业务的地址。

apache服务器部署antd项目_第28张图片

 apache服务器部署antd项目_第29张图片

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

chmod -R 777 /home/yourname/htdocs

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

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

你可能感兴趣的:(服务器,linux,centos,apache)