--- title: 使用Back4App托管全栈网络应用开发指南 slug: docs-ch/advanced-guides/web-application-hosting description: 学习如何使用Back4App构建及托管前后端完整应用，配置命令行和项目设置，快速部署高效应用。 image: https://www.back4app.com/_public/img/back4app-og.png createdAt: 2024-01-26T13:45:06.946Z --- # 创建和托管全栈网络应用程序 ## 介绍 启动全栈应用程序可能令人畏惧。您必须担心托管前端、配置/提供服务器以及将所有内容连接在一起。您可能不知道，Back4App 提供了上述所有内容的最佳基础设施。 您可以轻松地使用 Back4App 的 Web 托管服务来提供前端 HTML（包括 React 和 Vue 等前端框架）。Cloud Code 是一个出色的后端，启动迅速。在本指南中，我们将在 Back4App 上构建一个完整的，尽管是初步的，网络应用程序。 这是由 [约翰·康西丁](https://github.com/considine) 编写的客座教程，他是 [K-Optional](https://koptional.com/) 的首席开发人员。 ## 目标 在 Back4App 上启动全栈网络应用程序 ## 前提条件 :::hint{type="info"} 要完成本教程，您需要： - 熟悉命令行 - [Git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) 和 [NPM](https://docs.npmjs.com/getting-started) 应该已安装 - 拥有一个 Back4App 账户，并安装和配置 CLI 工具，详见 [这里获取帮助](https://blog.back4app.com/cli-parse-server/) - 在您的 Back4App 仪表板上创建一个全新的项目- 详见 [这里获取帮助](https://www.back4app.com/docs/get-started/new-parse-app). - 本教程必须设置为 Parse Server 版本 3.1.x。有关更多详细信息，请直接查看下面的内容 ::: :::hint{type="danger"} 该项目将使用新发布的版本 3.1 Parse Server。这意味着您需要确保您的 Back4App 项目设置为此版本- 否则将无法工作。在您的项目仪表板上，转到服务器设置 » 管理 Parse Server（设置）并选择 3.1.1（可能处于 Beta 版本）。 有关迁移到 Parse Server 3.1.x 的更多信息，请参见 [本指南](https://www.back4app.com/docs/advanced-guides/parse-server-3)。 如果您不理解此项目的云代码语法，请参见此指南。 ::: ## 项目背景 我们将推出一个初步的票务交换应用程序。它允许用户注册、登录，并发布他们出售的不同活动的票——管理员可以使用仪表板创建这些活动。其他用户可以通过他们的电子邮件或电话号码与他们联系，具体取决于发布者选择显示的内容。 我已经推出了应用程序 [在这里](http://ticketlister.koptional.com/), 使用我们在本指南中探讨的相同代码。您可以自由创建帐户，发布票务，并查看应用程序的外观。 本教程的目的是演示如何高效地启动一个应用程序。因此，我们将从一个基本完成的代码库开始，而不是逐行讨论代码，专注于部署的简便性。您只需在一个地方编辑代码： - 在第一步中，您需要添加项目设置（应用程序 ID、JavaScript 密钥和服务器 URL）。 不过，您可以随意编辑和扩展此应用程序。 ## 项目结构 在您开始准备代码之前，了解此项目的文件结构非常重要。我将在本指南中将其作为参考。完成后，您的目录将如下所示： :::BlockQuote 1 project 2 │ .parse.local 3 │ .parse.project 4 │ .gitignore 5 │ README.md 6 └───public 7 │ │ index.html 8 │ │ login.html 9 │ │ signup.html 10 │ └───css 11 │ │ signin.css 12 │ │ bootstrap.min.css 13 │ └───js 14 │ │ main.js 15 │ │ parse.js 16 │ │ signin.js 17 │ │ signup.js 18 │ 19 └───cloud 20 │ main.js ::: 此设置的主要要点是： 1. 前端代码位于 **public** 目录中。前端只是用户与之交互的应用程序部分。 2. 后端代码位于 **cloud** 目录中。后端在应用程序中执行幕后工作。这包括将内容保存到数据库和发送数据。 *前端通过发送HTTP请求告诉后端该做什么。在我们的案例中，这意味着运行云函数* :::hint{type="info"} **请注意这个设置的简单性。三个HTML文件代表这个应用程序中的三个页面。我们的整个后端是一个单一的文件！** ::: 在第二步中，我们将简要查看前端代码——也就是公共目录。在第三步中，我们转向后端。 ## 1 - 准备文件 **如前所述，[先决条件](https://www.back4app.com/docs/advanced-guides/web-application-hosting#prerequisites), 你应该在Back4App上创建一个新的项目，并且[配置你的CLI工具](https://blog.back4app.com/2017/01/20/cli-parse-server/)** 在访问任何代码之前，你需要下载并准备好它。在这一步中，我们正是这样做的。请注意，你将在命令行上运行几个命令。我会给你每一个命令以便你复制和运行。如果在这个步骤中感到困惑，不用担心；这只是将Back4App应用程序连接到我在Git上的项目所需的过程。了解发生了什么并不重要。 在这一步我们： 1. 使用CLI初始化一个本地目录与您的Back4App项目 2. 使用.git将示例项目文件拉入此目录 **与Back4App的初始化** 在您的命令行中运行 :::BlockQuote 1 b4a new ::: 您应该会看到提示： :::BlockQuote 1 您想创建一个新应用，还是向现有应用添加云代码？ 2 输入"(n)ew"或"(e)xisting": ::: 选择“e”以使用现有应用。然后从列表中选择您创建的应用程序。 接下来，系统会询问您要将代码安装到哪个目录。如果您没有偏好，可以直接按‘回车’。为了这个项目，我将假设目录名为“ticketlister”。最后，当被问到时： :::BlockQuote 1 目录名称： 2 您可以设置一个空白项目或下载当前已部署的云代码 3 如果您希望设置一个空白项目，请输入"(b)lank"，否则按回车 ::: 只需按回车（不要按空白）。当此命令返回时，您可以cd进入新目录。您应该会看到两个目录，一个名为“cloud”，另一个名为“public”。 **您的整个输出应该看起来像这样：** :::BlockQuote 1 $ b4a new 2 您想创建一个新应用，还是向现有应用添加云代码？ 3 输入"(n)ew"或"(e)xisting": e 4 1: ticketlister 5 选择要添加到配置的应用：11 6 请输入我们可以下载最新已部署的 7 您的应用"ticketlister"的云代码的文件夹名称 8 9 目录名称： 10 您可以设置一个空白项目或下载当前已部署的云代码 11 如果您希望设置一个空白项目，请输入"(b)lank"，否则按回车： 12 成功为当前项目配置电子邮件："JACKCONSIDINE3\@GMAIL.COM" 13 您的云代码已创建在/tmp/ticketlister。 14 15 这包括一个"Hello world"云函数，因此一旦您部署， 16 您可以通过打印的curl命令测试它是否有效。 17 18 接下来，您可能想用以下命令部署此代码： 19 20 cd /tmp/ticketlister 21 b4a deploy 22 23 部署后，您可以通过运行以下命令测试它是否有效： 24 curl -X POST \\ 25 -H "X-Parse-Application-Id: Ivy4QAJQuAjDhpqQ2D3MCR4jlrCvDcVVH6yom1kk" \\ 26 -H "X-Parse-REST-API-Key: yLgPHNEnt0jnzWy9BYt6ZCWHqmsWRyvCfsmqrvuS" \\ 27 -H "Content-Type: application/json" \\ 28 -d "\{}" \\ 29 https\://parseapi.back4app.com/functions/hello 30 31 $ cd ticketlister 32 $ ls 33 cloud public ::: **将应用程序与项目文件同步** 除了云和公共文件夹外，您的目录中将有两个文件： - .parse.local - .parse.project 这些文件包含与 Back4App 项目相关的数据。其他所有内容都应被来自 [该仓库](https://github.com/back4app/back4app-ticketlister). 以下是最简单的方法： :::BlockQuote 1 cd ticketlister 2 git init 3 git remote add origin https\://github.com/back4app/back4app-ticketlister 4 git fetch origin 5 git checkout --force -b master --track origin/master ::: 如果一切正常，您现在应该拥有以下文件： :::BlockQuote $ ls -R README.md cloud index.js package-lock.json package.json public ./cloud: main.js ./public: css index.html js login.html signup.html ./public/css: bootstrap.min.css signin.css ./public/js: main.js parse.js signin.js signup.js ::: 别担心——那是最难的部分！现在我们可以专注于项目。 ## 2 - 前端 作为提醒，该应用程序的前端代码位于 **public** 目录中。为了保持相对简单，我选择不使用像 React、Angular 或 Vue 这样的前端框架。这样就没有外部依赖或构建。 :::hint{type="info"} 该项目确实使用了 HTML5 Web 组件。这些组件在浏览器中原生支持。它们有助于封装用户界面的不同部分的功能。它们允许开发者声明新的 HTML 元素（想想‘\

’）。否则，它们只使用普通的 JavaScript。 ::: 在** public/js** 目录中，有 4 个 JavaScript 文件： :::BlockQuote $ ls public/js \# main.js parse.js signin.js signup.js ::: 1. **main.js** 是主页面加载的代码，**index.html**。这个页面是用户列出票据等的地方。 2. **signup.js** 是注册页面加载的代码，**signup.html** 3. **signin.js** 是登录页面加载的代码，**login.html** 4. **parse.js** 是所有页面使用的一个简单文件。它创建与后端的连接。这个文件是你唯一需要编辑的文件，项目将无法正常工作，除非你这样做！ **添加你的 Back4App 凭证** 首先，你需要从你的 Back4App 项目中获取你的 **应用程序 ID** 和你的 **JavaScript 密钥**。登录 Back4App 后，选择你的项目。然后点击左侧的 **应用设置**，并选择 **安全性与密钥**。 ::Image[]{src="https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/wm1jDb3MY4-REOljU0KMQ_image.png" size="70" width="602" height="852" position="flex-start" showCaption="false"} 你应该能看到显示的几个密钥。获取 **应用程序 ID** 和 **JavaScript 密钥** 并将它们保留在手边。 最后，打开 **public/js/parse.js** 并将每个字符串放在适当的位置。记得确保 serverURL 是 **https\://parseapi.back4app.com**。 ```javascript 1 // PART 1: Put your APP ID, JS Key, and SERVER URL 2 Parse.initialize( 3 '', // YOUR APP ID 4 '' // YOUR Javascript KEY 5 ); 6 // YOUR SERVER URL 7 Parse.serverURL = 'https://parseapi.back4app.com'; ``` 应用程序现在可以与服务器通信！ **对代码的浅层探讨。** 虽然本项目中的所有代码超出了本指南的范围，但我鼓励您浏览每个文件。没有什么太复杂的，我想花一点时间给出一个1000英尺的概述。 - 该项目使用 [HTML5 Web 组件](https://developer.mozilla.org/en-US/docs/Web/API/Web_components) 来封装界面的每个逻辑部分。 - HTML 文件中的重要标记位于 `HTML