How to deploy web application on production server?

Developing a web application and deploying it to a production server are entirely different undertakings. Running the front end and back end applications in a development or local environment is straightforward. However, deploying to a production server involves numerous steps and complexities.

There are many free hosting services like Netlify and Heroku, but they typically only support static websites. For web applications that include a front end, back end, and database, you’ll need to use cloud servers such as AWS, GCP, Azure, or DigitalOcean. In this article, I will explain about web application deployment in general. These steps are almost for all cloud services.

Note: The technologies mentioned in parentheses are those I use. Feel free to choose your preferred technologies or tools.

• Front End(React): Alternatively, you can use Flutter or any other front end technology of your choice. Check this link for react app deployment process.
• Back End(FastApi): You can also opt for Node.js, Spring Boot, or any other back end API service technology.
• Database(PostgreSQL): MySQL or any other database can be used as well.
• Web Server(Nginx): Apache, Istio, Kong, or any other web server are also viable options.
• SSL/TSL(certbot, which is free): You can use any other open-source or paid SSL/TLS service.

Lets dive into the details.

Development Environment Architecture:

• Dev environment only needed below modules
  - Browser (To access front end application)
  - Front end (react application)
  - Back end API services (FastApi)
  - Database (PostgreSQL)
• All specified modules are in the same system/machine
• No external dependencies needed
• Communication is very easy and straight forward as all modules are in the same system

Development Environment architecture

Production Environment Architecture:

• In a production environment, all components (front end, back end, and database) are deployed on a remote server, such as a cloud server, as illustrated below.

Production Environment architecture

• Each application can be assigned its own subdomain. For example, you can use app.domain.com for the front end and api.domain.com for back end services. When you acquire a domain name, configuring these subdomains is free and incurs no additional cost.
• For security reasons, back end services should not be exposed to the public. Instead, only the web server (NGINX, in this case) endpoint is exposed. When the web server receives a request for API services, it redirects the request to the back end services.
• Since requests come from the public network, it is crucial to configure SSL/TLS to secure the application, ensuring that only HTTPS requests are accepted, not HTTP.
• Public access means anyone can reach our services, so we must restrict access by allowing only specific origins through CORS settings.
• Containerizing the application with Docker and Docker Compose aids in scaling the application.
• Based on the above information, the following are required for production deployment:
  - Production server IP or domain name (e.g., chanduthedev.com)
  - Web Server (NGINX)
  - SSL/TLS certificates for HTTPS (Certbot, which is free)
  - CORS configuration
  - Docker and Docker Compose

Will add more details about each topic in the coming articles.

Happy Learning!!