NodeJS TypeScript Docker Deployment Process With AWS EBS

How To Package A NodeJS TypeScript App, Build & Deploy The Docker Image To AWS Elastic Beanstalk

How To Deploy A TypeScript NodeJS App With Docker To Amazon Web Service Elastic Beanstalk

Why

I won’t dive into the benefits of TypeScript, so I’ll assume that you already have a NodeJS TypeScript application that you want to bundle as a Docker image and deploy to a hosting service that supports Docker.

Docker is the main reason.

Docker is the main reason for setting up our app because it gives us more control over the Linux environment, what is installed, what it can do, and not be at the mercy of a hosting provides own configured Linux box.

What We’re Accomplishing

This is a step-by-step guide on deploying NodeJS TypeScript Docker image on AWS Beanstalk. Feel free to skip certain sections and use this article as needed.

We’re going to cover coding a simple NodeJS TypeScript API, writing an optimized Dockerfile with NodeJS Alpine, and deploying that code to AWS Elastic Beanstalk.

Requirements

• NMV or NodeJS 12.13.08
• (Optional) Yarn
• Docker Desktop

NodeJS Application

Git Init

We’re going to assume you’re using git for this new project.

git init

Create a new .gitignore file

touch .gitignore;

File: ./.gitignore

Setup Node Version

echo "12.18.0" > .nvmrc;

Then use that version with:

nvm install;
nvm use 12.18.0;

Install Package Dependencies

Next we’ll install the dependencies for both core and development.

Core Dependencies

yarn add express cors typescript ts-node @types/express @types/node @types/cors;

Development Dependencies

yarn add -D eslint prettier ts-node-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin

IDE Syntax & Formatting

Here we’ll focus on formatting our code, syntax highlighting, and auto-formatting.

Visual Studio Code Settings

If you’re using Visual Studio Code create an autosave settings file.

mkdir .vscode;
echo "{\n\"editor.formatOnSave\": true,\n\"editor.formatOnType\": true,\n\"editor.formatOnPaste\": true\n}" > .vscode/settings.json;

ESlint File

touch .eslintrc.js;

File: ./.eslintrc.js

Prettier File

These are my personal settings, so adjust as needed.

touch .prettierrc.js

File: ./.prettierrc.js

TypeScript Configuration File

This is a basic configuration for TypeScript, but you will need to adjust this later depending on your application needs.

touch tsconfig.json

File: ./tsconfig.json

Configure Package Scripts

Add the following two new lines for "scripts"

File: ./package.json

Main App File

mkdir src;
touch src/index.ts;

File: ./src/index.ts

Testing Our App

Development Mode

In development mode, you can modify your code, save it, and it will automatically restart the server to serve up your latest code.

Run the following:

yarn dev;

NodeJS Local Development On Port 5000

Production Mode

Production mode will be run on the default port 80 and will have the NODE_ENV=production so that it and its dependencies can take advantage of this flag to serve the most optimized code.

Run the following:

yarn start;

NodeJS Production On Port 80

Creating Dockerfile

Create a new Dockerfile and add the code below:

touch Dockerfile;

File: ./Dockerfile

Creating Docker Ignore File

This will be to make sure it’s not importing the node modules and some other files into the Docker build.

touch .dockerignore

File: ./.dockerignore

Testing Dockerfile

This part requires that you have Docker Desktop installed and we’ll test if our newly created Dockerfile builds without any errors.

Build Docker Image

docker build . -t mynodetsapp

Run Container

docker run -it -d -p 5001:80 --name nodeapp mynodetsapp;

Docker NodeJS Production On Port 5001 Mapped To Port 80

Don’t forget to remove your container once you’re done testing it.

docker rm -f mynodetsapp

Packing Up File For Deployment

You’ll notice that we won’t be using Docker Hub to push or pull from, that is because I don’t believe AWS has a way to pull from Docker Hub.

If anyone knows how to pull from Docker Hub from any AWS service, I would love to hear about it in the comments, or send me a Tweet.

rm -rf node_modules;
zip -r Archive.zip ./;

Commit Code To Git

Don’t forget to commit your code to GitHub and you may need to add a line to your .gitignore for the Archive.zip or

File: .gitignore

*.zip

AWS Deployment

Creating Elastic Beanstalk App

Login to get to: https://console.aws.amazon.com/console/home

AWS Management Console

Click on Create Application.

Elastic Beanstalk Services

Add configurations:

AWS Elastic Beanstalk Configuration — Part 1 of 3

AWS Elastic Beanstalk Configuration — Part 2 of 3

Make sure to select your newly created Archive.zip file for the Local File to upload, then click Create application.

AWS Elastic Beanstalk Configuration — Part 3 of 3

Waiting For Build & Deployment

This might take a couple of minutes, and it may require refreshing the page.

AWS Elastic Beanstalk Building And Deploying Code

Once it’s deployed, you’ll see a screen like this:

AWS Elastic Beanstalk Successfully Deployed

Click to open the application url.

Ex: DockerNodeTsApp.env…elasticbeantaslk.com [↗]

🎉Your Docker NodeJS TypeScript App Deployed To AWS Elastic Beanstalk

In Case Of Error

Yes, I know, sometimes technology can fail us.

There are cases where you might get an error and the build will fail, even on the first try. This can be related to your code, but if you followed the steps that shouldn’t be the case. In case of that scenario, you can just Rebuild the app.

In the top right, click on Actions > Rebuild environment.

AWS Elastic Beanstalk Build Error

You’ll be prompted with a modal, click Rebuild.

AWS Elastic Beanstalk Rebuild Environment

Project Code

codingwithmanny/nodets-docker-app

What’s Next

The next step would be automate the deployment process with AWS Code Pipeline that will take our code from a Git Repository and automatically deploy it to Elastic Beanstalk for us.

̵̶̵ ̵̶̵̴̵̶̵̶̵̶̵̴̵̵I̵̶̵̴̵̶̵̶̵̶̵̴̵̶̵’̵̶̵̴̵̶̵̶̵̶̵̴̵̶̵l̵̶̵̴̵̶̵̶̵̶̵̴̵̶̵l̵̶̵̴̵̶̵̶̵̶̵̴̵̶̵ ̵̶̵̴̵̶̵̶̵̶̵̴̵̶̵b̵̶̵̴̵̶̵̶̵̶̵̴̵̶̵e̵̶̵̴̵̶̵̶̵̶̵̴̵̶̵ ̵̶̵̴̵̶̵̶̵̶̵̴̵̶̵w̵̶̵̴̵̶̵̶̵̶̵̴̵̶̵r̵̶̵̴̵̶̵̶̵̶̵̴̵̶̵i̵̶̵̴̵̶̵̶̵̶̵̴̵̶̵t̵̶̵̴̵̶̵̶̵̶̵̴̵̶̵i̵̶̵̴̵̶̵̶̵̶̵̴̵̶̵n̵̶̵̴̵̶̵̶̵̶̵̴̵̶̵g̵̶̵̴̵̶̵̶̵̶̵̴̵̶̵ ̵̶̵̴̵̶̵̶̵̶̵̴̵̶̵t̵̶̵̴̵̶̵̶̵̶̵̴̵̶̵h̵̶̵̴̵̶̵̶̵̶̵̴̵̶̵i̵̶̵̴̵̶̵̶̵̶̵̴̵̶̵s̵̶̵̴̵̶̵̶̵̶̵̴̵̶̵ ̵̶̵̴̵̶̵̶̵̶̵̴̵̶̵n̵̶̵̴̵̶̵̶̵̶̵̴̵̶̵e̵̶̵̴̵̶̵̶̵̶̵̴̵̶̵x̵̶̵̴̵̶̵̶̵̶̵̴̵̶̵t̵̶̵̴̵̶̵̶̵̶̵̴̵̶̵ ̵̶̵̴̵̶̵̶̵̶̵̴̵̶̵s̵̶̵̴̵̶̵̶̵̶̵̴̵̶̵t̵̶̵̴̵̶̵̶̵̶̵̴̵̶̵e̵̶̵̴̵̶̵̶̵̶̵̴̵̶̵p̵̶̵̴̵̶̵̶̵̶̵̴̵̶̵ ̵̶̵̴̵̶̵̶̵̶̵̴̵̶̵s̵̶̵̴̵̶̵̶̵̶̵̴̵̶̵o̵̶̵̴̵̶̵̶̵̶̵̴̵̶̵o̵̶̵̴̵̶̵̶̵̶̵̴̵̶̵n̵̶̵̴̵̶̵̶̵̶̵̴̵̶̵,̵̶̵̴̵̶̵̶̵̶̵̴̵̶̵ ̵̶̵̴̵̶̵̶̵̶̵̴̵̶̵s̵̶̵̴̵̶̵̶̵̶̵̴̵̶̵o̵̶̵̴̵̶̵̶̵̶̵̴̵̶̵ ̵̶̵̴̵̶̵̶̵̶̵̴̵̶̵m̵̶̵̴̵̶̵̶̵̶̵̴̵̶̵a̵̶̵̴̵̶̵̶̵̶̵̴̵̶̵k̵̶̵̴̵̶̵̶̵̶̵̴̵̶̵e̵̶̵̴̵̶̵̶̵̶̵̴̵̶̵ ̵̶̵̴̵̶̵̶̵̶̵̴̵̶̵s̵̶̵̴̵̶̵̶̵̶̵̴̵̶̵u̵̶̵̴̵̶̵̶̵̶̵̴̵̶̵r̵̶̵̴̵̶̵̶̵̶̵̴̵̶̵e̵̶̵̴̵̶̵̶̵̶̵̴̵̶̵ ̵̶̵̴̵̶̵̶̵̶̵̴̵̶̵t̵̶̵̴̵̶̵̶̵̶̵̴̵̶̵o̵̶̵̴̵̶̵̶̵̶̵̴̵̶̵ ̵̶̵̴̵̶̵̶̵̶̵̴̵̶̵c̵̶̵̴̵̶̵̶̵̶̵̴̵̶̵h̵̶̵̴̵̶̵̶̵̶̵̴̵̶̵e̵̶̵̴̵̶̵̶̵̶̵̴̵̶̵c̵̶̵̴̵̶̵̶̵̶̵̴̵̶̵k̵̶̵̴̵̶̵̶̵̶̵̴̵̶̵ ̵̶̵̴̵̶̵̶̵̶̵̴̵̶̵b̵̶̵̴̵̶̵̶̵̶̵̴̵̶̵a̵̶̵̴̵̶̵̶̵̶̵̴̵̶̵c̵̶̵̴̵̶̵̶̵̶̵̴̵̶̵k̵̶̵̴̵̶̵̶̵̶̵̴̵̶̵ ̵̶̵̴̵̶̵̶̵̶̵̴̵̶̵w̵̶̵̴̵̶̵̶̵̶̵̴̵̶̵h̵̶̵̴̵̶̵̶̵̶̵̴̵̶̵e̵̶̵̴̵̶̵̶̵̶̵̴̵̶̵n̵̶̵̴̵̶̵̶̵̶̵̴̵̶̵ ̵̶̵̴̵̶̵̶̵̶̵̴̵̶̵i̵̶̵̴̵̶̵̶̵̶̵̴̵̶̵t̵̶̵̴̵̶̵̶̵̶̵̴̵̶̵’̵̶̵̴̵̶̵̶̵̶̵̴̵̶̵s̵̶̵̴̵̶̵̶̵̶̵̴̵̶̵ ̵̶̵̴̵̶̵̶̵̶̵̴̵̶̵u̵̶̵̴̵̶̵̶̵̶̵̴̵̶̵p̵̶̵̴̵̶̵̶̵̶̵̴̵̶̵. Here’s the next part:

Automating NodeJS TS Deployments With CodePipeline To Elastic Beanstalk

If you got value from this, please share it on twitter 🐦 or other social media platforms. Thanks again for reading. 🙏

Please also follow me on twitter: @codingwithmanny and instagram at @codingwithmanny.

Other Articles I’ve Written

NodeJS Docker Deployment Process

Deploying ReactJS With Docker

How To Automate Docker Builds With GitHub