Deploy Angular 2 App to EC2

Question

I hope this is the correct place to be asking this question, please move or delete this post if it's not.

I am trying to create a simple website that can handle basic POST and GET requests using Angular 2 and Amazon EC2. I have a fair amount of experience with working on the front end of a web app in Angular 2, but little experience with connecting that to a back end and doing so on an Amazon EC2 instance.

I was hoping to find an example or some resources that would explain how to use the HTTP service with a backend framework of some kind. I know that Angular provides examples of how to use the HTTP service, but its hard to picture what the backend setup needs to look like to handle these requests and also how to correctly configure this setup on EC2. Any help or resources would be greatly appreciated!

Answer 1

Frontend/client

As @glavan said, SPA like angular 2 apps can be deployed in AWS S3. This is the most cost efficient approach for SPAs. Here is a video deploying SPA on S3. This video will guide you through step by step instructions for deploying your angular app.

Backend

AWS EC2 is a good option. But there are many more alternatives available. As you said, you were new to backend, setting up EC2, VPC's and Elastic-ip is a little difficult process.

Nowadays, SPA's cover a lot of business logic, routing, etc., We need our backend only as API's for performing CRUD operations with database. I would like to suggest a bleeding edge technology called serverless. Here is the tutorial for launching your backend within 5 minutes. AWS lambda is a service that is called as function as service. You can build your backend using AWS lambda + API gateway + DynamoDB.

For eg: say you want to register some details in backend, you will POST all the data from client to your backend with url and proper path. In AWS lambda, you write your logic for POST as a function, which contains the logic to parse the data from request and send to dynamoDB. Now, this function can be exposed to world by connecting this function with API gateway( an another service in AWS). At the end we get an API, which can be used in your angular 2 APP. SO, on invoking the POST, angular 2 -> API gateway -> Lambda(extract request and send to DB) -> dynamoDB.

Benefits of using serverless compared to EC2.

1. You don't need to manage your server(EC2) from updating the new security patch to auto-scaling, everything is taken care by lambda. Serverless is a fully managed service.
2. You only pay when your lambda functions are invoked. On the contrast, even though your web app doesn't receive traffic for a given day, you have to pay the day-tariff for the given day.

Having said, try serverless when compared to traditional backend approach. Any questions on this would be welcomed.

Answer 2

See this answer

If you are referring to elastic beanstalk nodejs ec2, then this answer is best for you, as it took me a while to figure this out, but it turns out to be easier than I thought:

1. Following this link with some modifications I did to avoid /usr/bin/env: node: No such file or directory issues, I added the following script

.ebextensions/angular2deployment.config

files:
  "/opt/elasticbeanstalk/env.vars" :
    mode: "000775"
    owner: root
    group: users
    content: |
      export NPM_CONFIG_LOGLEVEL=error
      export NODE_PATH=`ls -td /opt/elasticbeanstalk/node-install/node-* | head -1`/bin
  "/opt/elasticbeanstalk/hooks/appdeploy/pre/50npm.sh" :
    mode: "000775"
    owner: root
    group: users
    content: |
      #!/bin/bash
      . /opt/elasticbeanstalk/env.vars
      function error_exit
      {
        eventHelper.py --msg "$1" --severity ERROR
        exit $2
      }

      #install not-installed yet app node_modules
      if [ ! -d "/var/node_modules" ]; then
        mkdir /var/node_modules ;
      fi
      if [ -d /tmp/deployment/application ]; then
        ln -s /var/node_modules /tmp/deployment/application/
      fi

      OUT=$([ -d "/tmp/deployment/application" ] && cd /tmp/deployment/application && $NODE_PATH/node $NODE_PATH/npm install 2>&1) || error_exit "Failed to run npm install.  $OUT" $?
      echo $OUT
  "/opt/elasticbeanstalk/hooks/configdeploy/pre/50npm.sh" :
    mode: "000666"
    owner: root
    group: users
    content: |
       #no need to run npm install during configdeploy

2. Delete node_modules & dist folder if you have, both are not needed.
3. Run npm install && npm start (this step must be successful), note that I'm using the angular2's default package.json See Angular.IO Deployment
4. If #3 is successful, then you can re-delete node_modules again
5. Select All files & folders in the project (make sure .ebextensions is selected as well), and then compress them, do not compress the top folder (you will have subdirectory when deploying which will break the deployment)
6. Now you can deploy that compressed file and enjoy!

If you are using MacOS, while compressing, macos will add macos folder which will break the deployment, make sure using a tool that won't add this extra directory, in my case I used YemuZip

Additional note: EC2 elastic beanstalk will run npm install & npm start, this is why I would recommend running them and make sure that they are fine on your local environment