使用代理在 AWS S3 存储桶中托管 Angular 6 应用程序

Question

我有一个 Angular 应用程序，它从不同的服务器 (CORS) 调用 API 我已经设置了代理来这样做。

当我运行 npm start 时，它将运行 ng serve --port 80 --proxy-config proxy.conf.json

我的package.json 文件如下

{
  "name": "appname",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --port 80 --proxy-config proxy.conf.json",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    -- dependencies --
  },
  "devDependencies": {
    -- devDependencies --
  }
}

proxy.config.json 文件包含API 端点配置，如下所示。

{
    "/api":{
        "target": "http://url_to_my_api_server",
        "secure": false,
        "changeOrigin": true
    }
}

我已将项目上传到 AWS EC2 (Ubuntu, Node 10.9.0, NPM 6.4.0) 实例并按照 THIS 教程使用 serverless 部署它。它创建了一个S3 存储桶，我可以访问前端。 HTML,CSS 和 JavaScript 正在正确加载，但图像不是。如果我打开图像显示Forbidden 403 错误。

以下是我的S3 Bucket 政策

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::s3-bucket-name/*"
            ]
        }
    ]
}

另一个问题是API 我使用Proxy 执行的请求也显示相同的错误。

如何在S3 存储桶上正确托管网站并使用Proxy 进行API 调用（我不想向用户透露API 端点）。

还有其他方式来托管网站吗？

Answer 1

注意：S3 存储桶为您提供静态网络托管选项

1. 您需要为您的项目设置 WEBPACK 以进行最终构建，因为它不会在 s3 上运行您的 npm start 脚本
2. 所以使用 webpack 构建您的项目。
3. 它将捆绑您的项目，并为您提供 3-4 个 js 文件和一个可以部署在 s3 上的 html 文件
4. 在 s# 属性中有一个静态网络托管选项 - 配置它以提供您的登陆 index.html 文件
5. 你就完成了