如何在 AWS S3 上部署前端应用程序

2025-06-07

如何在 AWS S3 上部署前端应用程序

您现在可以使用 S3 静态网络托管功能在 AWS 上部署前端应用程序。

这是“如何部署前端应用程序”系列的第二篇文章- 我将在其中解释如何将任何前端应用程序（react、vue、angular、svelte、静态站点）部署到各种静态站点网络托管。

在我之前的文章中，我解释了如何在 Surge 上部署你的前端应用程序。

因此在本教程中，我将向您展示如何在 AWS S3 上安装前端应用程序。

AWS S3 是一款简单的在线存储解决方案，被称为存储桶 (Bucket)，提供稳定、高性能、安全且高度可扩展的服务。AWS S3 旨在帮助开发人员更轻松地进行 Web 规模的计算。

借助 AWS S3 静态网络托管功能，您只需从 S3 存储桶单击两次或多次即可轻​​松部署前端应用程序。

您无需担心成本，因为 AWS 的免费套餐对 S3 的限制非常高，而且价格非常便宜。S3 的另一个优点是速度很快，您可以从受支持的全球范围内选择您喜欢的数据中心。您还可以轻松添加自定义域。

设置AWS S3

让我们看看如何设置我们的 AWS 账户以进行部署。

步骤 1 - 帐户

第一步是设置您的 AWS 账户，以便我们部署您的前端应用程序。如果您还没有账户，请点击此处创建：https://portal.aws.amazon.com/billing/signup。如果您刚刚登录 AWS 管理控制台，请点击此处：https://signin.aws.amazon.com/signin。

第 2 步 - 设置 S3

成功创建账户或者成功登录AWS管理控制台后，接下来我们需要做的就是设置S3。

在 AWS 控制台上，单击“服务”。应该有一个下拉菜单，查找S3并单击它。

2019-12-07 00-46-11.png 的屏幕截图

这会将您带到一个显示所有可用存储桶的页面。在 S3 中，存储桶是对象的集合。存储桶是一个虚拟容器，而对象是属于该容器的文件。

2019-12-07 00-46-42.png 的屏幕截图

点击“创建存储桶”按钮，创建一个新的存储桶，用于部署前端应用程序。您将看到一个弹出窗口，提示您输入存储桶名称以及要部署到的区域。

2019-12-07 01-00-32 的屏幕截图.png

存储桶名称通常在您的 AWS 账户中全局唯一。您还应该使用域名来命名存储桶名称。在本教程中，我将使用react-infinitescrollhook（我将要部署的前端应用程序的名称）。

完成后，点击“下一步”进入“配置”选项卡。此选项卡中无需设置任何内容，只需点击“下一步”即可。

在“设置权限”中，您将能够设置存储桶及其对象的权限。您需要取消选中Block all public access，因为我们将在此存储桶上进行部署，因此我们需要公众能够访问构建的文件。

2019-12-07 01-01-10 的屏幕截图.png

完成后，单击“下一步”检查您的设置，然后单击“创建存储桶”继续。

2019-12-07 01-02-52 的屏幕截图.png

太棒了！您已成功创建一个新存储桶。您应该会在存储桶列表中看到它。

接下来是启用静态 Web 托管并添加一些设置。现在点击刚刚创建的 bucket，你应该会看到类似下面的内容：

2019-12-07 01-12-55 的屏幕截图.png

点击“属性”选项卡，然后选择Static website hosting“框”。此时会弹出一个窗口。点击后Use this bucket to host a website，系统会提示输入 index.html 文件。您还可以添加错误文件，我习惯使用 200.html 文件。完成后，点击“保存”即可启用该功能。

2019-12-07 01-13-12 的屏幕截图.png

2019-12-07 01-24-46 的屏幕截图.png

请务必记下“静态网站托管”框中显示的 URL ，因为这将是访问您应用程序的链接。如果您尝试导航到给定的 URL（例如，我的 URL），则会由于我们尚未设置 S3 策略而收到 403 错误。

在 S3 中，存储桶可以拥有不同的策略。这些策略定义了谁可以对指定存储桶中的哪些对象执行哪些操作。

在部署应用程序时，您可能需要设置存储桶，以便只有您可以写入它，但其他人可以查看它。

2019-12-07 01-33-58 的屏幕截图.png

为此，请单击“权限”选项卡，然后单击“存储桶策略”。您应该在此页面看到一个文本编辑器，策略将保存在其中。

2019-12-07 01-34-14.png 的屏幕截图

策略采用 JSON 文档格式。请将以下策略复制并粘贴到文本框中，并将占位符更改为您的存储桶名称：



{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::react-infinitescrollhook/*"
        }
    ]
}
Enter fullscreen mode Exit fullscreen mode

这就是我们的 S3 设置，您可以尝试打开链接，您会得到 404，这意味着我们只需要部署我们的应用程序。

步骤 3 - 设置 AWS CLI

如果您的系统上已经设置了 AWS CLI 或者您不想设置它，则可以跳过此步骤并转到下一步。

要安装并使用 AWS CLI，您需要安装 Python 和 Pip。您可以使用以下命令安装 AWS CLI：



$ pip3 install awscli --upgrade --user
Enter fullscreen mode Exit fullscreen mode

您可以在此处阅读有关在您的平台上安装 AWS CLI 的更多信息：https://docs.aws.amazon.com/cli/latest/userguide/cli-chap-install.html

完成后，下一步是使用以下命令进行配置：



$ aws configure
Enter fullscreen mode Exit fullscreen mode

上述命令将提示您输入一些详细信息，例如 AWS 访问密钥 ID、AWS 秘密访问密钥、区域和格式。前两个是必需的，它们是您的账户凭证。如果您还没有凭证，可以在 AWS Identity and Access Management (IAM) 中生成。



AWS Access Key ID [None]: <aws_access_key_id> 
AWS Secret Access Key [None]: <aws_secret_access_key>
Default region name [None]: us-west-1 
Default output format [None]: json
Enter fullscreen mode Exit fullscreen mode

您可以在此处阅读有关设置 AWS CLI 的更多信息：https://docs.aws.amazon.com/comprehend/latest/dg/setup-awscli.html

部署前端应用程序

下一步也是最后一步是部署前端应用程序。有两种方法可以执行此操作：第一种方法是使用S3 Uploader，第二种方法是使用AWS CLI。

但在此之前，如果您使用的是 React、Vue、Svelte 或 Angular 等前端库，则需要构建前端应用程序。您可以运行以下命令来执行此操作：



$ npm run build
Enter fullscreen mode Exit fullscreen mode

或者



$ yarn build
Enter fullscreen mode Exit fullscreen mode

使用 S3 上传器

完成后，您现在就可以上传build或dist文件夹。

现在转到 AWS S3 控制台，单击您正在处理的 Bucket，然后单击Upload。

您应该会看到一个弹出窗口，您可以在其中上传您的build、dist或静态文件内容。这里有一个小技巧，您需要拖动文件夹的内容，而不是文件夹本身。S3 期望您将 index.html 文件放在存储桶的顶层。因此，请拖动文件夹中的所有内容，然后点击“上传”：

文件上传成功后，您应该能够看到存储桶中的文件。

太棒了！您的前端应用程序已上线，您现在可以使用存储桶的 URL 预览您的应用程序。

如果找不到，不要担心，您仍然可以通过双击来获取它，单击index.html，Properties然后在下方Object Url您应该会看到您的存储桶 URL。

使用 AWS CLI

每次添加更改时都上传文件是多余的，而且很耗时。

但是，使用 AWS CLI 工具，您可以减少步骤并直接从命令行进行部署。您需要按照我上面的说明进行设置才能使用它。

要使用 AWS CLI 进行部署，您只需要以下命令：



$ aws s3 sync <folder_path> s3://<bucket_name>
Enter fullscreen mode Exit fullscreen mode

现在转到命令行中的应用程序目录并运行上面的命令。

所以就我的情况来说，情况是这样的：



$ aws s3 sync /build s3://react-infinitescrollhook
Enter fullscreen mode Exit fullscreen mode

2019-12-10 12-46-00.png 的屏幕截图

您的应用程序现在应该已部署！

2019-12-10 14-28-47 的屏幕截图.png

如果您正在使用前端库或构建系统，则可以使用 NPM 脚本命令使部署过程更快。

打开你的package.json，转到该scripts部分并添加deploy命令：



"deploy": "aws s3 sync build s3://react-infinitescrollhook"
Enter fullscreen mode Exit fullscreen mode

这样，您现在可以运行以下命令来部署您的应用程序：



$ npm run deploy
Enter fullscreen mode Exit fullscreen mode

您可以做的另一件事是减少运行构建命令和部署应用程序的步骤：



"s3-deploy":"aws s3 sync build s3://react-infinitescrollhook",
"deploy":"npm run build && npm run s3-deploy",
Enter fullscreen mode Exit fullscreen mode

然后使用上述命令，您只需一个命令行即可构建和部署您的应用程序。

文章来源：https://dev.to/oyetoket/how-to-deploy-your-frontend-application-on-aws-s3-31m9
Devto 翻译
PREV
成为前端开发人员的 6 项技能
NEXT
10 个 VS Code 扩展，最大程度提高前端开发效率