只要努力,就可以通过使用S3和CloudFront在一个域名上分发两个React应用程序!
这是一个备忘录,记录了意料之外但实际上并不常见的步骤。
总结
在我的工作中,我经常处理使用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,您最终可以进入第二个应用程序。在这里,您将需要输入文件名。这样设置就完成了,感谢您的努力!