如何在 AWS S3 上部署基于 Angular2 Typescript 的应用程序

Question

我想在静态服务器中部署 Angular 2。我不想用 Node 来部署它。 Js。是否可以在 AWS S3 中运行基于 Angular 的应用程序？如何将其部署到S3...

Answer 1

使用以下命令将应用程序打包到 dist 文件夹中，生成转译后的 js 文件和其他图像、css 资源，然后上传到 AWS S3。

Angular CLI：

ng build -prod

网络包：

npm run build_prod

不确定页面刷新时是否完全支持漂亮的 url，但我在 Nginx 中使用以下命令将所有 url 请求转发回 index.html

location / {
    try_files $uri $uri/ /index.html?$query_string;
}

最后：如果可以的话，我仍然建议在真正的 Web 服务器中托管任何 Web 应用程序，但任何可以通过 http 提供文件的系统绝对应该可以工作。

Answer 2

使用 Angular CLI .

使用它，您可以生成一个包含index.html和所有资产的生产文件夹（dist），然后您可以将该文件夹部署到静态服务器。

Answer 3

在 S3 存储桶静态托管错误页面中，将其设置为index.html，以允许路由器导航您为组件指定的路由，您必须上传node_modules文件夹，除非您使用CD/CI框架来部署，该框架部署自动安装模块。

Answer 4

有一种便捷的方式将 SPA 部署到 S3 和 CloudFront，并轻松在云上设置基础设施！ 它称为 SWS Console Quick Cloud Architecture Builder 服务。只需几个简单的输入，您就可以控制 AWS 资源。请参阅下面的文档！

使用 SWS 控制台快速云架构构建器使前端部署变得简单

使用 S3 和 CloudFront 将 SPA（React、Vue 等）项目部署到 AWS 时，需要执行一些复杂的任务，例如在 S3 上设置静态 Web 托管并将存储桶链接到 CloudFront。不如使用 Sws Console 服务，它为您的 SPA 项目构建 S3 静态 Web 托管 + CloudFront 的 AWS 云架构，而无需担心这些任务？请参考下面的文档，尝试使用Sws Console Quick Builder工具快速构建AWS架构！

使用 SWS 控制台快速云架构构建器使前端部署变得简单

进入Sws控制台服务页面