如何构建 Gatsby 前端并将其连接到后端？

在本教程中，您将使用 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 。