Typescript containerized

A typescript project is an ideal project for containerizing. It's normally a project with no direct references to other projects ( other than using rest resources ). An containerized application should contain everything to run the application. In case of typescript the only service which is necessarly is an HTTP server. There are multiple choises available for use in an container but a nice one, one you should always consider using, is nginx .

Using nginx in a containerized application is not complicated but there are some things which helps you with a quickstart.

Pull nginx from the internet

Start using nginx in a seperate container, just pull the latest available nginx container from the internet ( assuming you have docker allready installed ):

docker pull nginx

Create a DockerFile

The next thing is to create an DockerFile in your project. This DockerFile is a set of commands which docker build uses to create the images. Later on this DockerFile is allso used with the DockerCompose command and file. An standard DockerFile is looking like this:

FROM nginx:alpine

COPY docker/nginx.conf /etc/nginx/nginx.conf
COPY dist/DockerTestApp /usr/share/nginx/html

WORKDIR /usr/share/nginx/html

This from tells the build that with this image the image with the name: nginx:alpine is used. Next to that there two copy commands: to copy the nginx config and to copy the content of your dist folder ( with is the result of the ng build ).

Create the nginx config file

It''s nice to copy you own nginx.config file into the nginx container. In this way you can set some custom paramereters for you specific container. The standard nginx config file is looking like this:

worker_processes  1;

events {
    worker_connections  1024;

http {
    server {
        listen 80;
        server_name  localhost;

        root   /usr/share/nginx/html;
        index  index.html index.htm;
        include /etc/nginx/mime.types;

        gzip on;
        gzip_min_length 1000;
        gzip_proxied expired no-cache no-store private auth;
        gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;

        location / {
            try_files $uri $uri/ /index.html;

Build an image

So with this in place you can create the image by running the build:

docker buld - t imagename:tagname

You can build with the same imagename but a different tagname which can be a version number. It's a tag indicating the version of the image. After the build check if the image is created with the command:

docker image ls

Run the container

Now we have an image we can run the application in an container. Therefor we execute the docker run command. With this you nave two options. Just running the container. This serves up you content which your build has copied to the right path in the nginx container. This is statis and great for checking the build but if you are debugging and or building the application it's not that great, therefor ou can run the container and map an volume to http directory from nginx. This will serves up just the content of our dist folder. Meaning you just have to execute a ng build to check the output directoy in the container. Both commands:

## run
docker run -p 8080:80 test/inginx:1.0

## run wiht volume
docker run --rm -it -v ${PWD}/dist/dockertestapp:/usr/share/nginx/html -p 80:80 test/teustest:1.0

The ${PWD} is a pointer for docker on Windows to the local directory, on linux or mac the pointer has a slightly different syntax, check the documents for this.

Push it to the server

After running the container locally the container must be pushed to a server. We expect that all depenencies are in the container and the container is acting exactly as it does on th e local-workstation. For testing I used a linux workstation with CentOs and docker installed. The image is goin to be pushed to GitHub to a private repository and on the linux machine pulled from this repository. Pushing an container to GitHub has something strange in it. You have to tag to image to the name of your login and repository in Github. So my login in Github is teusvanarkel and the repository is test. I had to tag the image: teusvanarkel\test before I was able to push it to Github: command

Tag it

docker tag teustest teusvanarkel/test

Push it to Github

docker push teusvanarkel/test

Pull the container from the server

If you login on Github you will see in the repository and container with the tag you just created. Using the this image on linux machine is not more than pulling it from Github and start it

docker pull teusvanarkel/test
docker run teusvanarkel/test

And see you have a webapplication running on a webserver without ever needed to install and or configure a webserver. Very Nice!




Saving your comment....

Naam is verplicht!
Email is verplicht!
Opmerking is verplicht!