In this article, a Web application using the latest version of in a built image will be hosted on (Elastic Compute Cloud) and deployed by (Elastic Container Service) using an (Elastic Container Registry) containers repository. Angular Docker Amazon EC2 Amazon ECS Amazon ECR Prerequisites Before you start, you need to install and configure the tools below to create the Angular application and the Docker image and push the image to the repository on Amazon ECR. : Git is a distributed version control system and it will be used to sync the repository. git : Node.js is a JavaScript code runtime software based on Google's V8 engine. npm is a package manager for Node.js (Node.js Package Manager). They will be used to build and run the Angular application and install the libraries. Node.js and npm : Docker Engine is a command line utility tool for Docker and it will be used to create and run containers. Docker Engine IDE (e.g. or ): IDE (Integrated Development Environment) is a tool with a graphical interface to help in the development of applications and it will be used to develop the Angular application. Visual Studio Code WebStorm : AWS Command Line Interface is a command line utility tool for interacting with all Amazon Web Services services. AWS CLI Getting started Create the repository on Amazon ECR is a Docker containers registry service that enables you to store and manage container images. Amazon ECR Let's create and configure the account. Access the site and click on the button . 1. https://aws.amazon.com/ecr/ Get started with Amazon ECS Now we will click on the option , fill in the field and click on the button . 2. Root user Root user email address Next Note: If you don't have an Amazon account, do steps 1 to 9 of the post in the session . Authentication using the Amazon Cognito to an Angular application Create and configure the account on the Amazon Cognito Next, we will fill in the field and click on the button . 3. Password Sign in Then, we will type in the search field and click on the option . 4. ecr Elastic Container Registry After click on the option , we will click on the button . 5. Elastic Container Registry Get started Now we will click on the option , fill in the field and click on the button . 6. Public Repository name Create repository Next, we will click on the created repository and click on the button . 7. View push commands Then, we will copy the commands because they will be used to push the Docker image of the Angular application and click on the button . 8. Close Ready! The repository to store the Docker image of the Angular application was created. 9. Push the Docker image of the Angular application Let's use the Angular application created in the post . We will clone the repository . 1. Creating and running an Angular application in a Docker container https://github.com/rodrigokamada/angular-docker git clone https://github.com/rodrigokamada/angular-docker angular-docker-amazon-ecs Now we will change the file with the content below. 2. Dockerfile FROM node:alpine AS app

WORKDIR /usr/src/app

COPY . /usr/src/app

RUN npm install

RUN npm run build



FROM nginx:alpine

COPY --from=app /usr/src/app/dist/angular-docker/browser /usr/share/nginx/html

RUN ls /usr/share/nginx/html

COPY ./nginx.conf /etc/nginx/conf.d/default.conf

EXPOSE 80 Notes: The setting defines the base Docker image of Node.js to build the Angular application. FROM node:alpine AS app The setting defines the default application directory. The defined directory is created if it does not exist. WORKDIR /usr/src/app The setting copies the local application files and directories to the defined directory. COPY . /usr/src/app The setting installs the Angular application dependencies. RUN npm install The setting compiles the Angular application. RUN npm run build The setting defines the base Docker image of NGINX to serve the Angular application files. FROM nginx:alpine The setting copies the compiled Angular application files to the NGINX directory. COPY --from=app /usr/src/app/dist/angular-docker/browser /usr/share/nginx/html The setting copies the NGINX configuration file to serve the Angular application. COPY ./nginx.conf /etc/nginx/conf.d/default.conf The setting defines the Docker port. NGINX uses the default port 80. EXPOSE 80 Next, we will create the file with the NGINX configuration in the root directory of the Angular application. 3. nginx.conf touch nginx.conf Then, we will configure the file with the content below. 4. nginx.conf server {
    listen 80;

    location / {
        root /usr/share/nginx/html;
        index index.html index.htm;
        try_files $uri $uri/ /index.html =404;
    }
} After configuring the file , we will authenticate the Docker client with the repository registry. 5. nginx.conf aws ecr-public get-login-password --region us-east-1 | docker login --username AWS --password-stdin public.ecr.aws/d3o6w2v8

Login Succeeded Now we will create the Docker image. 6. docker build -t angular-docker-amazon-ecs .
[+] Building 45.5s (10/10) FINISHED                                                                                                         docker:default
 => [internal] load build definition from Dockerfile                                                                                                  0.1s
 => => transferring dockerfile: 191B                                                                                                                  0.0s
 => [internal] load metadata for docker.io/library/node:alpine                                                                                        2.4s
 => [internal] load .dockerignore                                                                                                                     0.1s
 => => transferring context: 2B                                                                                                                       0.0s
 => [1/5] FROM docker.io/library/node:alpine@sha256:d3271e4bd89eec4d97087060fd4db0c238d9d22fcfad090a73fa9b5128699888                                  4.5s
 => => resolve docker.io/library/node:alpine@sha256:d3271e4bd89eec4d97087060fd4db0c238d9d22fcfad090a73fa9b5128699888                                  0.0s
 => => sha256:6af33fd59f0638fb0acc2992b2b54c7baf68fe593083f0f52815cf29d1288803 7.13kB / 7.13kB                                                        0.0s
 => => sha256:4abcf20661432fb2d719aaf90656f55c287f8ca915dc1c92ec14ff61e67fbaf8 3.41MB / 3.41MB                                                        1.0s
 => => sha256:2997c41553473c7c926a796f330b4a7b03e9d2a7a9ee059a66bf68e02040bf40 43.53MB / 43.53MB                                                      2.0s
 => => sha256:803074618b54a85228c5e10d79b5320e5eba82a2f89abddf233e852420430ba2 2.37MB / 2.37MB                                                        1.0s
 => => sha256:d3271e4bd89eec4d97087060fd4db0c238d9d22fcfad090a73fa9b5128699888 1.43kB / 1.43kB                                                        0.0s
 => => sha256:f5d3a6aea1b1d35066e6c034f5c264cd5b051fc7c7cb0160bb88899e7b1f0c83 1.16kB / 1.16kB                                                        0.0s
 => => extracting sha256:4abcf20661432fb2d719aaf90656f55c287f8ca915dc1c92ec14ff61e67fbaf8                                                             0.1s
 => => sha256:249f9271d1d17cdc2d12d106e2dcfafdc306da21f65123a06aa2290baa5c4fac 451B / 451B                                                            1.4s
 => => extracting sha256:2997c41553473c7c926a796f330b4a7b03e9d2a7a9ee059a66bf68e02040bf40                                                             1.7s
 => => extracting sha256:803074618b54a85228c5e10d79b5320e5eba82a2f89abddf233e852420430ba2                                                             0.3s
 => => extracting sha256:249f9271d1d17cdc2d12d106e2dcfafdc306da21f65123a06aa2290baa5c4fac                                                             0.0s
 => [internal] load build context                                                                                                                     0.1s
 => => transferring context: 683.88kB                                                                                                                 0.0s
 => [2/5] WORKDIR /usr/src/app                                                                                                                        0.3s
 => [3/5] COPY . /usr/src/app                                                                                                                         0.1s
 => [4/5] RUN npm install -g @angular/cli                                                                                                            20.1s
 => [5/5] RUN npm install                                                                                                                            13.8s
 => exporting to image                                                                                                                                4.0s
 => => exporting layers                                                                                                                               4.0s
 => => writing image sha256:e6b87cf9530701fe49f487780093e6bd0e87c2052147750debf8fdf3e6544851                                                          0.0s
 => => naming to docker.io/library/angular-docker-amazon-ecs Next, we will create the image tag. 7. docker tag angular-docker-amazon-ecs:latest public.ecr.aws/d3o6w2v8/angular-docker-amazon-ecs:latest Then, we will push the Docker image to the repository. 8. docker push public.ecr.aws/d3o6w2v8/angular-docker-amazon-ecs:latest
The push refers to repository [public.ecr.aws/d3o6w2v8/angular-docker-amazon-ecs]
0d182ddaeba2: Pushed 
692f273c8005: Pushed 
f19fda91d840: Pushed 
118d5d6c8a47: Pushed 
6ac923e38b05: Pushed 
18ffdcddf862: Pushed 
aab2cca0cf91: Pushed 
d4fc045c9e3a: Pushed 
latest: digest: sha256:2f09379b02c2669c915fc63116536d1bb5040c3d608a68b8f3306f10af4d125d size: 2000 Note: The AWS CLI user must have the permission . AmazonElasticContainerRegistryPublicFullAccess After pushing the Docker image to the repository, we will check if the Docker image was pushed to the repository. We will go back to the site and click on the repository name. 9. Now we will see the Docker image pushed. 10. Ready! The Docker image of the Angular application was pushed to the repository on Amazon ECR. 11. Create the conteiner on Amazon ECS Amazon ECS is a Docker containers orchestration service that enables you to deploy, manage, and scale containerized applications. Let's type in the search field and click on the option . 1. ECS Elastic Container Service Now we will click on the button . 2. Create cluster Next, we will fill in the field , click on the option , select the option in the field , select the option in the field , fill in the field , select the option in the field and click on the button . 3. Cluster name Amazon EC2 instances Amazon Linux 2 Operating system/Architecture c1.medium EC2 instance type Maximum Turn on Auto-assign public IP Create Then, we will click on the menu . 4. Task Definitions After click on the menu , we will click on the button . 5. Task definitions Create new task definition Now we will fill in the field , click on the option , select the option in the field , fill in the field , fill in the field , fill in the field with the tag name, fill in the field with the Docker image name, fill in the field with the external port, fill in the field with the NGINX port and click on the button . 6. Task definition family Amazon EC2 instances default Network mode CPU Memory Name Image URI Host port Container port Create Next, we will click on the button and click on the option . 7. Deploy Run task Then, we will click on the button because the fields , and were filled in. 8. Create Existing cluster Family, Revision After clicking on the button , we will wait for the EC2 instance to be created in the session . 9. Create Tasks Now we will type in the search field and click on the option . 10. ec2 EC2 Next, we will click on the menu . 11. Instances Then, we will click on the created instance. 12. After clicking on the created instance, we will click on the icon to copy the domain in . 13. Public IPv4 DNS Now we will access the URL in a browser. 14. http://ec2-54-146-190-174.compute-1.amazonaws.com Ready! The Docker image of the Angular application was deployed and the application is working. 15. Conclusion Summarizing what was covered in this article: We created a public repository on Amazon ECR. We changed the Docker configuration of the Angular application. We created the NGINX configuration file in the Angular application. We created a Docker image. We pushed the Docker image to the repository. We created a container on Amazon ECS for the deployment. We tested the Angular application inside the Docker container served on EC2 instance. You can use this article to create a Docker container with an Angular application image, push the image to a repository on Amazon ECR and deploy the container using Amazon ECS to an EC2 instance where the Angular application will be served. Thank you for reading and I hope you enjoyed the article! This tutorial was originally posted on my in Portuguese. blog To stay updated whenever I post new articles, follow me on and . Twitter LinkedIn

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

How to Create an Amazon EC2 Instance With Remote Root User Access and Configuring an Usage Alerting

Creating and Running an Angular Application in a Docker Container

2021 - HackerNoon Contributor of the Year - WEB-DEVELOPMENT

2021 - HackerNoon Contributor of the Year - WEB

Nominated for 2022 - HackerNoon Contributor of the Year - Api

Nominated for 2022 - HackerNoon Contributor of the Year - Angular

Nominated for 2022 - HackerNoon Contributor of the Year - Website Development

Nominated for 2022 - HackerNoon Contributor of the Year - Amazon

Nominated for 2022 - HackerNoon Contributor of the Year - Github

Nominated for 2022 - HackerNoon Contributor of the Year - Authentication

Nominated for 2022 - HackerNoon Contributor of the Year - Aws

Too Long; Didn't Read

How To Host an Angular Application in a Docker Container on Amazon EC2 and Deploy It With Amazon ECS

How To Host an Angular Application in a Docker Container on Amazon EC2 and Deploy It With Amazon ECS

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Hosting an Angular application on GitHub Pages using GitHub Actions

Chaos Engineering using Amazon EC2 Systems Manager

Deep Learning on Amazon EC2 Spot Instances Without the Agonizing Pain

Deploying a Node App on Amazon EC2

Understanding Amazon EC2 Terminology

Hosting an Angular application on GitHub Pages using GitHub Actions

Chaos Engineering using Amazon EC2 Systems Manager

Deep Learning on Amazon EC2 Spot Instances Without the Agonizing Pain

Deploying a Node App on Amazon EC2

Understanding Amazon EC2 Terminology

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps