使用 SST 在 AWS 上免费部署 NEXT.js 应用程序

TL;DR

什么是 SST？

SST 是一个基于 AWS CDK 构建的 IaC 框架，它允许您使用 TypeScript 在 AWS 上部署应用程序。
SST 与 OpenNext 集成，后者是 Vercel 部署系统的开源实现。
这使得 SST 可以在您自己的 AWS 帐户上部署 Next.js 应用程序，并控制您的基础设施！

您将在本文中学到什么？

在本文中，通过几个步骤学习如何使用 SST 在 AWS 上部署 Next.js 应用程序。
奖励：我还将向您展示如何使用 SST在您自己的域名上部署您的网站！

⬇️ 我会定期发布无服务器内容，如果你想了解更多 ⬇️

在 Twitter 上关注我🚀

快速公告：我还在开发一个名为🛡 sls-mentor 🛡的库。它汇集了 30 条无服务器最佳实践，这些实践会在您的 AWS 无服务器项目中自动检查（无论使用哪种框架）。它是免费开源的，欢迎随时查看！

在 Github 上查找 sls-mentor⭐️

为什么选择 Next.js 和 SST？

Next.js 最近非常流行，许多人认为这个框架代表着 React 的未来。Next.js 允许你使用 React 构建静态和服务端渲染的应用程序，其加载速度比普通的 SPA 快得多，并且能够保证更好的 SEO 和用户体验。

传统上，部署 Next.js 应用程序主要有两种方式：

在您自己的服务器上，使用 Node.js 进程运行应用程序 -> 入门成本高❌，难以管理❌，但您“拥有”自己的基础设施✅
在 Vercel 上，以无服务器的方式 -> 易于使用✅，但对基础设施没有任何控制权❌，而且对于大型应用程序来说成本高昂❌

了解一下 SST，这是一个基于 AWS CDK 构建的最新 IaC 框架。SST 允许您使用 TypeScript 在 AWS 上部署应用程序。SST 是旧版无服务器框架的绝佳替代方案，并且比单独使用 CDK 功能强大得多。

SST 的最佳功能之一是能够与 OpenNext 集成，OpenNext 是 Vercel 无服务器部署系统的开源实现。这使得 SST 能够在您自己的 AWS 账户上部署 Next.js 应用程序。

SST 以无服务器的方式在您的AWS 账户上部署 Next.js 应用，这意味着它对于小型应用程序免费✅，并且按使用✅付费。锦上添花的是：您可以掌控自己的基础设施✅！

只需 2 个简单步骤即可在 AWS 上部署 Next.js 应用程序

确保您的机器上安装了 Node 16+，建议安装 Node 18！

首先，让我们创建一个新的 Next.js 应用程序：



npx create-next-app@latest my-app

按照安装步骤操作，并确保选择使用 TypeScript（SST 是为 TypeScript 构建的）。

然后，前往新创建的文件夹并安装 SST。



cd my-app
npx create-sst@latest
npm install

当 SST 提示您以“Drop-in 模式”进行设置时，回答是：SST 将自动检测您正在使用 Next.js 并将相应地设置项目。

您基本上已经完成了！您现在可以在 AWS 上部署 Next.js 应用了：



npx sst deploy

部署结束时，SST 会提示您应用程序的公共 URL：

只需在浏览器中输入链接，就能看到你的网站出现在万维网上！现在轮到你来打造下一个杀手级应用了🚀

如果您想将网站部署到自己的域名上怎么办？继续阅读！

在您自己的域名上部署您的网站

⚠️ 这部分是可选的，不再免费，因为您需要购买域名！

要购买自己的域名，您可以使用 AWS Route 53 或任何其他域名提供商。如果您需要帮助，请参阅我的另一篇文章。

正如我所说，SST 是基于 AWS CDK 构建的，这意味着你可以在 Next.js 项目中集成来自 AWS 的任何资源（无论是否无服务器）。在本部分中，你将使用 AWS Route 53 和 Amazon Certificate Manager 在你自己域名上部署你的网站。

首先，让我们看看添加到项目中的文件 SST：



// File: sst.config.ts

import { SSTConfig } from "sst";
import { NextjsSite } from "sst/constructs";

export default {
  config(_input) {
    return {
      name: "my-app",
      region: "us-east-1",
    };
  },
  stacks(app) {
    app.stack(function Site({ stack }) {
      const site = new NextjsSite(stack, "site");

      stack.addOutputs({
        SiteUrl: site.url,
      });
    });
  },
} satisfies SSTConfig;

此文件实例化了一个Site由构造体组成的堆栈NextjsSite。此构造体用于在 AWS 上部署 Next.js 应用程序。

您可以将任何其他 AWS 资源添加到堆栈。在本例中，您将创建一个托管区域和一个 SSL 证书。

托管区域基本上是一个 DNS，它将从您的域名路由到您网站的“真实”URL。
需要 SSL 证书才能在 HTTPS 端点上部署您的网站。
部署us-east-1区域中的所有内容，因为这是 SSL 证书工作所必需的。

文件sst.config.ts最后看起来应该是这样的：



// File: sst.config.ts

import { SSTConfig } from "sst";
import { NextjsSite } from "sst/constructs";

import * as cdk from "aws-cdk-lib";

const ROOT_DOMAIN_NAME = "pchol.fr"; // Your domain name here
const DOMAIN_NAME = `sst.${ROOT_DOMAIN_NAME}`; // Any prefix you want, or just the root domain

export default {
  config(_input) {
    return {
      name: "my-app",
      region: "us-east-1", // Keep it that way
    };
  },
  stacks(app) {
    app.stack(function Site({ stack }) {
      // Create a hosted zone on your domain name
      const hostedZone = new cdk.aws_route53.HostedZone(stack, "HostedZone", {
        zoneName: ROOT_DOMAIN_NAME,
      });

      // Create a SSL certificate linked to the hosted zone
      const certificate = new cdk.aws_certificatemanager.Certificate(stack, "Certificate", {
        domainName: DOMAIN_NAME,
        validation: cdk.aws_certificatemanager.CertificateValidation.fromDns(hostedZone),
      });

      // Add the hosted zone and the certificate to the Next.js site
      const site = new NextjsSite(stack, "site", {
        customDomain: {
          domainName: DOMAIN_NAME,
          cdk: {
            hostedZone,
            certificate,
          }
        }
      });

      stack.addOutputs({
        SiteUrl: site.url,
      });
    });
  },
} satisfies SSTConfig;