Jamstack 入门

在过去的几年里，Jamstack 一直是开发者讨论中炙手可热的技术栈。在本文中，我们将探讨 Jamstack 的独特之处，以及如何开始创建自己的 Jamstack Web 应用。

让我们开始吧！

什么是 Jamstack？

Jamstack 是一种旨在让您的 Web 应用更快、更安全、更易于扩展的架构。许多人认为 Jamstack 是现代 Web 开发的下一个发展方向——原因如下。

Jamstack 可以说是目前最轻量级的技术栈。它无需担心基础设施和服务器，因为它不需要与数据库进行真正的交互，并且主要依赖第三方 API 来提供身份验证和支付等附加功能。Jamstack
应用由静态 HTML 页面组成，使用 JavaScript 将其动态化，并通过 API 和预构建的标记语言 (Markup) 来增强第三方服务。Jamstack 的名称源于JavaScript、API和超文本标记语言 (Hypertext Markup)。

Jamstack如何工作？

虽然 JAMstack 包含令人困惑的“堆栈”一词，但它更像是一种面向 Web 应用程序的架构，承诺比传统模型更快、更便宜、更安全。传统模型是客户端-服务器模型，其中应用程序由 Web 服务器动态提供。

Jamstack 背后的关键概念是消除应用程序对后端服务器的需求，至少以您可能习惯的形式。

相反，Jamstack 网站只是静态文件，由一种称为 CDN（内容分发网络）的特殊文件托管服务提供。CDN 实际上是遍布全球的文件服务器网络，所有服务器都保存着您网站文件的副本。
一旦您的静态网站被浏览器加载，您就可以使用 JavaScript 生成对第三方服务的 HTTP 请求，包括数据库、搜索、身份管理、支付处理和无服务器功能。

Jamstack 优势

那么 Jamstack 有什么好处呢？为什么要费力地改造你的 Web 应用架构呢？
Jamstack 的架构更快、更便宜、更安全，这得益于它使用了 CDN 并省去了 Web 服务器。

1. CDN 通常比 Web 服务器更快！
由于 CDN 不处理请求，而只提供文件服务，因此请求/响应循环要短得多。而且，由于 CDN 可以在网络边缘提供服务，更靠近用户，因此响应延迟可以最小化。

2. CDN 很可能比 Web 服务器便宜！
如果您使用 Web 服务器，它必须全天候运行，监听请求。由于云计算是按分钟计费的，所以即使服务器空闲，您也需要付费。CDN
托管通常更便宜，因为 CDN 服务仅按服务的数据量收费，因此其空闲时间不产生任何费用。

3. CDN 通常比 Web 服务器更安全！
最后，与 Web 服务器不同，CDN 不处理请求，因此对黑客的潜在攻击途径有限。Jamstack 网站仍然会连接到云数据库等服务，但由于这些服务由专业的第三方管理，因此安全漏洞通常很小。

如何开始使用 Jamstack？

构建前端

让我们从 Jamstack 前端开始。虽然 Jamstack 网站的核心是交付给浏览器的静态 HTML，但 JavaScript 和构建这种体验的 UI 框架才是其架构流行的原因。Jamstack
的一个常用前端框架是 Next.js。以下演示了如何使用 Next.js 进行 Jamstack 开发。最简单的入门方法是在终端中输入以下命令，我将项目命名为 mynextapp：

$ npx create next-app mynextapp

这将为我们生成一个默认的样板页面。
通过在代码编辑器中打开文件夹或在终端中输入以下内容，导航到我们刚刚创建的目录：

$ cd mynextapp
$ code .

以下是 create-next-app 命令生成的默认启动 Next.js 文件树的示例：

该node_modules文件夹是存储所有依赖项的地方。
pages 文件夹用于存放所有页面组件。Next.js 中的每个页面都有自己的 React 组件。目前，我们唯一的组件是index.js组件，它将用于主页。
api 文件夹用于 API 端点。
该app.js文件充当根组件，我们所有不同的页面组件都在这里呈现：

公共文件夹是我们存储所有公共资产的地方，例如图像。
样式文件夹包含我们所有的 CSS 文件和 CSS 模块。
.gitignore用于版本控制。
package.json是为了跟踪我们的各种依赖关系。

在该文件中package.json，我们有dev脚本，它为我们启动本地开发服务器，使我们能够在浏览器中预览我们的应用程序。

在终端中，运行以下命令：

$ npm run dev

在您的浏览器中，输入localhost:3000，将显示以下内容：

浏览器中显示的内容在index.js组件中定义。将主组件中的所有内容替换为

标题很简单：

	import Head from 'next/head'
	import styles from '../styles/Home.module.css'

	export default function Home() {
	return (
	<div>
	<h1>Homepage</h1>
	</div>
	)
	}

	import Head from 'next/head'
	import styles from '../styles/Home.module.css'

	export default function Home() {
	return (
	<div>
	<h1>Homepage</h1>
	</div>
	)
	}

view raw gistfile1.txt hosted with ❤ by GitHub

现在，我们可以在浏览器中看到我们的新内容：

组件index.js在到达浏览器之前就已经被预渲染了。在开发过程中，这是通过服务器端渲染完成的。服务器渲染组件，然后将 HTML 文件发送到浏览器，这个过程在浏览器每次请求页面时都会发生。

页面和路线

pages 文件夹是我们创建所有页面组件的地方。Next.js 中的每个页面都由一个 React 组件驱动。因此，对于“关于”页面，我们会有一个“关于”组件；对于“定价”页面，我们会有一个“定价”组件，等等。每个页面组件在 pages 文件夹中都有自己的文件。因此，每个组件的文件名和位置都与该特定页面的路由绑定。

例如，在 pages 文件夹中创建一个about.js文件。Next.js 将自动创建一个路由/about（即该文件的名称）来提供此组件。路由名称与文件名绑定。

该规则的一个例外是index.js。Next.js 不会创建路由/index，它只会创建路由 /。所以我们只需转到域的根目录即可查看该index.js组件。
在about.js文件中，让我们创建一个无状态函数组件并将其导出：

	const About = () => {
	return (
	<div>
	<h1>About</h1>
	<p>Lorem ipsum</p>
	</div>
	)
	}

	export default About;

view raw gistfile1.txt hosted with ❤ by GitHub

	const About = () => {
	return (
	<div>
	<h1>About</h1>
	<p>Lorem ipsum</p>
	</div>
	)
	}

	export default About;

view raw gistfile1.txt hosted with ❤ by GitHub

在浏览器中进入/about查看关于组件页面：

我们还可以在页面文件夹中创建包含页面组件的子文件夹。

让我们创建一个名为 pricing 的子文件夹和一个名为的文件plan1.js。在该plan1.js文件中，我们将创建一个名为 Plan1 的无状态函数组件：

	const Plan1 = () => {
	return (
	<div>
	<h1>Plan 1</h1>
	</div>
	)
	}

	export default Plan1;

view raw gistfile1.txt hosted with ❤ by GitHub

	const Plan1 = () => {
	return (
	<div>
	<h1>Plan 1</h1>
	</div>
	)
	}

	export default Plan1;

view raw gistfile1.txt hosted with ❤ by GitHub

当我们有子文件夹时，Next.js 也会根据子文件夹创建路由。因此，在本例中，路由为：localhost:3000/pricing/plan1。
使用 Next.js 创建多页网站就是这么简单。

构建后端

内容是任何网站或应用程序的核心。内容的形式多种多样，例如博客或在线商店。像 Auth0 这样的工具提供用户身份验证和管理，这本身就带来了诸多挑战。

此外，还有许多云项目可以轻松构建无服务器功能，您可以从中开始开发自己的后端服务。

Jamstack 应用程序的优点在于，它们可以作为引入您所需的任何功能或服务的中心点，为专注于解决您的特定挑战的强大解决方案铺平道路。

部署你的应用程序

部署网站和管理 CI/CD 系统可以说是开发 Web 应用程序最困难的环节之一。
在 Jamstack 领域，像 Codesphere 这样的工具提供了自动化的 DevOps，使部署变得更加轻松。

现在怎么办？

鉴于 Jamstack 的优势，许多科技界人士都期待它的普及度会不断提升。Jamstack 发展迅速，或许有一天会成为网络上最受欢迎的架构。

如果您想尝试构建自己的 Jamstack 应用程序或解决痛苦的 CI/DC 系统管理问题，请访问Codesphere，它提供了一个在线代码编辑器，您可以在浏览器的单个选项卡中构建、测试和部署您的应用程序。

感谢阅读！

鏂囩珷鏉ユ簮锛�https://dev.to/codesphere/getting-started-with-jamstack-341o