Deploy a Web Application on EC2 in 1 hour

Deploy a Web Application on EC2 in 1 hour

Wojciech Marusarz - February 12, 2021

Including Spring Boot app in Kotlin, Vue.js app, MongoDB, Docker containers, Traefik reverse proxy, AWS EC2 setup, configuring Domain, Cloudflare and Mailgun

Technologies used

Have you ever come up with a great idea for a web app but were held back by doubts and fear of spending lots of your precious time coding – only to learn that nobody can use it? What if the project ends up being another git repository buried somewhere in the github limbo and waiting indefinitely for it’s turn to come? If you ever had such thoughts, this skeleton app is for you.

This seed project takes care of the basic EC2 setup, deployment and hosting, allowing you to focus exclusively on your application’s requirements. For more details and source code visit Github

Ready, steady, go - 60 minutes left!

  • 08:00 - Clone git repository
  • 08:02 - Setup you working environment [readme]
  • 08:10 - Run application on localhost, use docker or build tools [readme]
  • 08:14 - Setup EC2 and Ansible [readme]
  • 08:22 - Create configuration file with secrets and IP addresses [readme]
  • 08:32 - Run application and make it accessible by IP [readme]
  • 08:36 - Buy a domain and configure cloudflare for redirections [readme]
  • 08:46 - Configure SMTP server [readme]
  • 08:52 - Create another configuration file with secrets and domain names [readme]
  • 08:56 - Run application and make it accessible by your domain [readme]
  • 09:00 - You’re done – coffee time before you start coding on your own

To observe the effects of your efforts, visit your domain. You should be able to see the application ready for further development below. You can also visit my domain to see how it works in real life – https://wmarusarz.space

Vue.js SPA Application Main Page

The application, when opened, sends a request to verify communication between UI and API – you can see it in the browser Dev Tool in Network tab. Additionally, if you have configured SMTP, you can verify also if emails are sent.

If you would like to update your application, consecutive builds and deployments will take just 30 seconds – just run the run-redeploy-domain.sh script and wait two minutes until it’s done.

For better understanding, I recommend reading it all in a README.md file.

Package contents

To help you make sure that the project meets your needs I’ve broken it into four parts:

  • Vue.js application
  • Spring Boot application
  • Ansible – docerizing and deployment
  • Networking

This will allow you to develop your own application with just the basic knowledge of the scope of this seed project.

Vue.js application

The UI application is a Single Page Application written in lightweight Vue.js version 2. It was generated with vue cli with minimal configuration enabled: vue router, Vuex, Lint and scss. Additionally Vuetify is used as a Material Design components library.

Npm is used to run or build the application. This creates a dist directory during the build, ready to be served by NGinx server. Please mind that the dist directory is a set of static files served by a web server. To enable UI application configuration (API address, Basic Auth credentials) script entrypoint.sh is triggered before the app starts to replace variables in config files with values from environment variables.

Spring Boot application

Spring Boot application is generated with Spring Initalizr and it was supplemented with some configurations, libraries and plugins, which would be helpful during further development.

The application is written in Kotlin, which empowers the best programming practices and simplifies app development compared to Java. It also uses project Reactor and has a test environment configured with testcontainers on the board – read more HERE.

The application uses MongoDB (please take care of backups), it has CORS configured and is secured by Basic Authentication.

Gradle is used as build tool, with some plugins enabled:

Spring configuration is injected during application start. You can also use application.yml files specific for the profile. To monitor the application and preview configuration, you can use Spring Actuator.

Ansible – dockerizing and deployment

Ansible is used to automate repetitive deployment tasks. One-time operations like creating an EC2 instance, assigning elastic IP to EC2, DNS & SMTP configuration are done manually.

Ansible takes care of installing software on EC2 (playbook-ec2-configure.yml), creating docker images and pushing them to ECR (playbook-push.yml) and running applications on EC2 (playbook-run.yml). To use ansible, providing minimal configuration (pb-config.yml) described in README.md is required.

Docker is used to avoid installing java, nginx, mongo and to provide a fresh environment for each deploy. All services are wrapped into docker images, hosted on AWS ECR – ready for deployment.

Networking

The application can be accessed in one of two ways – using IP address or Domain name.

If an IP address is used, almost nothing else has to be done. Just unlock some TCP ports for EC2 as described in README.md and you are done. Just build and push docker images and run applications.

More configuration is required when a domain name is used, but it’s still not much of a hassle.

First of all, buy a domain. Remember that domain renewal is usually more expensive than buying one, so don’t forget to disable auto-renewal.

When you own a domain, Cloudflare takes control over it. Cloudflare is responsible for:

  • redirecting requests to EC2 IP address,
  • creating a subdomain for API,
  • redirecting http to https,
  • encrypting requests between browser and Cloudflare.

When https request reaches EC2, Traefik is used as a reverse proxy. Traefik accepts all HTTPS requests (port 443), and basing on hostname (yourdomain.com, api.yourdomain.com), redirects requests to applications running in docker containers at specific ports: 8080 UI, 8081 Spring Boot. What is more, Traefik automatically challenges https certificates from letsencrypt.org so requests between Cloudflare and EC2 are also encrypted.

For sending emails, SMTP server configuration is required. Mailgun is used for this purpose.

This is what it all looks like in a big picture:

Networking scheme

Is it production ready?

This application is great for fast prototyping, creating MVPs or even running non-demanding web apps. It also takes care of security with basic authentication, CORS, HTTPS, helping you avoid storing secrets in the repository. It also enforces some best code practices – lint and tests with testcontainers configured. The only thing that you need to take care of are database backups.

Remember there is still much to be done to make it production ready. If you expect high availability and redundancy, this application is not for you. To meet these requirements, you will probably need more infrastructure.

On an everyday basis, we take care of meeting the tiniest requirements of our customers.

The key point here is containerization, which provides lightweight containers that can be automatically deployed on multiple servers depending on traffic load - so called horizontal scaling.

How do we do this at nexocode? Let’s see below.

  • Multiple containers to run UI and API applications
  • Kubernetes for orchestration and application configuration management
  • Load balancer
  • MongoDB on remote servers with configured geo-replication
  • Logs aggregation with Elasticsearch, Kibana and Sentry
  • Terraform - for defining infrastructure as Code ( IaC), read more HERE
  • Prometheus and Grafana for monitoring
  • Gitlab as a CI/CD provider, more information HERE
  • Pre-production environments with e2e tests
  • Putting emphasis on communication, code reviews, code and tests quality

Clearly, it’s far from production ready, but… if you’re looking for a way to deploy a simple web application, this seed project is for you – it allows for a quick start and even faster updates, enforces best practices and is easy in use.

About the author

Wojciech Marusarz

Wojciech Marusarz

Software Engineer

Linkedin profile Twitter Github profile

Wojciech enjoys working with small teams where the quality of the code and the project's direction are essential. In the long run, this allows him to have a broad understanding of the subject, develop personally and look for challenges. He deals with programming in Java and Kotlin. Additionally, Wojciech is interested in Big Data tools, making him a perfect candidate for various Data-Intensive Application implementations.

Tempted to work
on something
as creative?

That’s all we do.

join nexocode

This article is a part of

Zero Legacy
36 articles

Zero Legacy

What goes on behind the scenes in our engineering team? How do we solve large-scale technical challenges? How do we ensure our applications run smoothly? How do we perform testing and strive for clean code?

Follow our article series to get insight into our developers' current work and learn from their experience. Expect to see technical details, architecture discussions, reviews on libraries and tools we use, best practices on software quality, and maybe even some fail stories.

check it out

Zero Legacy

Insights from nexocode team just one click away

Sign up for our newsletter and don't miss out on the updates from our team on engineering and teal culture.

Done!

Thanks for joining the newsletter

Check your inbox for the confirmation email & enjoy the read!

This site uses cookies for analytical purposes.

Accept Privacy Policy

In the interests of your safety and to implement the principle of lawful, reliable and transparent processing of your personal data when using our services, we developed this document called the Privacy Policy. This document regulates the processing and protection of Users’ personal data in connection with their use of the Website and has been prepared by Nexocode.

To ensure the protection of Users' personal data, Nexocode applies appropriate organizational and technical solutions to prevent privacy breaches. Nexocode implements measures to ensure security at the level which ensures compliance with applicable Polish and European laws such as:

  1. Regulation (EU) 2016/679 of the European Parliament and of the Council of 27 April 2016 on the protection of natural persons with regard to the processing of personal data and on the free movement of such data, and repealing Directive 95/46/EC (General Data Protection Regulation) (published in the Official Journal of the European Union L 119, p 1); Act of 10 May 2018 on personal data protection (published in the Journal of Laws of 2018, item 1000);
  2. Act of 18 July 2002 on providing services by electronic means;
  3. Telecommunications Law of 16 July 2004.

The Website is secured by the SSL protocol, which provides secure data transmission on the Internet.

1. Definitions

  1. User – a person that uses the Website, i.e. a natural person with full legal capacity, a legal person, or an organizational unit which is not a legal person to which specific provisions grant legal capacity.
  2. Nexocode – NEXOCODE sp. z o.o. with its registered office in Kraków, ul. Wadowicka 7, 30-347 Kraków, entered into the Register of Entrepreneurs of the National Court Register kept by the District Court for Kraków-Śródmieście in Kraków, 11th Commercial Department of the National Court Register, under the KRS number: 0000686992, NIP: 6762533324.
  3. Website – website run by Nexocode, at the URL: nexocode.com whose content is available to authorized persons.
  4. Cookies – small files saved by the server on the User's computer, which the server can read when when the website is accessed from the computer.
  5. SSL protocol – a special standard for transmitting data on the Internet which unlike ordinary methods of data transmission encrypts data transmission.
  6. System log – the information that the User's computer transmits to the server which may contain various data (e.g. the user’s IP number), allowing to determine the approximate location where the connection came from.
  7. IP address – individual number which is usually assigned to every computer connected to the Internet. The IP number can be permanently associated with the computer (static) or assigned to a given connection (dynamic).
  8. GDPR – Regulation 2016/679 of the European Parliament and of the Council of 27 April 2016 on the protection of individuals regarding the processing of personal data and onthe free transmission of such data, repealing Directive 95/46 / EC (General Data Protection Regulation).
  9. Personal data – information about an identified or identifiable natural person ("data subject"). An identifiable natural person is a person who can be directly or indirectly identified, in particular on the basis of identifiers such as name, identification number, location data, online identifiers or one or more specific factors determining the physical, physiological, genetic, mental, economic, cultural or social identity of a natural person.
  10. Processing – any operations performed on personal data, such as collecting, recording, storing, developing, modifying, sharing, and deleting, especially when performed in IT systems.

2. Cookies

The Website is secured by the SSL protocol, which provides secure data transmission on the Internet. The Website, in accordance with art. 173 of the Telecommunications Act of 16 July 2004 of the Republic of Poland, uses Cookies, i.e. data, in particular text files, stored on the User's end device.
Cookies are used to:

  1. improve user experience and facilitate navigation on the site;
  2. help to identify returning Users who access the website using the device on which Cookies were saved;
  3. creating statistics which help to understand how the Users use websites, which allows to improve their structure and content;
  4. adjusting the content of the Website pages to specific User’s preferences and optimizing the websites website experience to the each User's individual needs.

Cookies usually contain the name of the website from which they originate, their storage time on the end device and a unique number. On our Website, we use the following types of Cookies:

  • "Session" – cookie files stored on the User's end device until the Uses logs out, leaves the website or turns off the web browser;
  • "Persistent" – cookie files stored on the User's end device for the time specified in the Cookie file parameters or until they are deleted by the User;
  • "Performance" – cookies used specifically for gathering data on how visitors use a website to measure the performance of a website;
  • "Strictly necessary" – essential for browsing the website and using its features, such as accessing secure areas of the site;
  • "Functional" – cookies enabling remembering the settings selected by the User and personalizing the User interface;
  • "First-party" – cookies stored by the Website;
  • "Third-party" – cookies derived from a website other than the Website;
  • "Facebook cookies" – You should read Facebook cookies policy: www.facebook.com
  • "Other Google cookies" – Refer to Google cookie policy: google.com

3. How System Logs work on the Website

User's activity on the Website, including the User’s Personal Data, is recorded in System Logs. The information collected in the Logs is processed primarily for purposes related to the provision of services, i.e. for the purposes of:

  • analytics – to improve the quality of services provided by us as part of the Website and adapt its functionalities to the needs of the Users. The legal basis for processing in this case is the legitimate interest of Nexocode consisting in analyzing Users' activities and their preferences;
  • fraud detection, identification and countering threats to stability and correct operation of the Website.

4. Cookie mechanism on the Website

Our site uses basic cookies that facilitate the use of its resources. Cookies contain useful information and are stored on the User's computer – our server can read them when connecting to this computer again. Most web browsers allow cookies to be stored on the User's end device by default. Each User can change their Cookie settings in the web browser settings menu: Google ChromeOpen the menu (click the three-dot icon in the upper right corner), Settings > Advanced. In the "Privacy and security" section, click the Content Settings button. In the "Cookies and site date" section you can change the following Cookie settings:

  • Deleting cookies,
  • Blocking cookies by default,
  • Default permission for cookies,
  • Saving Cookies and website data by default and clearing them when the browser is closed,
  • Specifying exceptions for Cookies for specific websites or domains

Internet Explorer 6.0 and 7.0
From the browser menu (upper right corner): Tools > Internet Options > Privacy, click the Sites button. Use the slider to set the desired level, confirm the change with the OK button.

Mozilla Firefox
browser menu: Tools > Options > Privacy and security. Activate the “Custom” field. From there, you can check a relevant field to decide whether or not to accept cookies.

Opera
Open the browser’s settings menu: Go to the Advanced section > Site Settings > Cookies and site data. From there, adjust the setting: Allow sites to save and read cookie data

Safari
In the Safari drop-down menu, select Preferences and click the Security icon.From there, select the desired security level in the "Accept cookies" area.

Disabling Cookies in your browser does not deprive you of access to the resources of the Website. Web browsers, by default, allow storing Cookies on the User's end device. Website Users can freely adjust cookie settings. The web browser allows you to delete cookies. It is also possible to automatically block cookies. Detailed information on this subject is provided in the help or documentation of the specific web browser used by the User. The User can decide not to receive Cookies by changing browser settings. However, disabling Cookies necessary for authentication, security or remembering User preferences may impact user experience, or even make the Website unusable.

5. Additional information

External links may be placed on the Website enabling Users to directly reach other website. Also, while using the Website, cookies may also be placed on the User’s device from other entities, in particular from third parties such as Google, in order to enable the use the functionalities of the Website integrated with these third parties. Each of such providers sets out the rules for the use of cookies in their privacy policy, so for security reasons we recommend that you read the privacy policy document before using these pages. We reserve the right to change this privacy policy at any time by publishing an updated version on our Website. After making the change, the privacy policy will be published on the page with a new date. For more information on the conditions of providing services, in particular the rules of using the Website, contracting, as well as the conditions of accessing content and using the Website, please refer to the the Website’s Terms and Conditions.

Nexocode Team

Close

Want to be a part of our engineering team?

Join our teal organization and work on challenging projects.

CHECK OPEN POSITIONS