当你准备部署你的React应用程序时，你面临着选择一个托管平台的问题。这里你有多种选择，其中很多都需要你建立服务器或容器。
在这个简短的教程中，我想向你介绍Twilio Runtime，一个无服务器托管平台，当它与Twilio无服务器工具包配对时，部署你的React应用就像在终端上输入yarn deploy 。
准备好你的React应用程序
为了遵循本教程，你需要一个React应用程序来部署到云端。为此，你可以用create-react-app创建一个全新的应用程序。在你的终端，导航到一个合适的父目录，然后运行以下命令：
npx create-react-app react-twilio-serverless
cd react-twilio-serverless
现在你应该能够用以下命令在本地运行React应用程序：
yarn start
几秒钟后，你的浏览器中的一个新标签将显示熟悉的React启动器应用程序：
如果你决定使用你自己的React应用程序，而不是一个全新的应用程序，请确保你可以使用yarn build （或者npm run build ）构建你的应用程序，因为你将使用这个命令作为无服务器部署的一部分。
在本教程中，你将不再使用React应用的本地开发版本，因此你可以在验证应用运行后用Ctrl-C 来停止它。
将Twilio Serverless添加到项目中
在本节中，你将把Twilio Serverless支持添加到React项目中。
安装Twilio CLI
Twilio Serverless Toolkit是作为Twilio CLI的一个插件发布的，所以下一步是安装CLI。你可以在文档的Twilio CLI Quickstart页面上找到详细的安装说明，但如果你想知道简单的版本，你可以直接运行以下命令：
npm install -g twilio-cli
安装Twilio无服务器工具包
一旦Twilio CLI安装完毕，你必须将Twilio Serverless Toolkit添加到其中，它是以插件形式安装的。详细的安装说明在文档中，但实际的命令是这样的：
twilio plugins:install @twilio-labs/plugin-serverless
将CLI连接到你的Twilio账户
Twilio CLI需要对Twilio进行API调用，所以它需要能够代表你进行认证。你可以运行以下命令，将Twilio CLI连接到你的Twilio账户：
twilio login
你需要输入你的Twilio账户SID和Auth Token。你可以在Twilio控制台中找到这些。你还会被要求输入一个配置文件名称，凭证将被存储在这个名称下。你可以使用默认的或你选择的任何名称。
创建一个Twilio无服务器项目
在这一步，你将在React项目的一个子目录中添加Twilio Serverless Toolkit所需的项目文件。在React项目目录下运行以下命令：
twilio serverless:init serverless --empty
命令完成后，你将会有一个新的serverless子目录，并有一些自己的文件和子目录。
serverless/assets子目录是将要部署的静态资产复制的默认位置。在本教程中，无服务器工具包将被配置为使用React项目的构建目录作为资产文件夹，因此不使用assets子目录。你可以把它留在那里，如果你愿意，也可以删除它。
无服务器/功能子目录不会在本教程中使用，但它有时非常有用，因为它提供了一个可以将项目的后端代码作为部署的一部分来定义的位置。拥有创建无服务器后端的选项是Twilio Runtime的特点之一，它与其他无服务器选项（如GitHub Pages）不同，后者只限于静态资产。
将项目部署到云端
要部署React应用，需要做两件事：
- React项目需要被构建。在大多数情况下，这是通过运行
yarn build，然后运行命令react-scripts build，正如你的package.json文件中所配置的。 - 必须发布Twilio Serverless Toolkit的
deploy命令，使用步骤1中生成的构建目录作为静态资产的来源来进行部署。
为了使部署体验尽可能方便，你要在package.json文件中定义一个yarn deploy 命令，背靠背运行这两个动作。在你喜欢的文本编辑器中打开package.json，找到scripts 部分，它看起来应该差不多是这样的：
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
就在build 命令的定义之后，添加deploy 命令，如下所示：
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"deploy": "react-scripts build && twilio serverless:deploy --service-name react-twilio-serverless --cwd serverless --assets-folder ../build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
deploy 命令运行两个命令，用&& 分隔。第一个命令是由React定义的build 命令。这可以确保在部署时React项目是最新的。如果你使用一个非标准的构建命令，确保在这里输入它。
实际的部署命令是在第二部分。这是twilio serverless:deploy 命令，有几个选项：
--service-name react-twilio-serverless为部署提供一个名称。这个名字将被用于Twilio Runtime分配给部署项目的URL中。如果你愿意，可以随意使用一个不同的名字。--cwd serverless告诉工具包，Twilio Serverless Toolkit项目的顶级目录在serverless子目录中。--assets-folder ../build配置静态资产的位置，作为React构建过程中生成的构建目录。这个目录是以相对路径的形式给出的，从serverless目录开始。
你准备好部署了吗？只需运行新创建的命令：
yarn deploy
几秒钟后，该命令的输出会给你分配给你的React应用程序的所有资产的公共URL。在这个列表中找到index.html文件：
Assets:
...
https://react-twilio-serverless-1234-dev.twil.io/index.html
...
✨ Done in 23.33s.
你可以使用这个URL从世界的任何地方访问你的React应用程序
升级你的部署
当你继续使用你的React应用程序时，你会做出改变，并需要升级部署的版本。要刷新这个部署，只需再次运行yarn deploy 命令，所有资产将被重新加载。
你可能已经注意到，分配给你部署的项目的子域以-dev 后缀结束。Twilio Runtime部署可以有多个环境，默认使用dev 。使用环境，你可以创建一个复杂的生产部署工作流程，例如，一个构建被部署到dev 环境进行初始测试，提升到staging 环境进行更密集的测试，最后再次提升到prod 环境供公众使用。Twilio Serverless Toolkit包括一个推广选项，以启用这些高级工作流程。
为了保持本地项目与部署的链接，你可以将serverless子目录中的所有文件添加到项目的源代码控制中。将本地项目与部署版本联系起来的文件在名为*.twiliodeployinfo*的文件中。请注意，这个文件是在你第一次部署后创建的。
Twilio Runtime平台的局限性
Twilio Runtime和无服务器工具包提供了一种非常方便的方式，可以将你的JavaScript前端部署到云端，而不需要维护服务器。与所有无服务器平台一样，你需要注意一些限制。
在我看来，最重要的限制是缺乏对自定义域名的支持。你的应用部署的域名由Twilio决定，而且总是twil.io的一个子域。为你的部署使用自定义URL的唯一方法是在Twilio部署的应用程序前面连接一个反向代理服务器。如果你可以访问一个主机，那么你可以手动配置Nginx，并在上面设置你自己的域名和SSL证书，让它将所有请求转发到Twilio Runtime分配的URL。如果你喜欢呆在无服务器的领域，那么Cloudflare工作者是一个不错的选择。
除了预分配的URL之外，我经常发现我想定义index.html页面，以便在指定没有文件名的URL时默认提供，但遗憾的是Twilio无服务器工具包无法做到这一点。如果你按照上面的建议使用反向代理，那么可以在代理中配置默认页面。
总结
我希望你发现Twilio Runtime是部署前端项目的可行选择。这是一个强大的无服务器平台，也让你可以选择为你的应用实现Node.js后端。请查阅Twilio Runtime文档，了解其所有功能。
我迫不及待地想看到你用Twilio Runtime部署的东西了。
