Hosting a Angular 6 app in AWS S3 bucket with proxy

Question

I have an Angular App which is calling API from different server (CORS) I've set up Proxy to do so.

When I run npm start it will run ng serve --port 80 --proxy-config proxy.conf.json

My package.json file is as below

{
  "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 --
  }
}

The proxy.config.json file contains API endpoint configuration as below.

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

I've uploaded the project to AWS EC2 ( Ubuntu , Node 10.9.0 , NPM 6.4.0 ) Instance and followed THIS tutorial to deploy it using serverless . Its created an S3 bucket and I can access the frontend. HTML , CSS and JavaScript are loading properly, But images are not. If I open the images it's showing Forbidden 403 error.

Below is my S3 Bucket Policy

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

Another problem is API Requests which I was doing using Proxy are also showing the same error.

How to host the website properly on S3 bucket and make the API calls with the Proxy (I don't want to disclose the API Endpoint to the user).

Is there any other way to host the site?

Answer 1

NOTE: S3 bucket gives you option for static web hosting

1. You need to setup WEBPACK to your project for final build as it is not going to run you npm start script on s3
2. So build your project using webpack.
3. It will bundle your project and gives you 3-4 js file and one html file which is ready deploy on s3
4. In s# property there is option for static web hosting - configure it to provide your landing index.html file
5. that's it your done