Deploying a web application can often be seen as a daunting task, especially for beginners. Time constraints and the steep learning curve of deployment can be significant barriers. In this guide, we'll walk you through setting up a fully functional web application on AWS EC2 within an hour. Our stack includes Spring Boot, Vue.js, Docker, Ansible, and other cutting-edge technologies to ensure a smooth experience.

Technologies Used

• Spring Boot with Kotlin
• Vue.js
• MongoDB
• Docker
• Traefik Reverse Proxy
• AWS EC2
• Cloudflare
• Mailgun

What You Will Learn

By the end of this guide, you will know how to:

• Clone an existing git repository
• Set up a working environment
• Run your application locally
• Set up AWS EC2 and Ansible
• Configure DNS with Cloudflare
• Deploy your application using domain names

Step-by-Step Deployment Guide

08:00 - Clone the Git Repository

First, you need to clone the repository containing the application code. If you haven't already got a repository, you can pull a skeleton project that takes care of the basic configuration.

git clone https://github.com/your-repo/sample-project.git

08:02 - Setting Up Your Working Environment

Next, set up your development environment according to the README.md in your cloned repository. This will include setting up Node.js, Java, Docker, and other dependencies.

08:10 - Run the Application Locally

Ensure everything works on your local machine. You can run the application using Docker or build tools as specified in the README.md file.

docker-compose up

08:14 - Setup AWS EC2 and Ansible

Log in to your AWS Management Console and create a new EC2 instance. Remember to configure security groups to allow the necessary ports. Next, install Ansible on your local machine and follow the steps in README.md to set up your deployment scripts.

08:22 - Configure Secrets and IP Addresses

Create a configuration file that includes your secrets (such as API keys) and IP addresses. This file will be crucial for making your application accessible over the internet.

08:32 - Run Your Application and Make It Accessible via IP

Deploy your application on EC2 and make it accessible via the instance's public IP address. You will need to adjust your Docker configurations and Ansible playbooks as needed.

08:36 - Buy a Domain and Configure Cloudflare

Purchase a custom domain and configure it through Cloudflare to manage DNS settings and enable HTTPS. This will add an extra layer of security and improve performance.

08:46 - Configure SMTP Server

Set up an SMTP server using Mailgun for sending and receiving emails. Make sure to configure the necessary DNS records in Cloudflare to ensure proper mail flow.

08:52 - Update Configuration for Domain Access

Update your configuration files to include domain names and redeploy your application. This will make your web app accessible via your custom domain.

08:56 - Final Deploy and Verification

Deploy your application once more using the updated configurations. Verify that your application is accessible via the domain name and ensure all services (UI, API, email) are working seamlessly.

./run-redeploy-domain.sh

09:00 - You're Done!

Celebrate your successful deployment with a cup of coffee. Congratulations, your web app is now live!

In-Depth Look at the Components

Vue.js Single Page Application

The UI component of your application is a Single Page Application (SPA) built using Vue.js. This lightweight yet powerful framework allows for reactive data binding and component-based architecture. With minimal configuration, you can have a fully functional front end ready in no time.

Spring Boot with Kotlin Backend

The backend is implemented using Spring Boot and is written in Kotlin. This combination ensures robust performance and easy maintenance. Kotlin's expressive nature and Spring Boot’s extensive ecosystem make this a great choice for backend services.

Ansible for Automation

Ansible automates repetitive deployment tasks, reducing human error and saving time. From software installation to Docker image builds and deployments, Ansible can handle it all with minimal configuration.

Docker and Traefik

Docker ensures that your application runs in a consistent environment across different machines. Traefik acts as a reverse proxy, managing incoming requests and routing them to the appropriate service within your Docker containers.

Networking and Security

We utilize AWS, Cloudflare, and Traefik to ensure secure and efficient networking for your application. By integrating HTTPS, Basic Authentication, and CORS, you enhance security while making sure your application is reliable and performant.

Conclusion

This deployment framework is perfect for quickly prototyping and deploying minimal viable products (MVPs) or simple web applications. Although not ready for high-demand production environments, it incorporates best practices that can be further expanded for more complex needs. Happy deploying!