使用代理在 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 ）實例和遵循本教程使用部署它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/*"
            ]
        }
    ]
}

另一個問題是我使用Proxy執行的API請求也顯示相同的錯誤。

如何在S3存儲桶上正確托管網站並使用Proxy進行API調用（我不想向用戶透露API端點）。

有沒有其他方式來托管網站？

Answer 1

注意： S3 存儲桶為您提供靜態 Web 托管選項

1. 您需要將 WEBPACK 設置到您的項目以進行最終構建，因為它不會在 s3 上運行您的 npm start 腳本
2. 所以使用 webpack 構建你的項目。
3. 它將捆綁您的項目並為您提供 3-4 個 js 文件和一個已准備好部署在 s3 上的 html 文件
4. 在 s# 屬性中有靜態虛擬主機選項 - 配置它以提供您的登陸 index.html 文件
5. 就這樣你完成了