使用静态站点发电机等构建无服务器的Web应用程序
#javascript #网络开发人员 #serverless #gatsby

使用像盖茨比这样的静态网站生成器构建无服务器的Web应用程序可能是创建快速可扩展网站的好方法。

在本文中,我们将使用AWS放大为我们的托管和部署平台来设置和部署无服务器盖茨比网站。

在开始之前,重要的是要注意盖茨比是静态站点生成器。它生成一组HTML,CSS和JavaScript文件,这些文件可从CDN(内容输送网络)或托管平台提供。

与传统的“服务器渲染” Web应用程序相反,HTML是在服务器上生成的,并在每个请求上发送到浏览器。

使用静态站点生成器的好处之一是,它比服务器渲染的应用程序更快,更可扩展。

由于HTML已预先生成并从CDN提供,因此服务器不需要渲染每个请求,这意味着该站点可以处理许多并发的用户而无需任何性能降级。

您需要在开发机上安装盖茨比CLI(命令行接口)才能开始使用Gatsby。运行以下命令。

`npm install -g gatsby-cli`

安装了盖茨比CLI后,您可以通过运行以下
来创建一个新的盖茨比网站 命令:

`gatsby new my-site`

这将创建一个新的目录,称为“ my-Site”,并使用基本的盖茨比项目设置。然后,您可以导航到目录,并通过运行以下命令来启动开发服务器:

    cd my-site
    gatsby develop

这将启动开发服务器,您可以通过打开Web浏览器并导航到“ http://localhost:8000”来查看您的网站。

在您对网站进行更改时,开发服务器将自动重新加载页面,从而轻松查看实时更改的结果。

一旦您对网站感到满意,就可以通过运行以下
来构建生产 命令:

`gatsby build`

这将生成一组可以部署到托管平台的静态文件。

要将您的盖茨比网站部署到无服务器的托管平台,例如AWS Amplify,您需要注册AWS帐户并安装Amplify CLI。

安装了放大CLI后,您可以通过运行以下命令来创建一个新的Amplify项目:

`amplify init`

这将提示您输入有关项目的基本信息,例如名称和环境。

完成设置后,您可以通过运行以下命令将托管类别添加到项目中:

`amplify hosting add`

这将提示您选择托管提供商并配置托管设置。您需要为盖茨比网站选择“ S3和CloudFront”作为托管提供商。

这将创建一个用于存储静态文件的S3存储桶和用于从CDN提供文件的CloudFront分发。

一旦将托管类别添加到您的项目中,您可以通过运行以下命令部署盖茨比网站:

`amplify publish`

这将构建您的盖茨比站点,并将静态文件部署到S3存储桶和云方向分布中。然后,您可以通过导航到AWS Amplify提供的URL来访问您的网站。

使用诸如盖茨比(Gatsby)这样的静态站点生成器的好处之一是,它使您能够利用现代JavaScript框架(例如React)的功能来构建您的网站。 Gatsby使用GraphQL查询和检索来自各种来源的数据,包括无头CMS系统,API和本地文件。

这使得在不需要服务器的情况下构建动态,数据驱动的站点变得容易。

使用静态站点生成器的另一个好处是,它比服务器渲染的应用程序更安全。

由于HTML已预先生成并从CDN提供,因此服务器无需在每个请求上处理敏感数据或执行代码。这可以减少安全漏洞和攻击的风险。

结论

使用像盖茨比这样的静态站点生成器构建无服务器的Web应用程序,可以是创建快速,可扩展和安全网站的好方法。

通过利用现代JavaScript框架的力量并在AWS Amplify之类的平台上托管,您可以构建一个动态的,数据驱动的网站,可以处理许多并发的用户而无需任何性能退化。

资源

Gatsby Resource
Learn how to use Gatsby