와플 스튜디오 루키 과정 복습하기 5 - Distribution with AWS EC2 (No Versel)

In this time, I'm going to distribute my project using AWS intead of Vercel.

 

Vercel is a very convenient tool for deployment, especially for Next.js projects. Howeve, I've decided to handle the deployment process on my own.

 

First, let's create virtual server using AWS EC2 instance.

 

This is a page after clicking start instance button.

 

What is the Amazon Machine Image(AMI)?

 

A server is a computer or system that provides something(data, service e.t.c) to client or other computers, which may also function as server.

 

The term 'Start Instance' refers to renting a virtual computer that operates as a server. Like any computer, it requires an operating system, software, and configurations. An AMI is a preconfigured bundle that includes all these components.

 

I created an instance by following the guide in this blog: https://sollogging.tistory.com/91

 

However, while the blog uses npm, I use bun so that I have to install bun instead of npm.

 

Here are my instance settings.

 

 

Ubuntu server and t2.micro.

 

Generate an SSH key pair for access.

 

 

Allow SSH, HTTPS, and HTTP traffic.

 

Change the permissions of the key file.

chmod 400 "next_app_key.pem"

 

 

Connect to the instance.

ssh -i "next_app_key.pem" ubuntu@퍼블릭 IPv4 DNS

 

 

update the Initial setup on the instance.

sudo apt-get update
sudo apt-get upgrade

 

 

Install packages:

 

nvm

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
source ~/.bashrc
nvm install --lts

 

bun (unzip is required to install bun)

sudo apt-get install unzip
curl -fsSL https://bun.sh/install | bash

 

nginx

sudo apt-get install nginx

 

Let's verify that nginx has been installed successfully.

 

Navigate to the nginx root directory and start nginx service.

cd etc/nginx/
sudo service nginx start

 

When you connect to the EC2 public IP address, the page should display as shown in the image below.

 

So, what is nginx?

 

nginx is a type of web server, positioned between the client and the Web Application Server(WAS).

 

A web server improves efficiency, enhances security, and reduces the memory load on the WAS. In particular, nginx offers several advantages, including functioning as a reverse proxy, delivering high performance, supporting SSL(Secure Socket Layer), and utilizing an asynchronous event-driven architecture.

 

There is a YouTube video that explains the history and functionality of nginx:

https://www.youtube.com/watch?v=6FAwAXXj5N0 

 

Let's setup nginx setting.

cd/etc/nginx/sites-available/
sudo touch testsite.conf
sudo vim testsite.conf

If you don't know vim editor, then use nano. :D

 

/// testsite.conf

server {
    listen 80;
    server_name 퍼블릭 IPv4 주소;

    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

 

This means that the client can access port 80 (the default HTTP port) using 'http://<IPv4 address>'.

When the client connects to http://<IPv4 address>', nginx forwards the request to 'http://localhost:3000'.

 

Test:

/etc/nginx$ sudo nginx -t
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

 

Cool! And restart nginx.

sudo systemctl restart nginx

 

Return to the root dirctory of my project and install pm2 to manage node.js processes. pm2 helps in deploying, monitoring, and maintaining applications.

bun install pm2 -g
pm2 start bun --name "next-app" -- start

 

Everything is set up. I can now access my project via the public IPv4 address.

 

But If I access the main page, the data aren't brought to browser.

Since the main page fetches data from supabase, it requires an access key specified in the .env file.

However, the .env file is excluded from Git for security resons. Therefore, I need to transfer the .env file to the instance server.

 

I'm going to use SCP(Secure Copy Protocol) to transfer the .env file from my local environment to the instance.

scp -i [path_to_the_key.pem] [local_file_path] ubuntu@<Public IPv4 address>:/home/ubuntu/<project_name>

 

After transfering the file to the instance, I restart application.

pm2 restart <my_app>

 

 

Done!