1

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?

rakcode
  • 2,256
  • 4
  • 19
  • 44
  • where do u have your assets folder on the root path of ur S3 Bucket? Did u edit the bucket rules to public read, also for the assets folder and files? – sagat Aug 09 '19 at 13:24
  • Please check the updated question, I've updated the question with `S3 Bucket` policy, I did not check the Assets as its automatically deployed by `serverless`. There are many nested folders in my bucket. – rakcode Aug 09 '19 at 13:28
  • Does this answer your question? [proxy.config.json is not working in Angular 4/5 when i use ng build](https://stackoverflow.com/questions/48920937/proxy-config-json-is-not-working-in-angular-4-5-when-i-use-ng-build) – Mazen Elkashef Mar 09 '20 at 02:08

1 Answers1

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
Harshil Patel
  • 88
  • 4
  • Does it support that Proxy file? `proxy.config.json` is an external file, where all the proxy settings ae saved! – rakcode Aug 12 '19 at 04:32
  • Hello, I've tried this but now I'm getting `MethodNotAllowed` error. Do I need to set up `CloudFront` and `Labda` to do `API` calls? If yes, then my service is hosted in a different server, why should I set up a gateway to do that? – rakcode Aug 14 '19 at 05:18
  • 1
    @harshil, your answer is missing a key part, the frontend will not be able to make requests to the backend if they are not hosted on the same domain, so in development he uses a proxy, however he is looking for a solution in a production setting where he deploys his app to aws s3. I didn't know about this problem until today but you totally ignored the error the OP is facing. – Mazen Elkashef Mar 09 '20 at 01:49
  • 1
    @rakcode I am starting to realize that hosting angular on s3 is not as straightforward as it looks like, also to get around the routing problems in angular I had to specify the origin as my S3 Website DNS instead of just selecting the instance, which might make you lose Caching goodness! so anyway I found a couple of solutions, I haven't tried them yet, but you can check them out in case anyone is facing this problem https://stackoverflow.com/a/48921029/315625 https://stackoverflow.com/a/60274017/315625 – Mazen Elkashef Mar 09 '20 at 02:08