16

我目前正在开发一个新项目，整个页面应该在 HTML5/JS 中针对 API/JSON 实现。由于整个应用程序应该只包含一个 HTML 文件（index.html）和一个 JS MVC 应用程序（可能是主干Js），我正在考虑 SEO 和用户友好的 url。

在那里我遇到了

window.document.pushstate('','title','/url');

借助该 html5 功能，我可以定义 URL，而无需真正离开或重新加载页面。但是...出于性能原因和低费用，我想将应用程序部署到像 Amazon CloudFount 这样的 CDN中。我不需要任何服务器基础设施（当然除了我需要的 API 基础设施）

那么，我可以配置一个 CDN（实际上是任何 CDN，如 AWS、Azure、Akamai）以提供相同的 HTML 文件，而不管 URL 叫什么

http://www.example.com => 提供 index.html

http://www.example.com/any_subpage => 提供 index.html

等等 ...

您可以在http://html5.gingerhost.com找到一个工作示例。但是该页面的创建者可能会使用 .htaccess 文件或熟悉的东西将所有内容映射到同一个文件。我想在 CDN 中提供相同的功能。

4

9 回答 9

4

任何 CDN 都应该具有定义源服务器的能力。如果边缘位置没有文件，CDN 会联系此服务器以提供文件。

好消息是源服务器可以是任何服务于网页的服务器，例如 Apache、Nginx 等。这意味着您可以应用任何类型的重写规则。

如果您不想自己设置源服务器，您可以查看在S3 上托管您的（静态）站点。最近他们引入了网络重定向，可以帮助您以不同的“别名”提供相同的文件。如果做不到这一点，您可以查看重新定义标准错误文档，但我不确定是否仍会发送错误状态代码。

于 2012-11-22T04:50:01.083 回答
3

CDN 旨在通过从可能离客户最近的地理位置提供静态资源来提供静态内容。CDN 技术并非旨在对请求进行重定向或服务器端处理。您将需要这里涉及的其他内容来完成该部分。问题只是这是服务器端技术还是某种负载平衡器/防火墙请求重写（以避免使用服务器端技术）。

我不认为有一个真正的平台无关的方式来做到这一点。您将始终与服务器端技术或负载平衡器/防火墙平台相关联。但听起来您可能已经有了这个限制，因为您需要在某个地方托管您的 JSON API？即使你还没有决定平台，几乎任何平台都应该允许你做一些基本的路由。如果你可以提供 JSON Http 请求，你应该也可以做一些页面路由。

作为旁注，我不相信您想从您域中所有可能的 URL 返回您的“index.html”。您需要一些有效 URL 和无效 URL 的列表。在这种情况下，您无论如何都需要 ping 后端以验证请求 URL。这进一步向我表明，服务器端技术将更适合此任务，然后是较低级别的盲目“包罗万象”重定向。

我个人的偏好是使用您最喜欢的 MVC 框架来提供具有所需 URL 结构（几乎所有页面加载）的可索引内容，然后在页面加载后使用您的 JSON api 处理该内容（您希望能够的任何动态内容）去做）。整个事情，包括页面加载和 API，都是从同一个服务器平台/环境提供的。

于 2012-11-22T04:33:50.313 回答
1

Nginx http 服务器可以这样做：

location /{
    # serve a file
}

或者您可以自定义链接，例如

location /my_html{
     # serve html file
}

location /cdn/{
     # serve rest files
}

你甚至可以通过正则表达式检查 url

location ~ /cdn/.*\.js${
    # serve cdn
}
于 2012-11-22T00:40:27.050 回答
1

将您的 404 页面符号链接到索引页面。这样，当在您的网络内容上找不到请求的 URL 时（关于任何链接，如您的情况所示），将提供 404 页面，这反过来又是索引页面本身。

# ln -s index.html 404.html

于 2012-09-09T07:37:40.387 回答
1

我和你在同一条船上，似乎 cdn 不支持 url 重写。以下解决方案并不能完全解决我们的“问题”，但如果您使用“拉式”CDN 提供商，则非常接近节省托管费用。

默认页面（index.html）的初始加载将只提供一小部分 html，基本上是基本的 html 结构，如下所示：

<!doctype html>
<html lang="en">
<head>
    <title>something</title>
    <!-- Load the script "js/main.js" as our entry point -->
    <script data-main="js/main" src="http://mycdn.com/js/libs/require/require.js"></script>
</head>
<body>

</body>
</html>

其余代码将通过一些（异步）模块加载器（如 require.js）加载——所有这些代码都来自您的 CDN，包括 require.js。

但是，如果您使用的是拉式 CDN，即使是这一点 html 也将很快来自 CDN。只要 CDN“拉取”提供程序在其缓存中找不到 html5 pushstate url 的文件，它就会点击此页面。

在您的服务器上，您必须有某种路由来将每个与 CDN 未提供文件扩展名的模式匹配的请求路由到该文件。

是的，每次遇到新 URL 时，CDN 都会访问该站点（如果您使用的是拉式 CDN），但在获取它之后，它会从其缓存中将其分发给所有用户，并且不会访问您的站点又是网址。此外，CDN 提供商对您网站的点击量将是微不足道的，因为您提供的是少量静态 html。而且，如果您将此 html 文件的文件头设置为永不过期（此文件应该永远不会更改），CDN 提供商可以将文件保存很长时间（取决于提供商），因此您的服务器上的命中几乎可以归结为每个唯一网址的一次性事件。

于 2012-12-11T03:18:09.313 回答
1

如果您正在考虑 SEO 和友好的 URL，您可以使用pushState, 当然。请记住：

  • 将所有路由重定向到 index.html 时，您还将向搜索引擎提供完全相同的 html 内容，无论它们进入哪个 URL。然后，您的 URL 有多“对 SEO 友好”就无关紧要了。

  • 如果您正在考虑 IE 支持，它不支持 History API，因此您需要更高级别的历史框架或 IE 的其他一些解决方法。这很可能包括#基于 - 的 URL。因此，每个视图基本上都有两个不同的 URL，当人们共享 URL 或弄清楚搜索机器人如何捕获指向您网站的链接时，这是需要考虑的事情。

我建议您在寻找合适的云主机之前考虑以下两个选项：

  1. 将一些数据逻辑卸载到后端，并为每个视图提供至少一些可消化的内容。您仍然可以在您的应用程序中删除或解析该内容并执行您的 pushstate/jsonAPI 操作以获得更好的用户体验，但您将拥有“真实”、可扫描的 URL，用于搜索引擎、opera mini 用户和其他一些不幸的浏览器。这些静态页面不必提供相同的功能甚至样式，只需将其视为最后的后备。

  2. 忘记应用程序的 CDN，只需将 CDN 用于静态文件、图像、脚本等。您可以为应用程序本身提供一些备用方案，但真正拉动服务器的是媒体。这样做将使您能够控制应用程序及其背后的服务器，但您仍然可以使用 CDN 来实现它的目的——提供静态内容。

于 2012-11-24T22:55:14.600 回答
1

我们最近联系了edgecast.com（这是一个类似于 cloudfront 的 cdn），通过他们的支持，他们告诉我这确实是他们可以做的事情，但不能通过他们的标准界面。当我们需要通配符路由到单个文件时，我被告知只需联系他们。

至于你的问题：是的，有可能。只需通过他们的实时聊天与他们联系，他们会为您提供帮助，祝您好运！

更多（负面）信息：像这样的包罗万象的规则意味着某些浏览器（读取 IE）所做的愚蠢的 favicon.ico-forced-request 将被捕获，并且将再次下载常规 html 页面。事实上，所有针对根域的自动请求（例如，iframe 也请求 favicon）都会被捕获，并且会下载常规的 html 文件。这对你来说可能是也可能不是问题，但对我来说，所有这些隐藏的请求让我重新思考解决方案，并使用背后的网络服务器来完成实际的包罗万象的工作。真是惭愧。

于 2012-11-22T09:58:40.360 回答
1

如果您有自己的域指向 CDN（我知道 CloudFront 允许您这样做），您可以使用 CloudFlare ( https://www.cloudflare.com/ ) 作为您的用户和 CDN 之间的反向代理。

感谢他们的免费计划，您可以创建一个将所有内容重定向到 index.html 的规则。我认为这是实现您想要的唯一方法，因为 CDN 被配置为仅提供您所知道的静态现有文件。

于 2012-11-22T10:34:16.300 回答
0

这家伙有类似的问题，并使用了 S3 / CloudFront。他的所有网址都重定向到 index.html，状态码为 200。

这是一种解决方法，因为它涉及将 index.html 设置为错误页面。

查看详情：https ://kkob.us/2015/11/24/hosting-a-single-page-app-on-s3-with-proper-urls/

于 2016-10-25T16:59:16.887 回答