不备案高速访问企业站,国内外服务器分开部署方案

一. 前言

由于众所周知的原因,在墙内建立一个网站需要很多“流程”,买域名、域名备案、买服务器、做企业认证,常常需要客户配合提交各种证件,整个流程走下来一个月左右,还需要说服客户配合,其中“心累”,同为一个Freelancer的你也许能感受到吧。

  如果每一个站都要这么做,其实是有一些沟通成本和信任成本在里面的,对于一些比较大的项目,值得为此付出,但对于普通的企业站或展示性的小网站而言,我们总是希望能够快速搞定收工(收钱) 😃 ,毕竟我们不想花太多时间和精力跟客户解释为什么要提交营业执照、为什么要法人拍照签名这些东西,还要接受客户质疑的眼光,甚至有时候因为这点事儿项目就黄了。

二. 解决方案

为了免备案,很多人会选择国外服务器比如HK或者米国的,但问题大家也都知道:速度慢,前台访问慢,后台管理上传慢,特别是大图上传浏览…如果用的是虚拟主机,还有可能ftp传不上去源代码。(啧啧啧… T_T)

  一次偶然看到restful接口的一些文章,我突然想到,对于企业站而言,需要后台操作的只是管理员,而前台基本都是访问,不需要其他功能,所以如果可以把站的前端放在国外,把后台管理部分放在国内,然后用restful接口进行数据传递,不就可以解决所以问题了?(其实还是有些小问题的>_< ),所以我尝试了一下分开布置,效果不错。

这样做的优点是:

  1. 只需备案自己的服务器和域名,其他企业域名和服务器都无需备案;
  2. 访问速度比整站放到国外服务器要快

三. 分开部署原理

我的部署是这样子的,首先准备一台国内阿里云ECS,自然的也就需要一个国内域名,这里是your-domain.com ,LAMP环境,而国外的虚拟主机和企业的域名www.qiye.com绑定,如下图:




  我在虚拟主机上部署了前端的代码,在ECS上部署了后台管理系统,后台管理系统提供接口,用于获取后台的数据。

整个访问的流程如下:

  1. 用户访问企业站www.qiye.com,向虚拟主机请求网页;
  2. 如果虚拟主机有需要向ECS请求一些数据的话(比如网站名称、网站版权信息等),则会向ECS发出请求,如果没有则直接跳到第4步;
  3. ECS返回Json信息,如果有第2步请求的话;
  4. 虚拟主机把HTML返回给用户;
  5. 用户浏览器通过ajax向ECS请求信息;
  6. ECS返回信息。

不难看出,其实我们仍需要备案的,但我们要备案的只是自己的域名和服务器,而其他客户的企业域名则不再需要备案。

流程中,第2、3步不是必需的,网站名称、网站版权等信息也可以在第5步的时候请求,而且会比虚拟主机向ECS请求快(假设访问用户在国内的话),因为虚拟主机和ECS隔着一道墙 😃

  这里第2、3步的请求,是在服务端用PHP、python等去做请求,请求完之后,将数据嵌入html中,然后一并返回,而5、6步的请求则用js,例如用jquery的ajax方法来做请求。

下面我用伪代码模拟写一下吧 😃

  1. 前端:可以用jquery进行ajax请求,再将数据渲染至网页。
<div class="news-list"><div>

<script>
$(function(){
    $.get('api.your-domain.com/get/newslist',{
        page: 1
    }, function(data){
        if(data.success){
            $('.news-list').html(data);  // 如果请求成功,则渲染至div层。
        }
    })
});
</script>
  1. 后台接口:这里我提供两个接口,一个是apiGetNewsList获取新闻列表,一个是apiGetNewsDetail获取一篇新闻详情。
// 获取新闻列表的接口
function ApiGetNewsList(page=1){
    newsList = searchDB(page);
    return toJSON(newsList);
}

// 获取新闻详情的接口
function ApiGetNewsDetail(newsId){
    news = searchDB(newsId);
    return toJSON(news);
}

当有人访问接口时,比如访问:api.your-domain.com/get/newslist?page=1,返回json格式的新闻列表,访问:api.your-domain.com/get/newsdetail?newsid=2,返回json格式的新闻详情,用户浏览器拿到这些数据后,就可以用js渲染到网页上去。

返回的json数据:

// 新闻列表的json数据
{
  1: { "title":"新闻标题1", "createTime":"2020-02-02", "id":1 },
  2: { "title":"新闻标题2", "createTime":"2020-02-03", "id":2 },
  3: { "title":"新闻标题3", "createTime":"2020-02-04", "id":3 },
}

// 新闻详情的json数据
{
  1: { 
    "title":"新闻标题1",
    "createTime":"2020-02-02",
    "id":1 
    "content": "<p>文章正文....</p><img src='api.your-domain.com/123.jpg'>"
  }
}

四. 后记

你可能会问,这样国内的服务器和域名不也需要备案吗?是的,国内的域名your-domain.com和ECS服务器一样需要备案,这个域名和ECS一般都是你自己的,你只需要备一次案,而其他客户的企业域名和服务器都在国外,不需要备案,所以无论有多少个企业站,客户网站只需要从你的ECS得到接口,网站就能运行起来了。对于网站访问者而言,打开企业域名,他们就能访问到企业网,至于里面是怎么运行的,我相信他们不会打开F12控制台去看网页的源代码吧 😃

  至此,整个部署和请求的过程我也就说完了,最后,我们再来说说这样做的优缺点吧。

优点:

  1. 只需本案自己的域名服务器,其他企业站的域名服务器都无需备案;
  2. 访问速度比整站放到国外服务器上要快;
  3. 国外服务器只需要存放少量的文件(html,css,js),数据都在国内;

上面说只需自己备案一次,算最大的一个优点吧。客户不需要麻烦的备案,也不需要忍受国外服务器龟速的访问,所以这么大费周章也是值得的。

重点就是能够最大限度地减少向虚拟主机的数据请求

举个例子:用户浏览器拿到html之后,从里面的图片<img src='api.your-domane.com/123.jpg'>再去请求图片信息,这个时候,请求的图片在国内服务器,用户通过ajax向ECS请求列表和新闻详情也都是在国内,速度自然会快很多。

  管理员对网站进行管理也是在国内,上传速度会很快,而遇到前端修改的时候,我们只需要上传一些简单的html和css、js,自然比整个框架上传到虚拟主机FTP上要快上许多。

缺点:

这么做,缺点也很多,首先你的接口是暴露在公网的,你能调用自然别人也能调用,你的图片也是被跨域访问,所以,如果你是做一些商城或者安全性要求高的站,就不建议这么做,这里只是对普通的企业站用这种方式,毕竟只是展示性的功能,别人愿意调用企业的新闻或者产品,帮企业宣传也行,何乐不为:)

  第二个确定就我们后台管理是在ECS上的,所以企业登陆、管理操作需要打开的是国内的域名,这个国内域名一般都是你的二级域名,这些许对客户不友好,也会增加他们的疑虑,但相对麻烦的备案而言,这是可以接受的吧 😃

  第三,如果网站对外不仅需要提供信息展示,还需要提供一些登陆操作的话,这种方式就不太好,解决的办法也有,就是用auth2.0这种授权模式,但这无疑增加了我们的开发成本。所以如果客户要求的功能比较多的,还是应该乖乖叫客户去备案,他好、我也好 😃

  以上就是我的分享,如果有什么错误,欢迎大家指正,如果大家有什么更好的解决方法,那么也请告诉我,谢谢大家的阅读🙏

<think>嗯,用户遇到了在云服务器部署React应用并用Nginx开放外网访问时出现超时的问题。我需要一步步分析可能的原因,帮助他们解决这个问题。 首先,可能网络连通性有问题。用户需要确认服务器是否允许外网访问,检查安全组规则有没有开放80或443端口。另外,防火墙设置是否正确,比如ufw或firewalld有没有允许HTTP/HTTPS流量。然后,本地网络是否有问题,可以试试用手机热点访问,排除本地网络限制。 接下来,Nginx配置是否正确。确认React的build目录路径在Nginx配置里是否正确,root指向的是是实际的路径。然后检查server块里的监听端口是否正确,比如listen 80或443。还有,可能需要检查是否配置了正确的try_files规则,确保前端路由正常工作。如果用了反向代理到后端,代理设置是否正确,比如proxy_pass的地址和端口。 然后,React应用本身的问题。确认build是否成功,没有错误。如果用了客户端路由,比如React Router,Nginx是否配置了处理404错误的规则,把所有请求重定向到index.html。另外,检查环境变量是否正确,特别是在生产环境中可能需要配置PUBLIC_URL。 服务器状态也可忽视。查看Nginx是否在运行,使用systemctl status nginx。检查端口监听情况,用netstat -tuln | grep ':80'看看80端口是否被Nginx监听。查看Nginx的错误日志,通常是在/var/log/nginx/error.log,可能有更详细的错误信息。 其他可能性包括DNS解析问题,域名是否正确解析到服务器IP,可以用ping或nslookup检查。服务器资源是否足,比如内存或CPU占用过高导致服务可用。还有,云服务商的特定限制,比如某些厂商需要备案才能开放80端口,可能需要改用其他端口测试。 最后,逐步排查步骤建议:先在服务器本地用curl测试,确认Nginx是否正常响应;检查安全组和防火墙,确保端口开放;逐步简化配置,先使用最简单的Nginx配置测试,排除其他因素;对比本地和生产环境的差异,看看是否有配置一致的地方。 总结下来,可能的原因有很多,需要一步步排除,从网络、Nginx配置、React构建到服务器状态逐一检查。用户可以根据这些步骤来定位问题所在,然后针对性地解决。</think>在云服务器部署 React 应用并通过 Nginx 开放外网访问时出现超时问题,需通过以下步骤排查和解决: --- ### 一、网络连通性检查 1. **云服务器安全组配置** - 确认安全组已开放 `80(HTTP)` 和 `443(HTTPS)` 端口 - 检查入站规则是否包含 `0.0.0.0/0` 或指定 IP 段的访问权限 ```bash # 示例:安全组规则应包含类似条目 Type: HTTP | Port: 80 | Source: 0.0.0.0/0 ``` 2. **服务器防火墙状态** ```bash # 检查 UFW 防火墙(Ubuntu) sudo ufw status # 检查 firewalld(CentOS) sudo firewall-cmd --list-all ``` - 若防火墙启用,需开放对应端口: ```bash sudo ufw allow 80/tcp # Ubuntu sudo firewall-cmd --permanent --add-service=http # CentOS ``` 3. **本地网络测试** - 使用手机热点访问,排除本地网络限制 - 通过 `curl -I http://服务器IP` 直接测试服务器响应 --- ### 二、Nginx 配置验证 1. **基础配置示例** ```nginx server { listen 80; server_name your-domain.com; # 或服务器IP location / { root /path/to/react/build; # 确认路径正确 try_files $uri $uri/ /index.html; # 处理前端路由 index index.html; } } ``` 2. **常见配置错误** - 路径错误:确认 `root` 指向 React 的 `build` 目录 - 路由未处理:未配置 `try_files` 会导致刷新 404 - 端口冲突:检查是否有其他进程占用 80 端口 ```bash sudo lsof -i :80 ``` 3. **重载 Nginx 配置** ```bash sudo nginx -t # 测试配置语法 sudo systemctl reload nginx # 应用新配置 ``` --- ### 三、React 应用排查 1. **构建验证** - 确保执行过 `npm run build` - 检查 `build` 目录是否生成完整静态文件 - 测试本地生产环境: ```bash serve -s build -l 3000 # 需先安装 serve ``` 2. **路由兼容性问题** - 若使用 React Router,需在 `package.json` 添加: ```json "homepage": ".", ``` --- ### 四、服务器端诊断 1. **查看 Nginx 日志** ```bash tail -f /var/log/nginx/error.log # 实时错误日志 tail -f /var/log/nginx/access.log # 访问日志 ``` 2. **端口监听测试** ```bash # 在服务器内部测试端口响应 curl 127.0.0.1:80 telnet 127.0.0.1 80 ``` 3. **DNS 解析验证** ```bash dig your-domain.com # 检查域名解析是否正确 ping your-domain.com ``` --- ### 五、特殊场景处理 1. **云服务商限制** - 国内服务器需完成 ICP 备案才能开放 80 端口 - 临时方案:改用非标准端口(如 8080)测试 2. **HTTPS 重定向问题** - 若强制 HTTPS 但未配置证书,会导致连接失败 - 测试时先禁用 HTTPS 配置 --- ### 六、终极测试方案 1. **最小化验证** ```bash # 临时关闭防火墙 sudo ufw disable # Ubuntu sudo systemctl stop firewalld # CentOS # 创建测试页面 echo "Hello World" | sudo tee /var/www/html/index.html ``` - 访问 `http://服务器IP` 验证基础服务是否可达 --- 通过以上步骤,可系统性地定位到网络层、配置层或应用层的具体问题。建议按顺序逐步排查,优先验证安全组和基础网络连通性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值