Set Up a Web App in the Cloud

Project 1 of the 6 Day DevOps Challenge - Kick off CI/CD pipeline with this foundational project!

Introduction

⚡️ 30 second Summary

Welcome to Day ONE of the 6 Day DevOps Challenge!

Today, you'll learn the basics of building a web app using AWS and another tool called VS Code. This will lay the foundation for your DevOps work for the rest of this challenge.

Get ready to:

💻 Launch an EC2 instance.
🔌 Use VS Code to set up a remote SSH connection to your EC2 instance.
☕️ Install Maven and Java and generate a basic web app.
💎 Edit code without VS Code - you'll see why IDEs are so well loved after this!

Wait, what's the 6 Day DevOps Challenge?

Ooooo, glad you asked 😸

In the 6 Day DevOps Challenge, you'll build from scratch a CI/CD pipeline that automates the build and deployment of a web app. This is a 100% hands-on challenge, so get ready to write documentation and add your work to your portfolio along the way (we'll show you how).

What's CI/CD? Why do this challenge?

A CI/CD (Continuous Integration and Continuous Deployment/Delivery) pipeline is a tool that automates the steps from development (i.e. writing changes to code) to deployment (i.e. making the code changes available to users). This helps engineering teams build and release software much, much faster! That's why most modern tech companies use CI/CD pipelines to ship software to users, and why it's a crucial skill for DevOps Engineers.

Want a complete demo of how to do this project, from start to finish? Check out our 🎬 walkthrough with Natasha 🎬

If you're up for a bit of a challenge, quiz yourself on the key concepts up ahead in this project.

This project is part of a series:

Before we start Step #1...

Before we get started, it's important that you know what we're trying to do today.

Set up an IAM user

For this project you'll need your IAM user, not your root user.

In this step, get ready to:

Create/log in as an IAM user

Before we dive in, log in to your AWS account with your IAM user.

Do you have an IAM user?

Yes

No

Oooo it's the start of a new era!

If you don't have an IAM user yet - here are the steps to create one (this takes less than 10 mins).

What is an IAM user? Why are we setting one up?

In AWS, a user is a person or a computer that can do things on the AWS cloud.

When you create an AWS account for the first time, the login you get is called the root user of the AWS account. AWS actually recommends to not use your root user for everyday tasks to protect it from security breaches.

You should create IAM users instead. If a root user is a master key to your AWS account, think of IAM users as key copies. IAM users have separate usernames and passwords to your root user, and you can set them to have limited access to your account's resources.

Head to your AWS Account as the root user.
Open the AWS IAM console.

From the left hand navigation panel, choose Users.

Choose Create user.
For the User name, name it:

[[YOURNAME="enter your name"]]-IAM-Admin

Make sure to select the checkbox next to Provide user access to the AWS Management Console - optional.‍

Not seeing this screen?

This does not apply to all accounts, but if you're prompted with a pop up panel that says Are you providing access to a person?, choose I want to create an IAM user.‍

For the console password, choose Custom password.
Type in a password that you will be able to remember/access in the future.

Save this password for future projects

You will use this password for all future projects, so make sure to choose a secure one!

Deselect the checkbox for Users must create a new password at next sign-in - Recommended.

Choose Next.
In the permissions set up page, choose Attach policies directly.
From the list of Permissions policies, select AdministratorAccess.

Choose Next.

Choose Create user.
Voilà - you've just created your new user! Stay on this page.
Choose Download .csv file.

Copy the Console sign-in URL.

Now you're ready to start using your IAM user. 🏁
Log out of your root user's AWS Account.
Paste and go to your copied console sign-in URL.
Open your downloaded .csv file containing your user's access instructions.
Log in using your IAM user's username and password in the .csv file.

Once you're logged in, you're ready to use your IAM user for this project! Make sure to keep the login details safe - you'll need them for the entire 6 Day DevOps Challenge!

Note

PLEASE make sure you log in to your IAM Admin User instead of the root user - it's truly best practice for account security.

Switch your Region to the one closest to you.

We recommend using the following regions

Did you know that not all regions have the same number of AWS services available?

There are only 13 AWS Regions that provide ALL the services we'll use in the 6 Day DevOps Challenge. We'd recommend using one of these regions from the very start of the challenge, so all your resources are in the same place. Even if you don't live in these regions, you can still use them:

us-east-1 (N.Virginia)
us-east-2 (Ohio)
us-west-2 (Oregon)
eu-west-1 (Ireland)
eu-west-2 (London)
eu-central-1 (Frankfurt)
eu-north-1 (Stockholm)
eu-south-1 (Milan)
eu-west-3 (Paris)
ap-southeast-1 (Singapore)
ap-southeast-2 (Sydney)
ap-northeast-1 (Tokyo)
ap-south-1 (Mumbai)

💡 Extra for Experts: How do you know only these regions have all the services we need?

By checking out AWS' guidance on services by region! Once you select a region, you can sift through the list and identify whether it has all the services you need.

Launch an EC2 Instance

Before we get into the juicy work of building your web app, we need to set up a home for your web app's files.

Since we want your web app to be entirely created and run on the cloud, we'll use a virtual server (EC2 instance) to house our development work.

Let's get an EC2 instance up and running!

In this step, get ready to:

Launch a new EC2 instance.
Set up a key pair for secure access.
Set up network settings for your instance.

Switch your Region to the one closest to you.

We recommend using the following regions

Did you know that not all regions have the same number of AWS services available?

us-east-1 (N.Virginia)
us-east-2 (Ohio)
us-west-2 (Oregon)
eu-west-1 (Ireland)
eu-west-2 (London)
eu-central-1 (Frankfurt)
eu-north-1 (Stockholm)
eu-south-1 (Milan)
eu-west-3 (Paris)
ap-southeast-1 (Singapore)
ap-southeast-2 (Sydney)
ap-northeast-1 (Tokyo)
ap-south-1 (Mumbai)

💡 Extra for Experts: How do you know only these regions have all the services we need?

By checking out AWS' guidance on services by region! Once you select a region, you can sift through the list and identify whether it has all the services you need.

Head to Amazon EC2 in your AWS Management Console.

What is EC2?

A legendary AWS service! Amazon EC2 is a service that lets you rent and use virtual computers in the cloud. They're like your personal computers, but they exist on the internet instead of being physically in front of you. You can create, customize, and use these computers for all different reasons, from running applications to hosting websites.

Psssst... EC2 = Elastic Compute Cloud.

Here's what the three words mean:

Elastic = flexible. This service can easily adapt and change in size and power to fit your needs.

Compute = computing power. EC2 provides virtual computers that can do various tasks, just like your personal computer.

Cloud = available over the internet.

In your EC2 console, select Instances from the left hand navigation panel.
Choose Launch instances.

What does an EC2 'instance' mean?

If EC2 is the service that creates virtual computers/servers, an instance is one of those computers/servers.

Picking an EC2 instance is like customising a virtual computer that fits what you need for your project. You can customize your EC2 instance's CPU, memory, storage, and networking capacity and more!

Let's set up your EC2 instance.
In Name, enter the value:

nextwork-devops-[[YOURNAME="enter your name"]]

Choose Amazon Linux 2023 kernel-6.1 AMI under Amazon Machine Image(AMI).

Leave t3.micro (or t2.micro in some regions) under Instance type. Both are free tier eligible.

Under Key pair (login), choose Create a new key pair.

What is a key pair?

A key pair in EC2 is like the keys to your virtual computer. Just like you need a key to unlock and start your car, a key pair lets 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.

When you use the private key, it verifies that you're the one allowed to access that specific virtual machine, keeping everything secure and just for you.

Use nextwork-keypair as your key pair's name.
Keep the Key pair type as RSA, and the Private key file format as .pem
Select Create key pair.

What is a key pair type? Why do we pick RSA?

The key pair type determines the algorithm used for generating the key pair's cryptographic keys.

We use RSA (Rivest-Shamir-Adleman), which is one of the most common cryptographic algorithms used due to its strength and security. RSA is widely supported and trusted for creating digital signatures and encrypting data.

💡 What is a Private key file format? Why do we pick .pem?

Just like how documents can be saved in different formats (e.g. PDF, DOCX, or TXT) for different apps or systems, private keys also come in different file formats. Not every system or application can process all these formats, so choosing the right one is crucial.

The .pem format stands for Privacy Enhanced Mail. It started off as a way to secure emails and has become the go-to format for cryptographic keys because it works with many different types of servers e.g. EC2 instances!

A new file will automatically download to your local computer - nice! This is your private key.
Before we lose track of our .pem file, let's organise it in our computer.
Head to your local computer's desktop.
Create a new folder in your desktop called DevOps.

🍎 macOS/Linux

🖼️ Windows

Move your .pem file from your Downloads folder into your DevOps folder.

Note the path of your .pem file:

🍎 macOS/Linux

Right-click on nextwork-keypair.pem in your DevOps folder, hold Option, and select Copy "nextwork-keypair.pem" as Pathname.

Your path will look like:

/Users/maximus/Desktop/DevOps/nextwork-keypair.pem

You can also use the shortcut ~/Desktop/DevOps/nextwork-keypair.pem - the ~ stands for your home directory.

🖼️ Windows

Right-click on your .pem file in the DevOps folder, select Copy as path, and paste it. It will look something like:

C:\Users\[[YOURNAME="enter your name"]]\Desktop\DevOps\nextwork-keypair.pem

Paste your .pem file path here to save it for later: Paste your .pem file path

Done! We'll come back to this later.

Back to our EC2 instance setup, head to the Network settings section.
For Allow SSH traffic from, select the dropdown and choose My IP. This makes sure only you can access your EC2 instance.
Double check that the IP address under My IP is correct - you can check your IP by clicking here.
If your IP address is different from what's under My IP, select Custom from the dropdown instead. Enter your IP and make sure to add a /32 to the end e.g. 012.345.678.9/32
Leave the default values for the remaining sections.

What is SSH?

SSH i.e. Secure Shell is a protocol used to make sure only authorized users can access a remote server. When you connect to your EC2 instance later in this project, SSH verifies you have the correct private key that matches the public key on the server.

SSH is also a type of network traffic. Once SSH has authorized you, it'll set up a secure connection between you and the EC2 instance. All data transferred (including your commands and the responses from the instance) gets encrypted. This encryption makes SSH an ideal method for working with virtual servers!

When you're ready, choose Launch instance.

Success 😎

Note

If you're EVER stuck - ask the NextWork community. Students like you are already asking questions about this project.

Install VS Code

Now that your EC2 instance is up and running, how are we going to get inside your instance and set up a web app?

We'll use Visual Studio Code (VS Code) to connect with your instance, so you can create and edit your web app's code.

First things first, let's install VS Code.

In this step, get ready to:

Download VS Code in your computer.
Set up a terminal in VS Code, so you can communicate with your EC2 instance.
Update your key pair's permission settings, so you can use it to log into your EC2 instance later.

Do you have VS Code installed on your computer?

Yes

Awesome! You're already set up to use VS Code.
Open VS Code in your local computer.

No

Let's goooooo! We'll set up VS Code in just a few minutes, and learn why we use it along the way.

Head to the Visual Studio Code website.
Install VS Code by following the installation instructions for your OS (Mac, Windows, or Linux). The download page will recommend the right version for your computer automatically.

What is VS Code?

Visual Studio Code (VS Code) is one of the most popular tools for creating and managing coding projects. You'll often hear people call VS Code an IDE (Integrated Development Environment), which means software that help you write and edit code. It's similar to how Microsoft Word or Google Docs help you write documents!

VS Code also comes with extra tools that we'll use to connect to virtual servers like EC2 instances.

💡 Not sure which download option to pick?

The big button on the VS Code website should auto-detect the right version for you. If you see multiple options and aren't sure, pick the one that matches your operating system (Windows, Mac, or Linux). Most Windows users should choose the x64 option, and most Mac users should choose Apple Silicon (unless your Mac is from before 2020, in which case choose Intel).

Once downloaded, find the installer in your Downloads folder and open it.

🍎 macOS/Linux

Double-click the .zip file to unzip it.
Open Visual Studio Code from the unzipped file. If macOS asks if you're sure you want to open it, click Open.

🖼️ Windows

Follow the installation steps. Accept the license agreement and click Next through each screen.

On the Select Additional Tasks screen, leave the default options and click Next.

When the installation is complete, make sure Launch Visual Studio Code is checked and click Finish.

Welcome to VS Code!

🎨 If you'd like, you can customise VS Code's color theme! On the Welcome page, select Choose your theme and pick a theme you like.

Select Terminal from the top menu bar.
Select New Terminal from the dropdown.

What is a terminal?

A terminal is where you send instructions to your computer using text instead of clicks. For example, instead of right-clicking on your desktop to create a new folder, you can type a simple text command in your terminal instead. It's like sending text messages to your computer's operating system to tell it what to do.

Every computer has a terminal. On Windows, it's often called Command Prompt or PowerShell, while macOS and Linux systems use Terminal.

🍎 macOS/Linux

🖼️ Windows

Navigate your terminal to the DevOps folder. You’ll do this by entering this command in the terminal:

🍎 macOS/Linux

cd ~/Desktop/DevOps

What does this command do?

Our end goal is to connect to your EC2 instance by running the .pem file you downloaded when you set up your instance. Right now the terminal can’t find it, so we’re navigating into the DevOps folder where your .pem file lives.

Let’s break down the command you just ran:

cd (Change Directory): This command is used to move between folders in your file system.
~ represents your home directory i.e. the starting point of a computer’s file system. For most users, this is where you begin when you open the terminal.
/Desktop/DevOps tells your terminal how to get from your home directory to the DevOps folder. The forward slashes (/) are used to separate each directory in the path.

🖼️ Windows

cd ~\Desktop\DevOps

Run dir to confirm your .pem file is in this folder.

Getting an error like "The system cannot find the path specified"?

If your Desktop is synced to OneDrive, your DevOps folder lives in a different location. Try this instead:

cd ~\OneDrive\Desktop\DevOps

Still not working? Open File Explorer, navigate to your DevOps folder, click on the address bar at the top, and copy the full path. Then use that path with cd in your terminal.

Once you’re in the DevOps folder, you might want to check if your .pem file is there.
Use ls (Mac/Linux) or dir (Windows).

🍎 macOS/Linux

🖼️ Windows

What does this command do?

ls or dir lists all the files and directories in your current location. If your .pem file is in the DevOps folder, you should see it listed 👀

Change the permissions of your .pem file:

In the terminal, run the following command to allow access to your .pem file.

🍎 macOS/Linux

chmod 400 nextwork-keypair.pem

This command won't show any output if it runs successfully - you'll just see a new blank line in your terminal. No news is good news!

What is chmod?

This command stands for "change mode", and it changes the permissions of your .pem file. Using 400 makes it readable only by you (the owner) and restricts access for everyone else.

We're changing the permissions of your .pem file so that you have access to it when you connect to your EC2 instance later. Blocking out everyone else keeps your .pem file i.e. your secret key secure.

🖼️ Windows

First, find your Windows username by running this in your terminal:

whoami

The output will look something like pcr\administrator. The part before the backslash (pcr) is your PC name. The part after the backslash (administrator) is your username. You only need the username.

Now run these three commands one at a time:

icacls "nextwork-keypair.pem" /reset

icacls "nextwork-keypair.pem" /grant:r "[[YOURUSERNAME="Enter your Windows username"]]:R"

icacls "nextwork-keypair.pem" /inheritance:r

What do these commands do?

These commands lock down your .pem file so only you can read it (which SSH requires):

/reset removes all existing permissions so you start with a clean slate.
/grant:r "YOURUSERNAME:R" gives only your user account read access to the file.
/inheritance:r stops the file from inheriting permissions from its parent folder, keeping it locked down.

✔️ It worked

Great, your .pem file permissions are now set correctly. Continue with the instructions below!

ⓧ I see an error

No worries - we'll troubleshoot it!

Select the tab that matches your issue:

File name mismatch

Double check that the file name in your command (e.g. nextwork-keypair.pem) matches the actual file in your DevOps folder. Run ls (Mac/Linux) or dir (Windows) to check.

Your browser may have renamed the file when downloading (e.g. nextwork-keypair (1).pem). If so, use the actual file name in your command.

Wrong folder

Make sure you're running the command from inside the DevOps folder where your .pem file is stored.

Run ls (Mac/Linux) or dir (Windows) to check if your .pem file is listed. If not, use cd to navigate to the correct folder.

whoami confusion (Windows)

Remember, whoami returns PCNAME\username - only use the part after the \ in your icacls command.

For example, if whoami returns pcr\administrator, your username is administrator, not pcr.

Duplicate keypair

If you created a new EC2 instance and downloaded a second keypair with the same name, your browser may have silently renamed it (e.g. nextwork-keypair (1).pem) or failed to overwrite the old one.

Either use a new keypair name in AWS, or save it to a fresh folder so you know exactly which file you have.

Something else...

Nuclear option

If nothing is working, delete all your EC2 resources and keypairs (both on AWS and your computer), then start fresh from Step 2. Make sure to set permissions on the new .pem file before trying to SSH.

Still stuck?

Get help with your error or share your error with the NextWork community!

Nice work! Now that your .pem file is secure, let's connect to your EC2 instance.

Connect to your EC2 Instance

Your EC2 instance is working and you've just set up VS Code.

You have all the ingredients you need to set up a 🔌 connection 🔌 to your EC2 instance.

Once we're connected, we can work inside your EC2 instance to set up that web app.

In this step, get ready to:

Connect to your EC2 instance.

Head back to your AWS Management Console.
Click on Instances in the breadcrumb at the top of the page.

Click on Instances from the left hand navigation panel.

Click on the checkbox next to your EC2 instance to view its details.

Under the Details tab, look for Public DNS (also called Public IPv4 DNS). You'll need this in the next instruction!

Note your DNS here: YOUR PUBLIC DNS

What is a Public DNS?

A Public DNS (which stands for Domain Name System) 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 DNS address.

👀 This next step has a few important details, so take extra care here.

Now we'll connect to our instance via SSH.
Head back to VS Code and open your terminal again.
Use the following command to connect to your EC2 instance:

ssh -i [[PEMPATH="your .pem file path"]] ec2-user@[[YOURIPDNS="your Public DNS"]]

Not sure how to find your .pem file path?

🍎 macOS/Linux

Open Finder and navigate to your Desktop > DevOps folder.
Right-click on nextwork-keypair.pem, hold Option, and select Copy "nextwork-keypair.pem" as Pathname.
Your path will look like:

/Users/maximus/Desktop/DevOps/nextwork-keypair.pem

You can also use the shortcut ~/Desktop/DevOps/nextwork-keypair.pem - the ~ stands for your home directory.

🖼️ Windows

Open File Explorer and navigate to your Desktop > DevOps folder.
Right-click on nextwork-keypair.pem and select Copy as path.

Your path will look like:

C:\Users\Administrator\Desktop\DevOps\nextwork-keypair.pem

What does this command do?

ssh starts a secure shell connection to your EC2 instance.
-i [[PEMPATH]] specifies the identity file (your .pem file) you're using to authenticate.
ec2-user@[[YOURIPDNS]] specifies the username (ec2-user) and the address of the EC2 instance (Public DNS) to connect to.

✔️ I see a fingerprint message

Nice! That means your SSH connection is working. Continue with the instructions below.

ⓧ I see an error

No worries - we'll troubleshoot it!

Select the tab that matches the error message you see:

Permission denied

"Permission denied (publickey,gssapi-keyex,gssapi-with-mic)"

This means SSH can't authenticate you. Try these fixes in order:

Wrong keypair: Go to EC2 > Instances, click your instance, and check the Key pair name under Details. It must match the .pem file you're using (e.g. nextwork-keypair). If it doesn't match, you'll need to terminate this instance and launch a new one with the correct keypair selected.
Permissions not set: Go back to Step 3 and run the chmod (Mac/Linux) or icacls (Windows) commands again.
File path wrong: Double check your path has no typos and points to the right file.
Windows users: Make sure you used your username (not PC name) in the icacls command.

Connection timed out

"Connection timed out"

Why does this happen?

The Security Group acts as a firewall for your EC2 instance. In Step 2, the SSH rule was set to My IP, which locks access to whatever your IP address was at that moment. If your IP has changed (new WiFi network, different location, or your ISP rotated it), the Security Group blocks your connection entirely - so SSH just hangs until it times out.

Here's how to fix it:

In AWS, go to EC2 > Instances, select your instance, click the Security tab, then click on your Security Group.

Select Edit inbound rules.
For the SSH rule (port 22), set the source to My IP, or manually enter your IP from checkip.amazonaws.com with /32 at the end (e.g. 203.0.113.25/32).

Go back to your terminal and rerun the SSH command from above.

Keeps disconnecting

SSH connects but then disconnects after a short time

Your public IP address may have changed (this is common with dynamic IPs). Update your Security Group inbound rule with your new IP.
If your IP changes often, try using a wider CIDR range (e.g. /26 instead of /32) in your Security Group rule.
Try an alternative SSH client like MobaXterm or Terminus.
As a last resort, reinstall VS Code.

Something else...

Make sure there are no spaces in your folder names (e.g. the DevOps folder cannot be titled Dev Ops).
Check that your .pem file path is correct - run ls (Mac/Linux) or dir (Windows) in your DevOps folder to confirm.

Still stuck?

Get help with your error or share your error with the NextWork community!

Your terminal will ask if you want to continue connecting to this EC2 instance. This is SSH's way of asking if you trust this server.
Enter yes to continue connecting.

🍎 macOS/Linux

🖼️ Windows

Extra for Experts: What does 'fingerprint' in the terminal message mean?

In cyber security, a fingerprint is a unique code that helps verify that the device or connection you are using is secure and hasn't been tampered with. Since it's your first time connecting to this EC2 instance, SSH doesn't have the server's fingerprint stored on your machine yet (so we won't use it).

💡 Fun fact

If we did not change the permission settings of our private key, our EC2 instance would refuse to connect with us!

This is because the permission settings of the private key would be considered too 'open' i.e. nextwork-keypair.pem file would be vulnerable to attackers getting access to file, which exposes your EC2 instance.

Congrats! You've connected your EC2 instance via SSH.

🍎 macOS/Linux

🖼️ Windows

How do I know I've connected to my EC2 instance?

Look out for a change in your terminal's name to something that looks like ec2-user@[[YOURIPDNS]].

Install Apache Maven and Amazon Corretto 8

Connection DONE 😎

This means your terminal has now entered into your EC2 instance and can use it like a computer that's right in front of you!

Our goal today is to set up a web app inside this instance, so let's install two tools that are going to help us build Java web apps.

Introducing Apache Maven and Amazon Corretto 8 🥁

In this step, get ready to:

Install Apache Maven on your EC2 instance.
Install Amazon Corretto 8, a version of Java.
Verify the installations.

What is Apache Maven?

Apache Maven is a tool that helps developers build and organize Java software projects. It's also a package manager, which means it automatically download any external pieces of code your project depends on to work.

We're also using Maven today because it's really useful for kick-starting web projects! It uses something called archetypes, which are like templates, to lay out the foundations for different types of projects e.g. web apps.

We'll use Maven later on to help us set up all the necessary web files to create a web app structure, so we can jump straight into the fun part of developing the web app sooner.

🚨 Make sure you're still SSH'd into your EC2 instance!

Your terminal should show [ec2-user@ip-...]$ at the start of the command line - this means you're connected to your EC2 instance. If you see your local computer's name instead, reconnect using the SSH command from Step 4: ssh -i [[PEMPATH]] ec2-user@[[YOURIPDNS]]

Install Apache Maven by copying and pasting all of these commands into your terminal:

wget https://archive.apache.org/dist/maven/maven-3/3.5.2/binaries/apache-maven-3.5.2-bin.tar.gz
sudo tar -xzf apache-maven-3.5.2-bin.tar.gz -C /opt
echo "export PATH=/opt/apache-maven-3.5.2/bin:$PATH" >> ~/.bashrc
source ~/.bashrc

Getting a "wget: command not found" error?

Run sudo yum install wget -y first to install wget, then try the commands above again.

Don't forget to press Enter after pasting. Maven will take 30-45 seconds to download.

What do these commands do?

wget downloads the Maven package from the Apache archive.
tar extracts the package and saves it in the /opt folder.
echo saves Maven's location to your terminal config, so you can run Maven commands from anywhere.
source reloads your terminal config so the changes take effect right away.

Maven will take 30-45 seconds to download... time for a quick question 👀

Now we're going to install Java 8, or more specifically, Amazon Corretto 8.
Install Java and set up its location by pasting these commands:

sudo dnf install -y java-1.8.0-amazon-corretto-devel
export JAVA_HOME=/usr/lib/jvm/java-1.8.0-amazon-corretto.x86_64
export PATH=/usr/lib/jvm/java-1.8.0-amazon-corretto.x86_64/jre/bin/:$PATH

What is Java? What is Amazon Correto 8?

Java is a popular programming language used to build different types of applications, from mobile apps to large enterprise systems.

Maven, which we just downloaded, is a tool that NEEDS Java to operate. So if we don't install Java, we won't be able to use Maven to generate/build our web app today.

Amazon Corretto 8 is a version of Java that we're using for this project. It's free, reliable and provided by Amazon.

💡 What do these commands do?

The first command installs Java Amazon Corretto 8. Then, the second command tells your EC2 instance how it can find Java, because it'll need to know Java's location to run Java commands! The last command is a time saver - you're saving Java's location so you can run Java commands from anywhere in your EC2 instance without needing to type out the full location each time.

💡 Woah! What's all this text popping up in the terminal?

The text you see after these commands is the terminal keeping you updated about it's progress with installing Java. It shows the specific packages it's going to install, downloading status, and even verifying that everything was installed.

To verify that Maven is installed correctly, run the following command next:
- mvn -v

I don't get a version number

Try running mvn -v in your local terminal as well. Are you still missing a version number, or do you see a version number now?

If you see a version number in your local environment, try updating your JDK. If you don't see a version number in your local environment, try re-installing Maven or ask the NextWork community.

To verify that you've installed Java 8 correctly, run this next:
- java -version

Important

If the command above doesn't return openjdk version 1.8 (=> Java 8), run the following command that allows you to choose the correct Java version: sudo alternatives --config java

📣 If you're EVER stuck - ask the NextWork community. Students like you are already asking questions about this project.

Create the Application

We've assembled both Maven and Java into our EC2 instance. Now let's cut straight to generating the web app!

In this step, get ready to:

Run Maven commands in your terminal to generate a Java web app.

Use mvn to generate a Java web app. To do this, use these commands:

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

Break down these commands for me... What is mvn?

When you run mvn commands, you're asking Maven to perform tasks (like creating a new project or building an existing one).

The mvn archetype:generate command specifically tells Maven to create a new project from a template (which Maven calls an archetype). This command sets up a basic structure for your project, so you don't have to start from scratch.

💡 Extra for Experts: Some of the details you've specified in this command are...

-DartifactId=nextwork-web-project names your project
-DarchetypeArtifactId=maven-archetype-webapp specifies that you're creating a web application.
-DinteractiveMode=false runs the command without pausing for user input, so Maven will go ahead and install everything without waiting for your confirmation.

Watch out for a BUILD SUCCESS message in your terminal once your application is all set up.

Connect VS Code with your EC2 Instance

You might be thinking... have I really just set up a web app? Where is it, how can I actually see it?

In this step, you'll connect VS Code to your EC2 instance so you can see and edit the web app you've just created.

In this step, get ready to:

Install an extension in VS Code.
Use the extension to set up a connection between VS Code and your EC2 instance.
Explore and edit your Java web app's files using VS Code.

Wait...aren't I already connected to my EC2 instance with SSH?

Yes, connecting with SSH in the terminal lets you send text commands to your EC2 instance, but you don't get all the benefits of having an IDE like VS Code.

When you connect VS Code itself to your EC2 instance (not just your terminal), you unlock VS Code’s IDE features (like file navigation and code editing) directly on your EC2 instance. This will make it so much easier for you to edit and manage your web app for the rest of this DevOps series.

Click on the Extensions icon at the side of your VS Code window.

In the search bar, type Remote - SSH and click Install for the extension.

Why are we installing Remote - SSH?

The Remote - SSH extension in VS Code lets you connect directly via SSH to another computer securely over the internet. This lets you use VS Code to work on files or run programs on that server as if you were doing it on your own computer, which will come in handy when we edit the web app in your EC2 instance!

Click on the double arrow icon at the bottom left corner of your VS Code window. This button is a shortcut to use Remote - SSH.

Select Connect to Host...
Select + Add New SSH Host...

What is an SSH Host?

An SSH Host is the computer or server you're connecting to using SSH. It's the target location where you want to run commands or manage files; in our case, the SSH Host is the EC2 instance we created.

📣 If you're EVER stuck - ask the NextWork community. Students like you are already asking questions about this project.

A text box will appear at the top of your VS Code window. This is where you type the SSH command. Enter the same SSH command you used to connect in Step 4:

🍎 macOS/Linux

ssh -i [[PEMPATH="your .pem file path"]] ec2-user@[[YOURIPDNS="your Public DNS"]]

Press Enter.
VS Code will ask you to select a configuration file. Select ~/.ssh/config (this should be the first option).

🖼️ Windows

ssh -i [[PEMPATH="your .pem file path"]] ec2-user@[[YOURIPDNS="your Public DNS"]]

Press Enter.
VS Code will ask you to select a configuration file. Select C:\Users\Enter your username\.ssh\config (this should be the first option).

🍎 macOS/Linux

🖼️ Windows

A Host added! popup will confirm that you've set up your SSH Host - yay!

✔️ I see Host added!

Nice work - move on to the next step!

ⓧ I don't see this popup

Don't worry - the host may have been added without the popup showing. Let's check:

Check your config file first: Open your SSH config file manually (~/.ssh/config on Mac/Linux or C:\Users\USERNAME\.ssh\config on Windows). If you see an entry with your EC2 instance's Public DNS, it worked! Skip ahead to the next instruction.
Delete duplicate entries: If you've attempted this step before, your config file may have old or duplicate host entries. Remove any stale entries and try again.
Re-enter the SSH command: Click the double arrow button on the bottom left corner, select Connect to Host, then + Add New SSH Host... and enter your SSH command again.
Check for typos: Make sure your SSH command matches exactly: ssh -i [[PEMPATH]] ec2-user@[[YOURIPDNS]]. A single extra space or missing character will cause it to fail silently.
Check your .pem file path: Make sure the path to your .pem file is correct and has no spaces.
Select the right config file: When VS Code asks you to select a configuration file, make sure you pick the first option (~/.ssh/config on Mac/Linux or C:\Users\USERNAME\.ssh\config on Windows).

Still stuck?

Get help with your error or share your error with the NextWork community!

Select the blue Open Config button on that popup.
Confirm that all the details in your configuration file look correct:
- Host and HostName should both match your EC2 instance's Public DNS.
- IdentityFile should be the path to your nextwork-keypair.pem file on your local computer.
- User should say ec2-user

Now you're ready to connect VS Code with your EC2 instance!
Click on the double arrow button on the bottom left corner and select Connect to Host again.
You should now see your EC2 instance listed at the top.

Select the EC2 instance and off we gooooooooooo to a new VS Code window ✈️
If VS Code asks you to select the platform of the remote host, choose Linux. This isn't asking about your computer - it's asking about the machine you're connecting to. Your EC2 instance runs Amazon Linux, so select Linux even if you're on Windows or Mac.

If you see a popup asking "Do you trust the authors of the files in this folder?", click Trust Folder & Continue.

Check the bottom right hand corner of your new VS Code window - it should show your EC2 instance's Public DNS.

✔️ It connected

Check the bottom left corner of your new VS Code window - you should see your EC2 instance's Public DNS. You're connected!

ⓧ I see an error

No worries - we'll troubleshoot it!

Select the tab that matches your issue:

Connection timed out

"Could not establish connection to..." or "Connecting with SSH timed out"

🍎 macOS/Linux

🖼️ Windows

Why does this happen?

Go to your EC2 console.
Click Security Groups in the left sidebar.
Select your security group and click Edit inbound rules.
Update the SSH rule's source to My IP (this auto-fills your current IP address).
Click Save rules and try connecting again.

Still not connecting? Try these additional fixes:

Check your instance is running: Go to the AWS console and confirm your EC2 instance's state is Running.
Check your SSH config file: Open the config file and verify the IdentityFile path is correct.
Test your connection in the terminal first: Go back to Step 4 and try connecting via ssh in your terminal. If that doesn't work either, the issue is with your connection, not VS Code.
Click Retry: Sometimes the first connection attempt times out but the retry works.

Permission denied

"Permission denied (publickey,gssapi-keyex,gssapi-with-mic)"

This means SSH can't authenticate you. Try these fixes in order:

Wrong keypair: Go to EC2 > Instances, click your instance, and check the Key pair name under Details. It must match the .pem file you're using (e.g. nextwork-keypair). If it doesn't match, you'll need to terminate this instance and launch a new one with the correct keypair selected.
Permissions not set: Go back to Step 3 and run the chmod (Mac/Linux) or icacls (Windows) commands again.
File path wrong: Double check your path has no typos and points to the right file.
Windows users: Make sure you used your username (not PC name) in the icacls command.

Loading past 10 minutes

SSH host keeps loading:

Open your SSH config file (~/.ssh/config on Mac/Linux or C:\Users\USERNAME\.ssh\config on Windows).
Verify that Host and HostName match your EC2 instance's Public DNS, IdentityFile points to your .pem file, and User is set to ec2-user.
Delete any duplicate or stale host entries from previous attempts - these can confuse VS Code.
Make sure there are no spaces in your folder names (e.g. the DevOps folder cannot be titled Dev Ops).

Keeps disconnecting

VS Code Remote-SSH keeps disconnecting:

A t2.micro/t3.micro instance has limited memory (1 GB). If VS Code keeps crashing, you can try enabling swap memory on the instance.
Try an alternative SSH client like MobaXterm or Terminus if VS Code keeps looping.
As a last resort, reinstall VS Code.

Something else...

Double-check your SSH config file has the correct details and no duplicate entries from previous attempts.

Still stuck?

Get help with your error or share your error with the NextWork community!

Nice work - you've connected VS Code with your EC2 instance! 🥳

Now let's open up your web app's files.

From VS Code's left hand navigation bar, select the Explorer icon.

Select Open folder.
At the top of your VS Code window, you should see a drop down of different file and folder names. Ooooo, this is VS Code asking you which specific file/folder you'd like to open!
Enter /home/ec2-user/nextwork-web-project.
Press OK.

VS Code might show you a popup asking if you trust the authors of the files in this folder. If you see this popup, select Trust Folder & Continue.
Check your VS Code window's file explorer again - a folder called nextwork-web-project is here!

Try expanding all the subfolders in the file explorer. All folders have a > icon next to their name.

What are all these files and subfolders?

All the files and subfolders you see under nextwork-web-project are parts of a web app! You can start working right away on the content you want to display on your web app, since Maven's taken care of the basic structuring and setup.

Let's get to know some of these web app files/folders:

The src (source) folder holds all the source code files that define how your web app looks and works.
src is further divided into webapp, which are the web app's files e.g. HTML, CSS, JavaScript, and JSP files, and resources, which are the configuration files a web app might need e.g. connection settings to a database.
pom.xml is a Maven Project Object Model file. It stores information and configuration details that Maven will use to build the project. We'll use pom.xml later in this project series!

Exploring done! So how can VS Code help you edit your application files? Let's find out.
From your file explorer, click into index.jsp.

What is index.jsp? What's the difference from HTML?

index.jsp is a file used in Java web apps. It's similar to an HTML file because it contains markup to display web pages.

However, index.jsp can also include Java code, which lets it generate dynamic content.

This means content can change depending on things like user input or data from a database. Social media apps are great examples of web apps because the content you see is always changing, updating and personalised to you. HTML files are static and can’t include Java code. That's why it's so important to install Java in your EC2 instance - so you can run the Java code in your web app!

Welcome to editor view of index.jsp. Now we're really using VS Code's IDE abilities - editing code is much easier here than in the terminal.
Let's try modifying index.jsp by changing the placeholder code to the code snippet below. Don't forget to enter your name in the following code:

<html> <body> <h2>Hello !</h2> <p>This is my NextWork web application working!</p> </body> </html>

Save the changes you've made to index.jsp by selecting Command/Ctrl + S on your keyboard.

How will I know I've saved my work?

Look at the name of the open index.jsp tab at the top of your editor 🔍 The dot next to the name should go away once your changes are saved.

🥳 Nice work - you've just learnt how to set up a web app on an EC2 instance AND connect it with VS Code, one of the most popular and practical IDEs out there.

You'll be building on the foundation you've set up here over the rest of the DevOps series, more exciting learnings are ahead...

Secret mission

Welcome to your 🤫 exclusive 🤫 secret mission!

Your mission, should you choose to accept it, is to edit code without an IDE.

💎 In this secret mission, get ready to:

Edit index.jsp using the terminal instead of an IDE.
Showcase your secret mission in your project documentation.

Edit your web app in the terminal

Delete Your Resources

You MUST delete your resources to avoid charges to your AWS account.

If you're doing Day Two of the 6 Day DevOps Challenge today...

Did you know that Day Two of the 6 Day DevOps Challenge is going to pick up right where you left off here?

You don't have to delete your resources (so you won't have to repeat this project's steps) IF you're also doing Day Two's project today. Just make sure to:

Complete all your tasks and
Download today's documentation before heading to Day Two.

✋ STOP

Before diving into the steps for deleting your resources, why not challenge yourself to delete everything on your own?

Keeping track of your resources, and deleting them at the end, is a key skill that will help you avoid charges to your account.

🛑 STEPS BELOW:

Here are the resources we'll delete:

EC2 instance
Key pair (optional)

💻 Delete your EC2 instance

In your AWS Management Console, head to Amazon EC2 to delete your EC2 instance.
Select Instances from the left hand navigation panel. Select the checkbox next to your instance.
Click on the Instance state dropdown and select Terminate (delete) instance.
Choose Terminate (delete).

🔑 Delete your key pair

Note: If you plan to continue this DevOps Challenge (totally recommend!), you can keep your key pair and use the same credentials for the rest of this series. AWS does not charge for key pairs. Store your key pair in a safe place.

Still in your EC2 console, select Key Pair from the left hand navigation panel.
Select the checkbox next to your key pair.
Select the Actions dropdown, and then Delete.
Type Delete in the text field, and select Delete.

Don't forget to delete your private key pair in your local computer - you can remove the entire DevOps foler!

🤔 VS Code?

VS Code is absolutely free to install and use, so we'd recommend keeping it in your computer! It's a great tool for future projects, and you'll use it again for the rest of this DevOps series.

Nice Work!

That's Day One of this 6 Day DevOps Challenge all DONEEEEEE!

What you've done here lays the foundation for 5 more awesome days of hands-on learning in this DevOps series.

Today you've learnt how to:

💂 Set up an IAM user: You created a new IAM user with admin permissions to provide a safer alternative to using the AWS root account for ongoing projects.
☁️ Set up VS Code: You set up a new IDE environment using VS Code to write, run, and debug code. You also learnt how to connect VS Code to your EC2 instance to use it as an IDE.
⬇️ Install Maven & Java: You installed Apache Maven and Amazon Corretto 8 in your EC2 instance to manage your project's dependencies for building a Java web app.
🏗️ Create the application: Using Maven, you generated a new Java web app from a template, creating a basic project structure and environment for further development.
💎 Edit your code without VS Code: You edited index.jsp again, this time using nano instead of an IDE. It's a completely different experience!

Ready to quiz yourself? You got this! 💪

In the next project, you'll set up a Github repository to store your web app's code. 😎

Github isn't an AWS service, but just like VS Code, it's such a popular tool that's well worth learning about.

The projects up ahead are so exciting, we'll see you in the next one.

👉 Start the next day in this 6 Day DevOps Challenge now!

p.s. Does it say "Still tasks to complete!" at the bottom of the screen?

This means you still have screenshots left to upload, or questions left to answer!

Press Ctrl+F (Windows) or Command+F (Mac) on your keyboard.
Search for the text Return to later.
Jump straight to your incomplete tasks!
🙋‍♀️ Still stuck? Ask the community!