Quickstarters
如何构建 Gatsby 前端并将其连接到后端?
30 分
在本教程中,您将使用 gatsby 构建一个待办事项列表应用程序,并将其连接到 back4app 提供的强大后端。 本指南非常适合那些希望将基本的 crud(创建、读取、更新、删除)操作集成到快速静态网站中的人。 到最后,您将拥有一个功能齐全的应用程序,演示如何利用 back4app 的后端服务,同时使用 gatsby 实现快速的前端。 构建全栈应用程序可能会很具挑战性,涉及后端设置、数据库管理、身份验证和部署等复杂性。 为了简化这个过程,我们使用 back4app——一个 https //blog back4app com/backend as a service baas/ ——这样您就可以专注于构建您的 gatsby 网站,而它负责托管、数据库和 api。 back4app 提供了一整套后端服务,包括现成的数据库、身份验证、用于服务器端逻辑的云代码以及无缝的 sdk 集成。 它对容器化部署的支持使其成为现代全栈应用程序的优秀选择。 使用这些工具,您可以快速开发和部署应用程序,而无需管理服务器基础设施。 关键要点 通过遵循本教程,您将学习到: 初始化一个现代的gatsby项目。 集成后端服务以管理您的应用程序数据。 实现核心crud操作以提供互动用户体验。 部署一个完全的 https //todoapp ku5ofg8s b4a run/ ,使用back4app上的容器化工作流。 先决条件 在开始之前,请确保您具备以下条件: node js和npm 从 https //nodejs org/ 安装最新的lts版本的node js,并通过在终端中运行 node v 和 npm v 来验证。 基本的gatsby知识 需要熟悉react、graphql和gatsby的数据层。如果您是gatsby的新手,建议先复习其基础知识。 一个back4app账户 请在 https //www back4app com/ 注册以设置和管理您的后端服务。 在具备这些先决条件后,您就可以开始设置项目并开始构建。 项目设置 首先设置您的本地开发环境并初始化您的gatsby项目。 验证是否已安装 node js (lts版本) 。如有需要,请从 https //nodejs org/ 下载。检查您的安装: node v npm v 使用gatsby cli创建一个新的gatsby项目。运行以下命令(将 todo app 替换为您想要的项目名称): npx gatsby new todo app 切换到您的项目目录: cd todo app 启动开发服务器以验证设置: npx gatsby develop 您的gatsby网站现在应该在本地运行。打开提供的url以确认。接下来,您将设置您的后端在back4app上以管理数据存储和api交互。 创建待办事项后端 back4app提供一个完全托管的后端服务,由 parse 提供支持,提供nosql数据库、身份验证、云代码和自动生成的api,开箱即用。 本节将指导您创建一个 task 数据模型,以存储您的待办事项,并将其与您的 gatsby 前端连接。 设置您的后端应用程序 登录 到您的 https //www back4app com/ 并点击 "创建新应用。" 命名您的应用程序 (例如, todogatsbyapp ) 并选择 nodejs/parse 作为后端类型。 应用程序创建后,导航到 "数据库" > "浏览器" 点击 "创建一个类" 并选择 "自定义" 将类命名为 task 并设置 类级别权限 以允许公共读取和写入(您可以稍后细化这些设置)。 在 task 类中,添加以下字段: 标题 (字符串)– 任务的标题。 描述 (字符串)– 关于任务的详细信息。 完成 (布尔值)– 指示任务是否已完成。 截止日期 (日期)– 任务的截止日期。 点击 "保存" 以完成您的模式。 将 back4app 与 gatsby 集成 将 back4app 集成到您的 gatsby 项目中,使用 parse javascript sdk 。通过 npm 安装 sdk npm install parse 通过使用您的 应用程序 id 和 javascript 密钥 来初始化 sdk。 从您的 back4app 仪表板的 应用设置 > 安全性与密钥 中检索这些凭据。 在您的项目中,创建一个文件(例如, src/utils/parse config js ) 并添加以下配置: // src/utils/parse config js import parse from "parse/dist/parse min js"; const parse app id = 'your application id'; const parse js key = 'your javascript key'; const parse server url = 'https //parseapi back4app com/'; parse initialize(parse app id, parse js key); parse serverurl = parse server url; export default parse; 您现在可以将此配置导入到您的 gatsby 页面和组件中,以与您的后端进行交互。 使用 gatsby 开发前端 现在您的后端已连接,使用 gatsby 构建您的待办事项应用程序的用户界面。 您将创建页面和组件来添加、显示、更新和删除任务,同时利用 react 和 graphql。 组织您的组件 您的应用程序将包括以下关键组件: taskform js – 处理添加新任务。 tasklist js – 显示所有任务并提供标记任务完成或删除它们的控件。 taskitem js – 表示一个单独的任务,并提供切换完成状态或删除它的操作。 在 src 中创建一个 components 文件夹,并添加这些文件: mkdir src/components touch src/components/taskform js src/components/tasklist js src/components/taskitem js 使用 react hooks 管理状态 使用 react hooks ( usestate 和 useeffect ) 进行状态管理和副作用处理。在您的主页面(例如, src/pages/index js ),按如下方式设置状态: // src/pages/index js import react, { usestate, useeffect } from "react"; import parse from " /utils/parse config"; import taskform from " /components/taskform"; import tasklist from " /components/tasklist"; const indexpage = () => { const \[tasks, settasks] = usestate(\[]); const fetchtasks = async () => { try { const task = parse object extend("task"); const query = new parse query(task); const results = await query find(); settasks(results map(task => ({ id task id, task tojson() }))); } catch (error) { console error("error fetching tasks ", error); } }; useeffect(() => { fetchtasks(); }, \[]); return ( \<div classname="container"> \<h1>to do list\</h1> \<taskform fetchtasks={fetchtasks} /> \<tasklist tasks={tasks} fetchtasks={fetchtasks} /> \</div> ); }; export default indexpage; 构建任务表单组件 在 taskform js , 创建一个受控表单以添加任务。使用 usestate 管理输入值,并将数据提交到 back4app // src/components/taskform js import react, { usestate } from "react"; import parse from " /utils/parse config"; const taskform = ({ fetchtasks }) => { const \[title, settitle] = usestate(""); const \[description, setdescription] = usestate(""); const handlesubmit = async (e) => { e preventdefault(); try { const task = parse object extend("task"); const task = new task(); task set("title", title); task set("description", description); task set("completed", false); await task save(); fetchtasks(); settitle(""); setdescription(""); } catch (error) { console error("error adding task ", error); } }; return ( \<form onsubmit={handlesubmit}> \<input type="text" placeholder="task title" value={title} onchange={(e) => settitle(e target value)} required /> \<input type="text" placeholder="description" value={description} onchange={(e) => setdescription(e target value)} required /> \<button type="submit">add task\</button> \</form> ); }; export default taskform; 显示任务列表 在 tasklist js , 通过遍历任务数组并使用 taskitem 组件来渲染任务列表 // src/components/tasklist js import react from "react"; import taskitem from " /taskitem"; const tasklist = ({ tasks, fetchtasks }) => { return ( \<div> {tasks length === 0 ? ( \<p>no tasks available\</p> ) ( tasks map(task => ( \<taskitem key={task id} task={task} fetchtasks={fetchtasks} /> )) )} \</div> ); }; export default tasklist; 创建任务项组件 在 taskitem js , 创建一个组件,允许您将任务标记为完成或删除它 // src/components/taskitem js import react from "react"; import parse from " /utils/parse config"; const taskitem = ({ task, fetchtasks }) => { const handlecomplete = async () => { try { const query = new parse query("task"); const tasktoupdate = await query get(task id); tasktoupdate set("completed", !task completed); await tasktoupdate save(); fetchtasks(); } catch (error) { console error("error updating task ", error); } }; const handledelete = async () => { try { const query = new parse query("task"); const tasktodelete = await query get(task id); await tasktodelete destroy(); fetchtasks(); } catch (error) { console error("error deleting task ", error); } }; return ( \<div classname={`task item ${task completed ? "completed" ""}`}> \<h3>{task title}\</h3> \<p>{task description}\</p> \<button onclick={handlecomplete}> {task completed ? "undo" "complete"} \</button> \<button onclick={handledelete}>delete\</button> \</div> ); }; export default taskitem; 为您的应用程序设置样式 在 styles css 文件中创建基本样式,位于 src 文件夹中 / src/styles css / container { max width 600px; margin 40px auto; padding 0 20px; text align center; font family sans serif; } container h1 { margin bottom 20px; } form { display flex; flex direction column; align items center; gap 10px; margin bottom 20px; } form input\[type="text"] { width 80%; max width 400px; padding 8px; box sizing border box; font size 1rem; } form button { padding 8px 16px; cursor pointer; font size 1rem; border none; background color #eaeaea; transition background color 0 2s ease; } form button\ hover { background color #ccc; } container p { font size 1rem; } task item { display flex; flex direction column; align items center; justify content center; gap 12px; border 1px solid #ccc; border radius 6px; padding 15px; margin 10px 0; background color #fafafa; text align center; transition background color 0 2s ease; } task item completed h3, task item completed p { text decoration line through; color #888; } task item h3 { margin 0; font size 1 1rem; } task item p { margin 0; font size 1rem; } task item button { padding 6px 12px; border none; background color #eaeaea; cursor pointer; font size 0 9rem; } task item button\ hover { background color #ccc; } @media (min width 600px) { task item { flex direction row; } } 在你的 gatsby 布局或页面中导入这个 css(例如,在 gatsby browser js ) // gatsby browser js import " /src/styles css"; 完成用户界面 你的 gatsby 待办事项应用程序现在具有与 back4app 集成的动态前端和自定义样式。该应用程序使你能够添加、显示、更新和删除任务,同时确保高效的前端与后端通信。 接下来,你将使用 back4app 的 web 部署平台部署你的 gatsby 网站。 在 back4app web 部署上部署前端 back4app web deployment 提供了一个完全托管的、容器化的环境来托管您的应用程序。通过基于 docker 的部署,您可以轻松打包您的 gatsby 网站并进行部署。 为生产配置 gatsby gatsby 默认生成静态网站。使用以下命令构建您的生产就绪网站: npx gatsby build 为您的网站创建 dockerfile 在创建一个 dockerfile , 首先在您项目的根目录中创建一个 dockerignore 文件,并添加以下代码行: git node modules eslint prettier git vscode readme md dockerfile docker compose yml public cache 接下来,创建一个 docker compose yml 文件以使用 docker compose 命令。该文件的目标应为您 dockerfile 中的部署阶段。您的 docker compose yml 文件应包含以下命令: version '3' services app image todo app gatsby build context dockerfile dockerfile target deploy ports \ "8000 80" 现在,您在项目根目录中创建一个 dockerfile 来容器化您的 gatsby 网站: from node 20 as build workdir /usr/src/app copy run npm install run npm run build from nginx 1 18 alpine as deploy workdir /usr/share/nginx/html run rm rf / copy from=build /usr/src/app/public entrypoint \[ "nginx", " g", "daemon off;" ] 在本地测试容器 在部署之前,构建并测试您的 docker 容器: docker build t todo gatsby frontend 运行容器 docker run p 8000 80 todo gatsby frontend 在浏览器中访问 http //localhost 8000 以验证您的网站是否正确提供服务。 推送到 github 并通过 back4app 部署 将您的项目推送到 github git init git add git commit m "initial commit for back4app deployment" git branch m main git remote add origin \<your github repository url> git push u origin main 然后,使用 back4app web 部署进行部署: 登录到 https //www back4app com/containers 点击 "创建新应用" , 提供一个名称,并选择 github 仓库 授权 back4app 访问您的仓库并选择 todo gatsby 仓库 选择 dockerfile 部署 并确认构建设置 点击 "部署" 以启动构建过程 监控和管理部署 部署后,使用 back4app 仪表板来 查看日志以进行故障排除 监控容器性能和资源使用 在新提交时触发重新部署 如有需要,配置自定义域 测试和调试您的应用程序 一旦部署,彻底测试您的 gatsby 网站: 验证 api 连接: 打开浏览器的开发者控制台 (f12 → 网络) 以检查任务操作期间的 api 调用。 添加和检索任务: 使用 ui 添加任务,然后刷新以确认数据在 back4app 数据库浏览器中的持久性。 测试 crud 操作: 确保标记任务为完成和删除在后端正确反映。 处理边缘情况: 验证表单输入并使用开发者工具模拟慢速网络条件。 如果出现问题,请查看 back4app 日志或检查您的 api 配置。 使用 back4app 服务的最佳实践 通过以下方式增强您的应用程序的性能和安全性: 优化 api 调用: 对于多个操作使用批量请求,并仅查询必要的字段。 保护敏感数据: 将应用程序 id 和 javascript 密钥等凭据存储在环境变量中。使用 gatsby,创建一个 env 文件: gatsby parse app id=your app id gatsby parse js key=your js key 启用自动扩展 在 back4app web 部署中激活自动扩展以管理高流量。 增强安全性 限制类级别权限 (clps) 以控制数据修改,并根据需要设置 acl。 利用云代码 将复杂逻辑卸载到云代码中,以提高性能并减少 api 暴露。 结论 您现在已经使用 gatsby 构建了一个全栈待办事项应用程序,前端使用 gatsby,后端使用 back4app 的强大服务。 本教程指导您设置 gatsby 项目,集成 parse sdk,并使用 back4app 上的容器化工作流部署您的网站。 在继续开发时,请考虑添加高级用户身份验证、实时更新和第三方集成等功能。 有关更多信息和支持,请参考 https //www back4app com/docs 。

