DEV Community: Nandes Simanjuntak

Deploying Golang and Angular Applications with Docker and Nginx

Nandes Simanjuntak — Tue, 23 Apr 2024 14:09:31 +0000

Introduction

Welcome to my blog! In this article, I've documented the process of deploying a Golang backend and Angular frontend application using Docker and Nginx. This tutorial will walk you through the steps to set up a production-ready environment for your Golang and Angular applications.

Project Repository
You can find the code for this project on GitHub: Project Repository

My Image Converter Application
Check out the deployed application to see it in action: My Image Converter

Personal Website
Visit my personal website to learn more about me and my other projects: ninedaystech.com

Choosing your server provider

Before diving into deployment, the first step is to select a reliable server provider. There are several options available, including Google Cloud Platform (GCP), Amazon Web Services (AWS), and others. For this guide, i've chosen DigitalOcean as my server provider for its simplicity, affordability, and robust features.

To get started with DigitalOcean, you can follow these steps: https://www.digitalocean.com/community/tags/getting-started

Prepare your project

Let's take an example with a deployment that use docker compose:

Below Dockerfile for backend side, like i have mentioned above i develop my simple application using go for the backend

# syntax=docker/dockerfile:1

ARG GO_VERSION=1.22

FROM golang:${GO_VERSION}-alpine

ENV GO_ENV production

WORKDIR /usr/src/backend

COPY go.mod go.sum ./

RUN go mod download

COPY . .

RUN CGO_ENABLED=0 GOOS=linux go build -o main ./cmd

EXPOSE 9090

CMD ["./main"]

And for the frontend i develop my simple application using Angular. Below Dockerfile for frontend side:

FROM node:20-alpine AS build

WORKDIR /usr/src/app

COPY package*.json ./

RUN npm cache clean --force

RUN npm install -g @angular/cli

RUN npm install
RUN npx ngcc --properties es2023 browser module main --first-only --create-ivy-entry-points

COPY . .

RUN npm run build

FROM nginx:stable

COPY --from=build /usr/src/app/dist/frontend/browser /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf

In the frontend side, i did multi-stage builds in my dockerfile. Because i use multi-stage which is my angular application will run on nginx image, so i need add configuration file for nginx. The configuration file named as nginx.conf. Below the example for nginx configuration file:

user  nginx;
worker_processes  auto;

error_log  /var/log/nginx/error.log notice;
pid        /var/run/nginx.pid;

events {
    worker_connections  1024;
}

http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       80;
        server_name  localhost;

        root   /usr/share/nginx/html;
        index  index.html index.htm;

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

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   /usr/share/nginx/html;
        }
    }
}

And then i will create that image and run the container using docker compose. Below my docker compose configuration:

services:
  backend:
    build:
      context: ./backend
    ports:
      - 9090:9090
    volumes:
      - ./backend/converted_images:/go/src/app/converted_images

  frontend:
    build:
      context: ./frontend
      dockerfile: Dockerfile
    ports:
      - 8081:80

I will run my backend using port 9090 and port 8081 for my frontend. I used port forwarding for my frontend because my nginx run on port 80.

Deployment section

Okay, let's deploy our project. First you need connect to your server/droplets. Open your terminal and run command like below:

ssh username@your_ip_address

Then, you need to install docker and nginx in your server. If you using digital ocean maybe this can help you to install docker and nginx: docker installation guide for ubuntu and nginx installation guide for ubuntu.

Clone Project

Begin by cloning your project onto your server. I typically place my projects in the /var/www/html directory. Once the cloning is complete, navigate to the project directory and run the following command to start your project: docker compose up -d

CONTAINER ID   IMAGE                      COMMAND                  CREATED        STATUS        PORTS                                       NAMES
c93969a04b43   image-converter-backend    "./main"                 46 hours ago   Up 46 hours   0.0.0.0:9090->9090/tcp, :::9090->9090/tcp   image-converter-backend-1
3856213fb4f5   image-converter-frontend   "/docker-entrypoint.…"   46 hours ago   Up 46 hours   0.0.0.0:8081->80/tcp, :::8081->80/tcp       image-converter-frontend-1

Configure NGINX

After installation done, next we need to tell NGINX to listen to port 80 (http requests) for our custom domain name and map it back to the port we configured in our docker-compose.yml file and our app’s production config.

SSH into your server and create a new file in /etc/nginx/sites-available/ (you can name it yourdomain.com) with the following contents:

server {
  listen        80;
  server_name   yourdomain.com www.yourdomain.com;
  location / {
    proxy_pass  http://localhost:9090;
  }
}

Next we need to create a symlink to the file for the /sites-enabled directory:

cd /etc/nginx/sites-enabled/
sudo ln -s /etc/nginx/sites-available/yourdomain.com ./

Check that the symlink was created successfully:

ls -l

# output:
... yourdomain.com -> /etc/nginx/sites-available/yourdomain.com

Next check that the NGINX syntax is OK:

sudo nginx -t

# output:
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

Finally restart the service:

sudo systemctl restart nginx

Note: The above step is only for backend, you can follow the same step and enter the proxy_pass with appropriate address

Conclusion

Congratulations! You've successfully deployed your project to your server. Now, let's access your newly deployed application and ensure that all features are running smoothly. You can find the project repository and the final result.

I hope this guide has been helpful in simplifying the deployment process for you. If you have any questions, feedback, or suggestions for improvement, please don't hesitate to leave a comment below. Your input is valuable and will help us enhance future tutorials.

Thank you for reading, and happy coding!

Docker Basic

Nandes Simanjuntak — Wed, 04 Oct 2023 00:14:25 +0000

Introduction

Docker is one of the most popular Container Manager that introduced around 2013. Docker is a free and open source application, so that we can use it for free. Docker enables you to separate your applications from your infrastructure so you can deliver software quickly. With Docker, you can manage your infrastructure in the same ways you manage your applications. By taking advantage of Docker's methodologies for shipping, testing, and deploying code, you can significantly reduce the delay between writing code and running it in production.

The Docker platform

Docker provides the ability to package and run an application in a loosely isolated environment called a container. The isolation and security lets you to run many containers simultaneously on a given host. Containers are lightweight and contain everything needed to run the application, so you don't need to rely on what's installed on the host. You can share containers while you work, and be sure that everyone you share with gets the same container that works in the same way.

Docker provides tooling and a platform to manage the lifecycle of your containers:

Develop your application and its supporting components using containers.
The container becomes the unit for distributing and testing your application.
When you're ready, deploy your application into your production environment, as a container or an orchestrated service. This works the same whether your production environment is a local data center, a cloud provider, or a hybrid of the two.

Docker Architecture

Docker uses a client-server architecture. The Docker client talks to the Docker daemon, which does the heavy lifting of building, running, and distributing your Docker containers. When we install Docker, usually it already contains Docker Client and Docker Daemon. The Docker client and daemon can run on the same system and the Docker client and daemon communicate using a REST API, over UNIX sockets or a network interface.

# command that you can use to check version of docker
docker version

Docker Registry

Docker Registry is where we store Docker Images, with Docker Registry we can store image that we have made and it will can use in Docker Demon anywhere as long as it can connect to Docker Registry.

Example Docker Registry:

Docker Hub : https://hub.docker.com/
Digital Ocean Container Registry : https://www.digitalocean.com/products/container-registry/
Google Cloud Container Registry : https://cloud.google.com/container-registry
etc.

Docker Image

Docker Image is similar to an application installer, where in Docker Image there are applications and dependencies. Before we run application in docker, we need to be sure, that have Docker Image from that application.

# To show list docker image
docker image ls

# To download Docker Image from Docker Registry
# You can use http://hub.docker.com/ to find image that you want use
docker image pull imagename:tag

# Example to pull image
docker image pull redis:latest

# Remove Docker Image
docker image rm redis:latest

Docker Container

A container is a runnable of an image. If a Docker Image is like an application installer, then a Docker Container is similar to an application from the installer. One image can use for a lot container with different Docker Container name. When you make Docker Container from Docker Image, the image can't to remove. You must be remove your container firstly then you can remove your image as you want. By default when we create container, the container is not running, we must run it firstly.

# To show list docker container
docker container ls

# Create container
# Note: exampleredis is name of container and
# redis:lates is the image and tag that want we use in container
docker container create --name exampleredis redis:latest

# Run container
docker container start exampleredis

# Stop container
docker container stop exampleredis

# Remove container
docker container rm exampleredis

# View log in container
docker container logs exampleredis

# Execute bash script in container
docker container exec -i -t exampleredis /bin/bash

Container Port

When we run container, a container is relatively isolated from other containers and its host machine. Docker has the ability to do port forwarding, that is forwarding a port on the host system to a Docker Container when we create the container. This method is suitable if we want to expose the ports in the container to the outside via the host system.

# Command to forward port in container to system host.
docker container create --name containername --publish posthost:portcontainer image:tag

# Ex: forward nginx port in container
# Example below nginx using port 80 in container and we publish it to port 8080 to system host.
docker container create --name nginxcontainer --publish 8080:80 nginx:latest

Environment Varible

We can use the environment variables in Docker to dynamically configure the application. We can pass --env as a param when we create a container and fill your configuration.

# Pass --env parameter as environment variable
docker container create --name containername --env KEY=value --env KEY2=value image:tag

# Here the example when we use mongo db image in container and pass the environment variable.
docker container create --name mongocontainer --env MONGO_INITDB_ROOT_USERNAME=root --env MONGO_INITDB_ROOT_PASSWORD=password mongo:latest

Container Resource Limit

When we create container, by default will use all CPU and Memory that given to Docker on Mac and Windows, and will use all CPU and Memory that available in the Linux system host. When one of container to many use CPU and Memory, it will affect to performance in other container or maybe the system host. So that it better to use resource limit when we create container. Pass --memory or --cpus as argument when create container, example below.

# Implement resource limit using nginx image
docker container create --name containername --publish 8081:80 --memory 100m --cpus 0.5 nginx:latest

# If you want to view resource usage, use:
docker container stats

Bind Mounts

Bind Mounts is the ability to mount (share) files or folders on the host system to containers on docker. This feature is very useful when we want to send configurations from outside the container, or for example save data created in the application inside the container into a folder on the host system. If a file or folder does not exist on the host system, it will be automatically created by Docker. To mount, we can use the --mount parameter when creating the container and the contents of the --mount parameter have their own rules.