Docs 菜单
Docs 主页
/ /
Atlas App Services
/ /

托管单页面应用程序

在此页面上

  • Overview
  • 步骤

许多使用现代框架(如 React、Vue 和 Angular)构建的 Web 应用程序都是单页应用程序 (SPA),它们动态地在客户端处理路由和渲染,而不是从服务器获取每个渲染的页面。您可以使用 Atlas App Services 托管您的 SPA 并将其提供给客户端。

要托管应用,您需要在 App Services 中指定它是 SPA。默认情况下,App Services 通过返回托管在指定资源路径的文件来处理对给定资源的请求,如果没有文件与路径匹配,则返回 404。然而,SPA 渲染在单个特定 HTML 文件中,因此所有请求都应返回该文件,无论请求的资源路径存在与否。

本指南介绍如何配置 App Services 托管以将所有资源请求重定向到单个文件,从而支持 SPA 模式。

注意

单页面应用程序中的 404 错误

启用单页面应用程序托管后,无论请求的路由如何,App Services 始终返回带有应用程序根目录的 HTTP 200 响应。 这意味着您无法为 SPA指定自定义 404 页面。 相反,您应该在应用程序中包含自定义代码来处理无效路由。

1

单页面应用程序在单个特定的 HTML文件中呈现,通常是 /index.html 。 该文件应包含连接和呈现应用程序所需的JavaScript代码,这些代码可以内联在<script>标签中,也可以从外部文件导入。 您还需要托管不打算通过 CDN访问权限的所有资源。

当您准备好托管 SPA 时,运行应用程序的构建脚本,然后将构建文件夹上传到 App Services。

2

一旦开始托管应用程序文件,您就可以通过直接请求根 HTML 文件立即访问您的 SPA。但是,对根文件以外的任何路径的请求都将返回 404。这可能会破坏使用客户端路由器或以其他方式依赖于 URL 路径的 SPA 的预期行为。

要配置 App Services 为所有请求提供 SPA 的根页面,请执行以下操作:

  1. 导航到App Services用户界面中的 Hosting页面,然后单击Settings标签页。

  2. 确保您没有指定自定义 404 页面。 如果已启用自定义 404,请单击垃圾桶图标 ( )在指定的 404 页面旁边。

  3. 单击Single Page Application旁边的Choose File 。 选择 SPA 的根 HTML 文件,然后单击Select

  4. 单击 Save(连接)。

注意

在用户界面中启用托管

在开始将App Services CLI与静态托管结合使用之前,必须在App Services用户界面中启用托管。

1

要使用App Services CLI配置单页面应用程序,您需要应用程序配置文件的本地副本。

要提取最新版本应用的本地副本,请运行以下命令:

appservices pull --remote="<Your App ID>"

提示

您还可以从 App Services 用户界面的Deploy > Import/Export App屏幕下载应用程序配置文件的副本。

2

单页面应用程序在单个特定的 HTML 文件中呈现,通常是/index.html 。 该文件应包含连接和呈现应用程序所需的 JavaScript 代码,可以内联在<script>标签中,也可以从外部文件导入。 您还需要托管不打算通过 CDN 访问的所有资源。

当您准备好托管SPA 时,运行应用程序的构建脚本,然后将输出构建文件夹复制到应用程序目录的/hosting/files目录中。

3

hosting/config.json中,设立default_response_code设置为200 ,设立default_error_path设置为 SPA 的 HTML 根文件的资源路径。 请务必在完成后保存文件。

hosting/config.json
{
"enabled": true,
"default_response_code": 200,
"default_error_path": "/index.html",
}
4

更新并保存hosting/config.json后,您可以将更新的配置推送到远程应用。 App Services CLI在推送时立即支持您的 SPA。

appservices push --remote="<Your App ID>" --include-hosting

后退

刷新 CDN 缓存

在此页面上