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
Great read.