Counter-Strike 2: Price Tracker

A self-hosted web application that can track and report the prices of cosmetic items in Counter-Strike 2 via Discord alerts.

My Goal:

• Find an open-source repository on GitHub and containerize it with Docker.
• Deploy and host the application securely on my home network

Self-hosting an internet-accessible application on a personal home network comes with its risks, and it is therefore important to minimize the attack surface of the network and its devices.

The Network Layout

I'll start with the layout of the network. A virtualized OPNSense instance sits behind my physical home router and in front of our internal networks. All of the devices behind the OPNSense router as well as the router itself are VirtualBox VMs running on my home PC. Here is a diagram that illustrates this:

Setting up the VMs:

OPNSense Router

• NAT
• homeLAN
• serverLAN

I'll enter the login info to start the installation and select the default options (default keymap, ZFS, Stripe - No Redundancy). Before exiting the installation screen I'll change root password from its default and power down the VM.

Network Interface Configuration:

OPNSense Web GUI

Next I will set up a dedicated virtual machine that will have access to my router's web GUI panel. I'll create a home PC virtual machine in VirtualBox and install Lubuntu on it as the operating system. I chose Lubuntu because of its lightweight desktop experience and small disk space requirements compared to Ubuntu Desktop. This workstation will be our dedicated machine for accessing the OPNSense web GUI administrator tool and have a minimal installation of Lubuntu.

I chose to do a minimal install of Lubuntu on this VM, so I'll need to download a web browser after I do security and package updates.

OPNSense Firewall Configuration

Firewall Rules:

OPT1 Interface

This is what the firewall rules in the table shown above look like in the OPNSense web GUI:

After applying/saving our new rules, the firewall will now allow devices in our OPT1 network to be accessed from the internet.

Finally, the last thing I need to do is navigate to "Services" → "Dnsmasq DNS & DHCP" → "General" and add our OPT1 interface.

Now the firewall will allow devices within our OPT1 network to access the internet as well as other necessary services for the web application (MongoDB, GitHub SSH, DNS), but will block OPT1 devices from communicating with devices in the LAN network.

Web Application VM

Once again we'll create a new virtual machine in VirtualBox. This VM will host our web server and run our Docker containers. For the OS I'll be installing Ubuntu Server. Official Download Link

Immediately after the standard installation is complete, I can check that this VM is in the OPT1 network with the command "ip a".

After performing the necessary security/package updates, I'll install Git and Docker.

The virtual environment is now complete! The server can now pull the application source code from GitHub, containerize its services, and run them.

Application Setup

With our virtual network and computing environment set up, it's time to get the application up and running. From this point on I'll be doing everything in an SSH session from the host machine (my home PC).

There are some files that need to be created and/or edited that the application requires, the first one being the .env file.

Edit these lines in .env.production: To this:

MongoDB Atlas

Our open-source application was designed to use MongoDB as its database. By signging up on their website I can create a free MongoDB Atlas cluster. Immediately after creating a new cluster I'll create a new database user:

Docker Containers

Now for the next main objective in this project: learn how to containerize applications with Docker. I'm going to have the frontend and backend run in their own separate containers. To do this, I'll create two Dockerfiles and a docker-compose.yml file.

Dockerfile.frontend

            FROM nginx:alpine

            # Remove default nginx html and copy our index.html
            RUN rm /usr/share/nginx/html/*
            COPY index.html /usr/share/nginx/html/index.html

            # Copy our nginx.conf
            COPY nginx.conf /etc/nginx/conf.d/default.conf

            # Front-end listens on example port 80
            EXPOSE 80
        

Dockerfile.backend

            # BUILD
            FROM node:20-alpine AS builder
            WORKDIR /app

            COPY package*.json ./
            RUN npm ci
            #RUN npm ci --omit=dev

            # RUNTIME
            FROM node:20-alpine

            # tini for parent process (PID 1)
            RUN apk add --no-cache tini wget curl

            WORKDIR /app

            COPY --from=builder /app/node_modules ./node_modules

            COPY package.json ./
            COPY server.js ./
            COPY src/ ./src/

            # Non-root user for security
            RUN addgroup -S appgroup && adduser -S appuser -G appgroup
            USER appuser

            # Back-end listens on example port 8081
            EXPOSE 8081

            ENTRYPOINT ["/sbin/tini", "--"]
            # cmd ["npm","run","dev"]
            CMD ["npm", "start"]
        

docker-compose.yml

            services:

            backend:
                build:
                context: .
                dockerfile: Dockerfile.backend
                container_name: cs2tracker-backend
                restart: unless-stopped
                env_file:
                - .env.production
                environment:
                NODE_ENV: production
                ports:
                - "8081:8081"
                networks:
                - cs2tracker-net
                healthcheck:
                test: ["CMD", "wget", "-qO-", "http://localhost:3001/user/04408607-505d-42bc-a9b9-db2ec518a3bb"]
                interval: 30s
                timeout: 5s
                retries: 3
                start_period: 15s

            frontend:
                build:
                context: .
                dockerfile: Dockerfile.frontend
                container_name: cs2tracker-frontend
                restart: unless-stopped
                ports:
                - "8080:8080"
                depends_on:
                backend:
                    condition: service_healthy
                networks:
                - cs2tracker-net

            networks:
            cs2tracker-net:
                driver: bridge

        

Now that the services have been containerized and are able to run on my VM, I should check to ensure that the web application is reachable.

Port Forwarding

In order to make the application accessible from the internet, I need to set up some port forwarding rules. I'll start with my physical home router by accessing its web GUI admin panel on my home machine and creating a new port forwarding rule. On my router, it looks like the image below. It conveniently lists the devices that are on my home network for me, with the one we're looking for at the bottom.

DNS and HTTPS

Now it's time to acquire a domain name from a registrar and map our IP address to it. I already have a domain name (the website you are currently viewing this web page on, jlprojectportfolio.com) and would like to avoid having to pay for another one just for this project alone. I can avoid this by creating a new wildcard SSL certificate for my domain and an additional subdomain that I will use for my web application.

First, I'll connect to my EC2 instance via SSH and navigate to the directory of my NGINX config folder for my portfolio website.

portfolio.conf

            # Configuration file for the portfolio website
            server {

                if ($host = jlprojectportfolio.com) {
                    return 301 https://$host$request_uri;
                } 

                listen       80;
                listen       [::]:80;
                server_name  jlprojectportfolio.com;
                root         /usr/share/nginx/html;

                error_page 404 /404.html;
                location = /404.html {
                }

                error_page 500 502 503 504 /50x.html;
                location = /50x.html {
                }
            }

            # Settings for TLS enabled server.
                server {
                    listen       443 ssl;
                    listen       [::]:443 ssl;
                    http2        on;
                    server_name  jlprojectportfolio.com;
                    root         /usr/share/nginx/html;

                    ssl_certificate /path/to/cert/fullchain.pem; # managed by Certbot
                    ssl_certificate_key /path/to/cert/privkey.pem; # managed by Certbot

                    error_page 404 /404.html;
                    location = /404.html {
                    }

                    error_page 500 502 503 504 /50x.html;
                    location = /50x.html {
                    }

                }

        

cs2webapp.conf

            # Configuration file for the cs2 price tracker website
            server {

                if ($host = app.jlprojectportfolio.com) {
                    return 301 https://$host$request_uri;
                }

                listen       80;
                listen       [::]:80;
                server_name  app.jlprojectportfolio.com;

                # Route to server
                location / {
                    proxy_pass http://myserveraddress/;
                    proxy_set_header Host $host;
                    proxy_set_header X-Real-IP $remote_addr;
                    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                    proxy_set_header X-Forwarded-Proto $scheme;
                }
            }

        # Settings for a TLS enabled server.
            server {
                listen       443 ssl;
                listen       [::]:443 ssl;
                http2        on;
                server_name  app.jlprojectportfolio.com;
                root         /usr/share/nginx/html;

                ssl_certificate /path/to/cert/fullchain.pem; # managed by Certbot
                ssl_certificate_key /path/to/cert/privkey.pem; # managed by Certbot
                ssl_session_cache shared:SSL:1m;
                ssl_session_timeout  10m;
                ssl_ciphers PROFILE=SYSTEM;
                ssl_prefer_server_ciphers on;

                # Route to server
                location / {
                    proxy_pass http://myserveraddress/;
                    proxy_set_header Host $host;
                    proxy_set_header X-Real-IP $remote_addr;
                    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                    proxy_set_header X-Forwarded-Proto $scheme;
                }
            }

        

Certbot will need to verify that I am the owner of my domain. It'll output an authentication string that will need to be added as a TXT record with a name that starts with "_acme-challenge...." to my DNS service. In my case, Let's Encrypt/Certbot will skip this process because I already did it the first time I deployed the web application.

Conclusion

Now my web application is live and accessible to other devices on the internet! To recap, I have done the following:

• Split an open-source application into two containers (frontend/backend services) with Docker Compose
• Hosted the application on a server in a DMZ subnet behind an OPNSense router with firewall rules that secure the network and isolate server traffic from the rest of the network.
• Changed the NGINX configuration on my EC2 instance so that it serves the static content of my web portfolio and acts as a reverse proxy that redirects the appropriate web traffic to the web server behind my home network.

This surprisingly doesn't cover everything I've done on this project. The original author of the application only wrote backend code (MongoDB, API), the code for the frontend was actually written by me. If you'd like to see more, here is the link to my Github repository: here