DEV Community

Kalsoom ahmed
Kalsoom ahmed

Posted on

Set Up a Web App in the Cloud

#webdev #beginners #aws #ec2

KEY CONCEPTS

  • Amazon EC2
  • VSCode

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

Image description

Login with your IAM user

  • Login to AWS
  • For this project you'll need your IAM user, not your root user

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, you're going to:

  • Launch a new EC2 instance.
  • Set up a key pair for secure access.

  • Set up network settings for your instance.

  • Set up an EC2 instance called nextwork-devops-yourname with a key pair called nextwork-keypair

  • Store the downloaded private key into a new folder on your Desktop. Name that folder DevOps. We'll come back to it late

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, you're going to:

  • Download and install VS Code.
  • Set up a terminal within VS Code.
  • Change the permissions of your .pem file.

Install VS Code through the Visual Studio Code website

  • Navigate your terminal to the DevOps folder.
  • Change the permissions of your .pem file to make it readable only by you (the owner) and restrict access for everyone else.

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, you're going to:

  1. Connect to your EC2 instance.
  • Use the following command to connect to your EC2 instance: ssh -i [PATH TO YOUR .PEM FILE] ec2-user@[YOUR PUBLIC IPV4 DNS]

Image description

Install Apache Maven into your EC2 instance:

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

Install Java (Amazon Correto 8) into your EC2 instance:

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

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, you're going to:

  • Run Maven commands in your terminal to generate a Java web app
  • Use mvn to generate a Java web app mvn archetype:generate \ -DgroupId=com.nextwork.app \ -DartifactId=nextwork-web-project \ -DarchetypeArtifactId=maven-archetype-webapp \ -DinteractiveMode=false

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, you're going to:

  • Install the Remote - SSH 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.

  • Set up a Remote SSH connection between VS Code and your EC2 instance.

  • Using VS Code as an IDE for your web app's files, modify index.jsp by changing the placeholder code:

Hello {YOUR NAME}!

This is my NextWork web application working!

  • 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.

  • Also you can Edit your web app in the terminal.

Delete Your Resources

You MUST delete the resources you've created today to avoid charges to your AWS account.

  • Delete your EC2 instance and key pair.

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!

Top comments (0)