DEV Community

Cover image for DevOps Challenge 1: Set Up a Web App Using AWS and VS Code
Hyelngtil Isaac
Hyelngtil Isaac

Posted on • Originally published at hyelngtil.awstech

DevOps Challenge 1: Set Up a Web App Using AWS and VS Code

Introducing Today's Project!

In this project, I will demonstrate how to set up a remote SSH connection to an EC2 instance using VS Code. I'll install Maven and Java, generate a basic web app, and edit code without VS Code.

Key tools and concepts
Services I used were IAM, EC2, Security Groups, Key Pairs, VS Code, Maven, and Java. Key concepts I learnt include SSH for secure access, Maven project structure, dynamic vs static pages with JSP, and why IDEs like VS Code simplify cloud development.

Project reflection
One thing I didn't expect in this project was discovering that index.jsp isn’t just like HTML but can actually run Java code to make the page dynamic.

🔥This project took me approximately 2hours. The most challenging part was setting permissions using 'icalcs' and sustaining the SSH connection for an extended period of time. I was able to stay logged in for the period of the project. I'll have to re-establish the SSH connection intermittently. It was most rewarding to be able to successfully set the permission on Windows OS especially

This project is part one of a series of DevOps projects where I'm building a CI/CD pipeline! I'll be working on the next project in the next few days.


Launching an EC2 instance

I started this project by launching an EC2 instance because I needed a secure, cloud-based server to host my web app and practice DevOps workflows like remote development, CI/CD setup, and infrastructure management.

I also enabled SSH
SSH is a secure protocol that verifies your identity using a private key and encrypts data between your computer and a remote server. I enabled SSH so I could safely connect to my EC2 instance and use it.

Key pairs
A key pair is what let you securely access your EC2 instance. It’s made of two halves: a public key that AWS keeps, and a private key that you download.
Once I set up my key pair, AWS automatically downloaded a '.pem' file to my DevOps folder—my private key for secure EC2 access


Set up VS Code

VS Code, short for Visual Studio Code, is a powerful and widely used Integrated Development Environment (IDE) that helps developers write, edit, and manage code efficiently.
I installed it so I could securely connect to my EC2 instance and build my web app with a smooth coding experience


My first terminal commands

The first command I ran for this project was 'cd Desktop\DevOps' to navigate to the folder where my key file is located.

I also updated my private key's permissions by running: 'icacls' commands in the terminal as shown in the screenshot. This made the file readable only by me, securing it for SSH access to my EC2 instance.


SSH connection to EC2 instance

To connect to my EC2 instance, I ran the command >>ssh -i Maven-DevOps Keypair.pem ec2-user@ec2-3-80-80-185.compute-1.amazonaws.com<<

This command required an IPv4 address
A server's IPV4 DNS is the public address for your EC2 server that the internet uses to find and connect to it. The local computer you're using to do this project will find and connect to your EC2 instance through this IPv4 DNS.


Maven & Java

Apache Maven is a Project Builder and a Dependency manager. It gives a ready‑made structure for Java projects (folders, config files, etc.) and downloads the necessary extra code libraries needed by apps (e.g., logging tools, database connectors).

Maven is required in this project because I will use Maven to generate a web app project from a template (called an archetype).

Java is a popular programming language used to build different types of applications, from mobile apps to large enterprise systems.
Java is required in this project because it is used by Maven to operate. It will be used in generating and building the intended web app.


Create the Application

I generated a Java web app using the command

mvn archetype:generate \
-DgroupId=com.nextwork.app \
-DartifactId=nextwork-web-project \
-DarchetypeArtifactId=maven-archetype-webapp \
-DinteractiveMode=false

I installed Remote - SSH, which is an extension in VS Code that lets me connect directly via SSH to my EC2 instance securely over the internet. I installed it to use VS Code to work on files or run programs on my instance easily.

Configuration details required to set up a remote connection include

Host ec2-54-196-112-71.compute-1.amazonaws.com
HostName ec2-54-196-112-71.compute-1.amazonaws.com
IdentityFile C:\Users\hyeln\Desktop\DevOps\nextwork-keypair.pem
User ec2-user

Using VS Code's file explorer, I could see all the webapp project files, folders, and subfolders in their hierarchy!

Two of the project folders created by Maven are src (source) folder which holds all the source code files that define how your web app looks and works. Webapp is a special subfolder within src dedicated to the web-facing part of the app. HTML CSS JS.


Using Remote - SSH

The index.jsp is the starting page of your Java web app — like index.html in a static site, but with the added power of Java code to generate dynamic, changing content.

I edited index.jsp by navigating to the file via remote-SSH, the editing and saving.



Top comments (0)