跳到主要内容

自行托管入门

本文面向完全没有 Web 编程经验的读者，从整体上解释 Web 应用各部分如何配合，将 PlayCanvas 应用或其他网页提供给用户浏览器。

Web 技术栈​

通常可将 Web 应用分为服务器端、客户端和静态内容三部分。大多数应用都包含这三部分，但某些部分可能非常简单，或交由其他服务处理。

服务器端代码​

用户在浏览器打开链接时，浏览器会向互联网上的服务器请求 HTML 页面。最简单的情况是，服务器将硬盘上的文本文件通过网络返回浏览器。

对于显示文本或图像的文档型网页，这已足够。但为提供交互功能，服务器通常会在收到请求后进行处理，再将结果包含在渲染出的 HTML 页面中。

例如，可以使用 PHP 在页面中显示当前日期和时间。

<html>
    <head>
        <title>My Homepage</title>
    </head>
    <body>
        <h1>The date is</h1>
        <?php
            echo date(DATE_RFC2822);
        ?>
        <p>Have a nice day</p>
    </body>
</html>

此 PHP 代码生成如下 HTML 页面，并发送给浏览器显示。

<html>
    <head>
        <title>My Homepage</title>
    </head>
    <body>
        <h1>The date is</h1>
        Mon, 11 Apr 2016 06:54:14 -0400
        <p>Have a nice day</p>
    </body>
</html>

服务器端可使用很多语言和框架，例如 PHP、Python、Node.js 和 Ruby。最终过程类似：接收 HTML 页面请求、进行处理、返回 HTML 数据。

在 PlayCanvas 中编写的代码不会在服务器端运行，PlayCanvas 也不会为项目提供服务器端代码。

客户端代码​

服务器并非唯一能编程和响应输入的位置。客户端代码在浏览器中运行；本文讨论的是浏览器执行的 JavaScript，它可以完成很多操作，最简单的例子是修改从服务器下载的 HTML 页面。

const title = document.getElementById("title");
title.innerHTML = "This is the new title";

复杂的例子则是使用 PlayCanvas 编写完整三维 WebGL 游戏。你在 PlayCanvas 中编写的 JavaScript 都属于客户端代码。

静态内容​

Web 应用中的一些内容不需要动态生成，例如图像、音频、文本，以及 PlayCanvas 的三维模型和纹理。可以将其理解为读取文件，只是文件来自网络而非本地硬盘，因此速度通常较慢。静态内容由 Web 服务器提供，有时与服务器端代码位于同一机器。服务器无需执行交互逻辑，只需返回所请求的文件。

提供静态内容时，关键是尽可能加快客户端下载速度。

托管 PlayCanvas 应用​

构建 PlayCanvas 应用时，你编写的是客户端 JavaScript，创建的资源属于静态内容。PlayCanvas 项目本身不包含服务器端代码。

通过 PlayCanvas 发布时，平台会提供应用 URL，返回启动客户端应用的 HTML 页面。页面加载后运行 JavaScript，再从静态内容服务器加载全部资源。

PlayCanvas 托管经过优化，目标是尽快将应用提供给全球用户。因此，最简单的部署方式是单击发布并分享 playcanv.as URL。但有些情况下仍需要自行托管。

自行托管 PlayCanvas 应用​

具体步骤详见自行托管。概括而言，你需要为前述 Web 技术栈各部分提供运行条件。

服务器​

标准 PlayCanvas 应用不需要服务器端代码，但仍需 Web 服务器提供静态内容，包括下载构建中的 index.html。浏览器通过请求此文件加载应用。Linux 上常见 Web 服务器有 Apache 和 Nginx，Windows 上常见的是 IIS。

缓存与压缩​

如服务器一节所述，包括 index.html 在内的全部 PlayCanvas 内容，都由 Web 服务器作为静态内容提供。

要获得良好性能，必须重视 gzip 压缩和正确的缓存响应头。配置方法请查阅 Web 服务器文档。

内容类型​

并非所有服务器都已配置 PlayCanvas 常用格式的内容类型，缺失配置可能导致应用加载错误。

如果浏览器提示资源未被正确提供，可能需要添加这些类型。

PlayCanvas 应用使用的内容类型如下：

文件类型内容类型
AACaudio/aac
BASISapplication/octet-stream
BINapplication/octet-stream
DDSimage/dds
GLBmodel/gltf-binary
JPEGimage/jpeg
JSapplication/javascript
JSONapplication/json
MP3audio/mpeg
MP4video/mp4
OGGaudio/ogg
PNGimage/png
TEXTtext/plain
WASMapplication/wasm
WAVaudio/x-wav
XMLapplication/xml

客户端​

客户端代码就是你为 PlayCanvas 应用编写的代码。浏览器加载 index.html 后，会启动应用并运行这些代码。