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存储桶中正确托管网站并如何使用API进行Proxy调用（我不想向用户透露API端点）。

还有其他托管网站的方法吗？

Answer 1

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

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

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

1 个答案: