Deploying Web App with docker and Nginx to server

Hi, I’ve been working on a web app for quite some time and currently in the deployment stage and trying to get the site up and running on Server and for development, we are using docker as it allows applications to be shuttled easily between environments. Nginx was set up to reverse proxy to docker’s ports.

Proxy

In computer networking, a proxy server is a server application or appliance that acts as an intermediary for requests from clients seeking resources from servers that provide those resources.

Nginx is a web server that can also be used as a reverse proxy, load balancer, mail proxy and HTTP cache. In our case, it acts as a reverse proxy server that sits behind the firewall in a private network and directs client requests to the appropriate backend server. Nginx redirects the client’s request at our domain/IP address to the docker web app.

Workflow

1. Log in to the server
   It should be pretty easy for Mac or Linux user to log in via SSH. While for Window user, the easiest way is to use git bash besides of Putty.
   ssh user@ipaddress There is an option to set up ssh key if you prefer not using a password for security's concern
2. Activate Nginx
   There is a good article on how to install Nginx , It is important to adjust the firewall before testing it.
   sudo ufw status to check the status and sudo ufw allow 'Nginx HTTP' to allow traffic on port 80. Please be aware that installing Nginx would activate the server's internal firewall which blocks port 22 thus this command sudo ufw allow 22/tcp saves you from being blocked away by your server.
3. Reverse Proxy
   First, determine the port number you wanted to forward to. Since We are using Docker, It can be checked on our .yml file.

version: '3'
services:
  db:
    image: mysql/mysql-server:8.0
    ports:
        - "42333:3306"
    volumes:
      - ./db_data:/var/lib/mysql
       # - ./all_files.sql:/docker-entrypoint-initdb.d/all_files.sql
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: pass
      MYSQL_DATABASE: db
      MYSQL_USER: user
      MYSQL_PASSWORD: pass

  webapp:
    build: ./marketplace
    volumes:
      - ./marketplace:/var/www/html/
    depends_on:
      - db
    restart: always
    links:
      - db:mysql
    ports:
      - "8000:80"
     
volumes:
    db_data:

For the marketplace, the ports: 8000:80 telling us that the application running inside the container is exposed at port 80. But external system/entity cannot access it, so it needs to be mapped to host server port 8000.

To set up the new virtual Host File, you need to go to the the sites-available directory (/etc/nginx/sites-available).
Create a file by using VIM . sudo vi marketplace.conf.

server{
        root /var/www/html;
        listen 80;
        listen [::]:80;
        server_name xxx.xxx.xx.80;
          location / {
            proxy_pass         http://127.0.0.1:8000;
            proxy_redirect     off;
            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-Host $server_name;
            proxy_set_header   X-Forwarded-Proto $scheme;
              }
        }

save marketplace.conf and quit by :wq on VIM. http://127.0.0.1 is the local host

The next step is to activate the host by creating a symbolic link between the sites-available directory and the sites-enabled directory. In apache, the command to accomplish this is
sudo ln -s /etc/nginx/sites-available/marketplace.conf marketplace.conf

The final step is to restart Nginx and your site will be up and running on the server.
sudo service Nginx restart

The process of ‘pulling’ files from GitHub repo to Server and installing is done by the local runner of GitHub action in the ci/cd pipeline which I might be writing about next time.