这是一个备忘录，记录了意料之外但实际上并不常见的步骤。

总结

在我的工作中，我经常处理使用AWS进行Web应用程序开发的系统开发，其中包括很多PoC开发。在这种情况下，将验证加载到已经以生产方式运行的应用程序上感觉不太好。

在这种情况下，虽然实际上是另一个应用程序，但通过在同一源中进行分发，可以使应用程序用户看起来好像正在使用同一个应用程序。但是，由于这种方法现在的文章已经过时，搜索结果也很少，所以我将它作为一篇文章留下来。

重要的事项

• アプリケーションはReactxTypescriptのSPA

 

• アプリケーションはS3にビルドして配置している

 

• CloudfrontからS3へのアクセスはOACを使う ※後ほど紹介します

 

• Cloudfrontを使ってアプリケーションを配信する

 

アプリA、アプリBを別々のS3に配置し、同じCloudfrontディストリビューション、同じオリジンで配信する

步骤

如果要将React应用程序部署到S3，无论选择哪种方法都是相同的，如果想跳过这一步，可以点击这里。

预先准备

不会提及为了构建React所使用的Node.js和npm包的安装。版本如下所示。

$ node -v
v16.18.0
$ npm -v
8.19.2

搭建React项目。

由于这不是重点，我们就平淡地继续。

构建React

$ npx create-react-app ./qiita-app-a --template typescript
$ cd qiita-app-a
$ npm start

请确保应用程序已启动。
让我们按照上述步骤创建qiita-app-b。

进行React操作的验证

请准备您所实施的多个应用程序，这样可以在视觉上理解最终访问哪个应用程序。为此，我们已经更改了React初始状态页面的文本内容。

构建React。

我会构建两个应用程序并打包成一个包。

npm run build

当执行时，会出现build目录。

将构建包上传到S3上

准备 AWS 账号和 S3 存储桶。

我們將省略這部分。

准备S3存储桶

请分别为A和B创建S3存储桶。由于本次使用OAC从Cloudfront访问，请将阻止公开访问设置为“全部阻止”。

将React应用程序上传到桶中

请将先前建立的应用程序上传至各个存储桶中。

构建第一个CloudFront分发。

设定起源域名

首先，对第一个S3存储桶进行设置。将第一个应用程序的存储桶设置为源域（主要应用程序）。

设置原始访问权限

大多数关于CloudFront访问S3的文章似乎都更多地涉及将S3用作静态网站托管的方式，但OAC访问是一种于2022年公布的安全访问方式。以下文章详细介绍了此方法，非常值得一读。本次我们将按照此设置进行操作。

 

将”Origin access control settings”设置为”原点访问控制设置”。

点击“创建控制设置”，不做任何特别更改，直接创建。

无需进行特别设置，直接创建发行版。

更新S3存储桶策略。

如果正确创建，应该会显示黄色的标记。点击右上方的“复制策略”按钮，并跳转到S3存储桶权限，然后更新策略。

当相应的S3存储桶展开后，点击“编辑存储桶策略”并将内容粘贴进去。这样一来，策略就会被设置好了。

确认第一个应用程序

请返回到CloudFront，我想在先前创建的分发上会显示”https://[ID].cloudfront.net”。
请打开这个链接，如果成功打开了在S3上上传的React应用程序，那就是成功了。

将第二个应用程序集成进去

创建起源

请按照之前创建的分发从先前版本中创建一个新的源站点。
将源站点的域名设置为第二个应用程序的S3存储桶，并像第一个应用程序一样配置其他设置。

更新S3存储桶策略。

请将第二个应用程序的来源策略与第一个相同的粘贴在这里。

设置行为

虽然在当前情况下它可以运行，但由于第一个应用程序优先被处理，导致无法达到第二个应用程序。通过设置行为，可以更改显示原点应用程序的优先级，并设置为可以达到第二个应用程序。

然而，由于这两个应用程序在行为方式上指定了多余的路径，所以根据应用程序不同，这可能会成为一点瓶颈。

首先，您需要创建一个新的分发行为。
您可以选择您喜欢的路径模式，并选择第二个应用作为源。

访问第二个应用程序

当您访问 https://[ID].cloudfront.net/sub/index.html，您最终可以进入第二个应用程序。在这里，您将需要输入文件名。这样设置就完成了，感谢您的努力！