Simple Web App
In this part we're going to end up deploying a simple bun TypeScript server, with a database, to an EC2 instance.
There will be a:
- Web app written in TypeScript
- Database (MySQL)
- Reverse proxy (Caddy)
Web App
The fact that it's a TypeScript app that runs in a bun runtime is not important. The steps are pretty much the same for any server-side application. You'll just need to modify how you compile or run the server-side code depending on which language you're using.
For example:
- A compiled language like Go, Rust, or C++ would need to be compiled before uploading to the server then run directly from the server.
- A managed language like C# or Java would need to be compiled and the .NET or Java runtime would need to be installed on the server.
- And languages like Python, Ruby, or JavaScript would need to be run through a runtime or interpreter.
But in this case, we'll be installing and using bun to run the TypeScript code.
Database
We'll be using MySQL for the database, so all the steps will be for MySQL. But the steps could easily be adjusted for any other database, as long as you have the right driver and connection string.
Reverse Proxy
We'll be using Caddy as the reverse proxy. This is a modern, fast, and secure web server that is very easy to configure. However, you could use any other reverse proxy like nginx or apache.
Steps
- First we'll setup a basic Caddy server to get a sense of how to setup a simple HTTP server on an EC2 instance.
- Then we'll setup a different EC2 instance running just a MySQL database.
- Finally we'll setup another instance running the web app, a database, and a reverse proxy.
In total, we will setup and tear down 3 EC2 instances in this section. It might seem repetative, but it's good practice for understanding how all the individual parts work. Also, being able to quickly setup an EC2 instance to test something out is a very useful skill.
Show timestamps
00:00
In this section, we're going to deploy a complete full-stack web application to a single EC2
00:05
instance, so we can see how the process of deploying something to EC2 might work.
00:11
Here's what we're going to be deploying. It's a QR code app where we can enter some text,
00:17
let's say, my website, and it will generate a QR code. We can also upload an image to
00:23
this, and it will process that image on the EC2 instance and display it to us here.
00:29
At the same time, if I save this QR code, it's going
00:32
to save that file onto the EC2 instance's file system.
00:36
It's going to store all the information in a MySQL database, so we can then scan the QR code and get redirected to a site later on.
00:43
And in front of all of this, we have a reverse proxy that's handling
00:47
the TLS connection so we can have HTTPS requests with DNS.
00:51
So there's a few different moving parts here. This is kind of the most
00:54
basic version of a full-stack application on the server.
00:58
Essentially, it's going to work like this: we're going to set up an EC2 instance.
01:03
In the first section, we'll learn how to set up the HTTP server on it.
01:08
For that, we're going to use Caddy, which is an HTTP server, but we're going to use
01:13
it as a reverse proxy in the later part of this.
01:17
Caddy's responsibility is to accept HTTP or HTTPS requests from the public
01:24
internet and handle those on the EC2 instance.
01:27
Having a reverse proxy or an HTTP server on the instance allows us to offload things like
01:32
TLS certificates and HTTP caching, and just have this piece of
01:36
software at the front of our instance handling all incoming requests.
01:41
Later on, we could also set this up to be a load balancer if we wanted to distribute
01:44
load to multiple different instances of our web application.
01:48
We're also going to need a database
01:51
for our application, and we'll set up a MySQL database.
01:55
This could really be any database. It could also be any reverse proxy or HTTP server.
01:59
But for this example, it'll be Caddy as the reverse proxy and a MySQL database running on the EC2 instance.
02:05
Again, these concepts will apply no matter which database you want to use.
02:09
This is about deploying some software to an EC2 instance.
02:13
So we'll have the MySQL database. The application also needs to store files, and for that,
02:18
we're just going to use the EC2 instance's EBS file storage.
02:23
Later on, we could use something like S3 or store files somewhere else, but this will all
02:26
just be contained within a single EC2 instance.
02:29
And then, of course, we'll have the web application.
02:32
For this, I've written a Bun TypeScript server, and it has a React frontend.
02:38
It's just a very basic web application. So
02:41
requests will come in through the reverse proxy and get sent to the web app.
02:44
Then the web app will be able to store files in the file system
02:48
and store any data in the database running on the EC2 instance.
02:52
Again, the web app being a TypeScript Bun app is just a minor detail.
02:56
This could be a Python, Ruby, Go, or C++ app.
03:00
It really doesn't matter. Some of the details might change—like I'm going to install Bun on the EC2 instance.
03:05
If it was a Python app, obviously you'd install Python. If it was a C++ app,
03:09
you would need to install any of the dynamic libraries and then just run the binary.
03:13
But the ideas are all the same. We'll run the application using systemd.
03:17
It's going to run in the background. We'll be able to monitor the logs. We're going
03:19
to handle HTTP requests to the app, and it's going to communicate with the database and the file system.
03:24
Later on in the course, we'll learn how to distribute web apps onto multiple instances,
03:29
use database services and file storage services, and even load balancing services later on.
03:34
But this kind of setup is really good and simple, especially in the beginning when you have a small web app.
03:39
We'll have one video that focuses on setting up Caddy, a separate video that focuses
03:44
just on setting up a MySQL database on an EC2 instance, and then in the third video, we'll bring it all together.
03:50
We'll set up Caddy, MySQL, and the web app all on a single instance and see all of these pieces working together.