基于Apache Httpd 搭建站点(前端)服务器(含: 虚拟站点、代理)

【简介】 用于展示前端开发的页面，便于远程访问。

【关键词】 静态站点, 前端页面, Vue/React, httpd, Linux(CentOS)

【工具软件】 FileZilla

【主要步骤】

1. 购买云服务器;
2. 安装 httpd;
3. 配置多站点（虚拟站点）;
4. 注销（删除）云服务实例；

【详情】

第一步、购买云服务器

本人习惯使用百度云很久了，各位朋友可以根据自己习惯选着合适的平台。

重点：

1. 请统一linux版本为 CentOS;
2. 选择 "自定义购买"，“按量付费” , （如此才便宜！！）
3. 选择 "购买弹性公网IP"，保证可以公开访问。

“操作截图如下”

【说明】 等一分钟左右会收到百度云发送的短信。

第二步、安装 httpd

[关键命令]

# 安装httpd
sudo yum install httpd
# 注册httpd服务
sudo systemctl enable httpd
# 启动httpd
sudo systemctl start httpd

“操作截图如下”

节点：安装成功。

第三步、配置多站点（虚拟站点）

前面已经完成了安装、启动 httpd服务。这里实现 将我们开发、打包的前端文件上传到 服务器指定的路径。

另：为了提高服务器的利用率，需要配置多个站点（用不同的端口区分）;

注意2个路径：

1. '/var/www/html/'：'默认的前端文件'路径;
2. '/etc/httpd/conf/httpd.conf': httpd服务的配置文件

关键配置参数

# httpd.conf

<Directory "/var/www/html">

#... ... 略

# Gong: 页面重写（单页面应用）
RewriteEngine On
# 规则: 访问路径重定向到 index.html
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

</Directory>

# 代理, 将接口 代理到指定端口的 node服务
ProxyPass "/api"  "http://106.xx.xx.xxx:3000/api"
ProxyPassReverse "/api"  "http://106.xxx.xxx.xxx:3000/api"

# 新增虚拟站点
Listen 8081
<VirtualHost *:8081>
    DocumentRoot "/var/www/html_8081"
</VirtualHost>

<Directory "/var/www/html_8081" >
 Options Indexes FollowSymLinks
 AllowOverride  None
 Require all granted
</Directory>

在修改好配置文件后，需要重启 httpd服务

# 启动
sudo systemctl start httpd
# 关闭
sudo systemctl stop httpd
# 重启
sudo systemctl restart httpd

具体操作截图如下。

将服务器端的 httpd 相关文件下载到本地，利于高效率编辑。

第四步、注销（删除）云服务实例

我们选择的是【后付费】模式，便于短时间使用云服务器，费用较低。不用像别的 一次最低一个月几十块。

最后

有时候更新配置，重启httpd服务后, 访问新增站点依然失败。请查看云服务器的“安全组”规则，是否打开了对应的端口。 比如：

【笔记：代理第三方 https 网站】

// 目的: 通过 apache 反向代理功能，配置私人 "梯子"
// 实现 中转访问其他网站(比如: 百度、谷歌)
// 重点: 需要安装 SSL 模块, mod_ssl
// yum install mod_ssl
// 需要重启服务;

# 代理 外网站点
Listen 8082
<VirtualHost *:8082>
	SSLProxyEngine On
	ProxyRequests Off
    ProxyPass /  https://www.baidu.com/
    ProxyPassReverse /  https://www.baidu.com/
</VirtualHost>