Deploying an Angular app in a Single Docker image to AWS Elastic Beanstalk using wizard

5 min readJun 6, 2018

It was a hard to find a good example on how to deploy a single docker to AWS Elastic Beanstalk using the wizard. I am not a big fan of the AWS CLI. Why should we make our lives difficult if we already have UI?

This simple tutorial is divided into two parts and we will be using the Angular project as our base code. First part is about creating the Docker file, setting up the AWS configuration file and building the Angular source code. Then, second part is about deployment on AWS Elastic Beanstalk.

I. Preparing the source files

Prerequisite: Node.js (https://nodejs.org/en/download/)

We need to generate new Angular project. If you haven’t installed the Angular CLI, please do so by running below command on your terminal.

 npm i -g @angular/cli

2. Create new Angular project by running below code. We will name this project as angular-docker.

ng new angular-docker

3. Change the directory to that newly created project. You can run below command.

cd angular-docker

4. Modify angular.json file and then look for outputPath attribute. It is normally under projects > architect > build > options. Change the value as below. Then save the file.

"outputPath": "output/dist",

5. Then, create new folder and name it output. You can run below command. Then, change to that directory.

mkdir output
cd output

6. Create a new file and name it custom-nginx-file.conf, we need this to customize our config in NGNIX. Then, copy below lines.

server {
    listen 8080;
    location / {
        root /usr/share/nginx/html;
        index index.html index.htm;
        try_files $uri $uri/ /index.html =404;
    }
}

7. Create new file named Dockerfile (without any extension). Then, copy below lines.

## use the latest docker image for NGINX
FROM nginx:latest## Remove default NGINX web files
RUN rm -rf /usr/share/nginx/html/*## Copy the dist files to NGINX web folder
COPY ./dist /usr/share/nginx/html## Set the permission for NGINX web folder
RUN chmod 777 -R /usr/share/nginx/html## Overwrit the default NGINX config using the custom config file
COPY ./custom-nginx-file.conf /etc/nginx/conf.d/default.conf## Expose the docker port
EXPOSE 8080## Initiate the NGINX
CMD ["nginx", "-g", "daemon off;"]

8. Create new file and name it Dockerrun.aws.json, this is for AWS ELB to determine which port to forward to for any request. Then, copy below configuration.

{
    "AWSEBDockerrunVersion": "1",
    "Ports": [{
        "ContainerPort": "8080"
    }]
}

9. Build your Angular project by running below command.

ng build --prod

10. Your output folder should look like below.

11. Zip or compress all files and folder inside your output folder. Name it output.zip we will upload this on the next part.

Note: Don’t zip or compress the output folder itself but the contents only.

II. Deploying to AWS Elastic Beanstalk

Create an AWS account if you don’t have one. Then log-in and then on the menu click Services then under Compute choose Elastic Beanstalk.

2. Click the Create New Application located at the top right side corner of the screen.

3. On the pop-up wizard, under Application Name textbox, enter your application a name (in the example below, we named it angular-docker-test). Afterwards, click Create button.

4. Create a new Environment. Under Environments tab, click the Create one now.

5. On the next screen, under Select environment tier, choose Web server environment. Then, click Select button.

6. Then, we need to fill up the form to proceed.

6.a) Under Environment information form, you can choose to modify the Environment name or leave it as is. For Domain textbox, enter the Domain name to use. Make sure to click Check availability to verify the name is unique.

6.b) Under Base configuration form, for Platform on Preconfigured platform drop down list choose Docker. Then, under Application code, select Upload your code. Afterwards, click the Upload button to upload the source package created in the first part.

6.c) Choose Local file then click Browse button. Locate and select your output.zip file you made at the 1st part. Afterwards, click upload.

6.d) Make sure that your source package (output.zip) was uploaded by checking the Version name you mentioned during upload. As image below it is underlined in yellow line. Lastly, click Create environment button.

7. Wait a few minutes for AWS ELB wizard to finish the process.

Below the processes AWS ELB doing:

a) Extract the package.
b) Create EC2 instance who will host the docker image.
c) Deploy and run the docker image.
d) Configuring proxy settings based on Dockerrun.aws.json.

If no issues or problem, you should see that the environment has successfully launched.