Build an Angular2 app and run it on AWS using a Docker container in 30 minutes

Software Development
Angular Aws Docker talk

Angular Aws Docker talk

In this article I will try to trans-pile the content of a tech meetup where I conducted a demo about “Building an Angular2 app and run it in a Docker Container on AWS in 30 minutes”.

The main points are:

  • Build Angular2 project with Angular-CLI and customize the home page with a simple
  • Customers service
  • Dockerise the app and push the image in public Docker Hub
  • On AWS Launch a new ECS instance and deploy and run the app on it

Angular2 is a framework to build Web Application. It provide a complete set of components all working toghether and then it can be considered a full heavy loaded framework. It differs from other web solution like React because in Angular all the most common decisions about which http or routing or anything else to be used are already made by the Angular team. With react you have more flexibility given that it is a ‘pure’ javascript library and then it is javascript centric as opposed to Angular that it is still a composition of modules around html.

Anyway, if you like to buy your car already made and just focus on writing your UI and business logic, Angular2 is a good choice.

Build Angular2 project with Angular-CLI

Install Angular2 CLI:
> npm install –g angular-cli
Build an Angular2 seed project using the following command
> ng new test-proj
Build the simple project as a static website
> ng build –prod

The previous command generate the ‘Dist’ folder

You can download the Angular-CLI from
https://cli.angular.io/

Customize the default page

Let’s generate a model that represent a simple Customer item.
Write the following Angular-CLI command in your terminal

> ng generate class shared/customers.model

Paste the following code snippet into the customer.model file

export class Customers {
name:string;
city:string;
}

Now generate a service module that will use the model to provide a sample list of Customers.
Write the following Angular-CLI command in your terminal

> ng generate service shared/customers

Paste into the newly created service the code from the following Github Gist
https://gist.github.com/riccardone/dfc2d125258c9146e0891cfc9595c5db#file-customers-service-ts

Modify ‘app.module.ts’ with the following GitHub Gist https://gist.github.com/riccardone/dfc2d125258c9146e0891cfc9595c5db#file-app-module-ts

Modify ‘app.component.ts’ with the following GitHub Gist https://gist.github.com/riccardone/dfc2d125258c9146e0891cfc9595c5db#file-app-component-ts

Modify app.component.html with the following GitHub Gist https://gist.github.com/riccardone/dfc2d125258c9146e0891cfc9595c5db#file-app-component-html

Push the image in public Docker Hub

Create a Dockerfile in the app folder using the following code

FROM ubuntu:16.04
RUN apt update
RUN apt install -y apache2
COPY dist /var/www/html
CMD /usr/sbin/apache2ctl -D FOREGROUND
EXPOSE 80

This DockeFile pull a version of Ubuntu, install Apache2 and copy the content of the ‘Dist’ folder.

Build the Docker image
> docker build -t test-proj .
Tag the image
> docker tag imageid yourrepo/test-proj:latest
Login in your Docker Hub account
> docker login
Push the image in your public repo
> docker push yourrepo/test-proj:latest

Run locally for test
> docker run -dit -p 8080:80 yourrepo/test-proj:latest

AWS Launch a new ECS instance

  • Login in AWS -> EC2 and select “Launch Instance”
  • In the marketplace, search for ‘ecs’ and select ‘Amazon ECS-Optimized Amazon Linux AMI’
  • Select the ‘t2 micro’ free tier option -> next
  • Step 3 Configure Instance Details: Create new IAM Role ‘ecs-role’
  • Role Type: Amazon EC2 Role for EC2 Container Service
  • Attach the available policy
  • Back in the Step 3, select the new role -> next
  • Step 6 Configure Security Group
  • SSH select ‘my ip’
  • Add HTTP rule port 80, anywhere -> review and launch

Create a Task Definition

  • Select the created instance and verify that it is running
  • Select the ‘EC2 Container Service’ action
  • On Task Definition select “Create new Task Definition”
  • Define a name
  • Select “Add Container”
  • Define a container name
  • In the Image box add the public available Docker Image from Docker HUB or ECS Repo Example: riccardone/ciccio:latest
  • Set the memory hard limit to 256mb (free tier)
  • Set ports host: 80 container: 80
  • Select “Add” and then “Create”

Create a Service to run the task

  • Select Cluster from the main menu on the left and then “default”
  • Select “Create” action on the Services tab
  • Set a service name and set 1 as number of tasks
  • Select “Create Service” action

To verify that the Service is up and running, select the service, select the task, expand the task and click on the “External link” to open in a browser the running app

I hope you enjoyed!
Cheers

One thought on “Build an Angular2 app and run it on AWS using a Docker container in 30 minutes

Leave a Reply

Your email address will not be published. Required fields are marked *