4

I am building a project for university with Angular 5. I built two separate services:

  1. parentFolder
    • InputService
      1. package.json
      2. ...
    • WebClient
      1. package.json
      2. ...

My folder structure has a parent folder called projectX and within it two sub-folders who both have their own package.json etc. They are separate projects but exist within the same parentFolder. I set up a EC2 instance and have succesfully installed all dependencies there incl. node, npm and the correct version of angular CLI.

Locally, i start my project like so: ng serve --port 6060 for the input service and ng serve --port 4200 for the WebClient. I already ran ng build --prod succesfully ON THE SERVER (via ssh) and created two dist folders (one within each folder). I now want to access both my services from within "the internet". I already set up inbound rules for my EC2 instance which should allow connection.

What is the easiest way to make my two dist folders available? Should i use express? I tried to use a pm2 http server which did not work.

Dont hesitate to ask if you have further questions.

Divide by Zero
  • 1,343
  • 1
  • 14
  • 37
  • Can you post the error you are receiving right now when trying to connect. Also one more thing `ng serve` for production is not a good idea, more info here: https://github.com/angular/angular-cli/issues/5274 – Bojan Trajkovski Jan 14 '18 at 15:11
  • 2
    This doesn't directly answer your question, but you don't need an EC2 instance. I would recommend deploying to S3 instead. Check this out: https://stackoverflow.com/questions/40889028/deploy-angular-2-app-on-aws-s3 – Matt Morgan Jan 14 '18 at 15:12
  • 1
    @BojanTrajkovski i do not aim to use `ng serve` in production. I was just stating what i use locally and am wondering what to use for production deployment. – Divide by Zero Jan 14 '18 at 15:22
  • 1
    @MattMorgan hmmm i just checked out S3. Am i correct in the assumption, that i can just upload my project + `dist` folder via AWS cli tools and ... thats it? – Divide by Zero Jan 14 '18 at 15:25
  • 2
    More or less. There are some subtleties. You need to set the bucket to allow static hosting, and you will need to redirect all incoming requests back to the root of your app, so the javascript handles the routing. But it's the best way to host a static app-- fast response, great scalability, and you're not paying for a server you don't need. – Matt Morgan Jan 14 '18 at 15:29

1 Answers1

2

Let's put that your angular app is not set to as server side rendering, I can suggest you the following:

  1. build each app with ng build --prod --aot
  2. create your buckets in S3 (2 in your case)
  3. put the content of dist/ folder of each app inside the respective bucket
  4. set the properties of each bucket: 'static website hosting' choose 'use this bucket to host a website' and set the index document field as 'index.html' generated by your build (will be in the root of dist/ folder)

  5. set the permissions of each bucket to a public and set the CORS configuration with allowed methods (below an example)

    <AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>DELETE</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>*</AllowedHeader>
  6. you can use the end points generated on 'static website hosting' to access your applications

Regarding your backend, more details are required!

kikyou
  • 56
  • 6