How Cloudwatch Alerts you, if your Website Goes Down! — Part-0

This article is a pre-requisite for the CloudWatch alert system setup project, in this article, we will set up an EC2 instance and host a React JS website so that we can get the access logs when users access our website. Later on in this project, we will send these logs to CloudWatch to further work on that.

EC2 Instance Setup:

First, we should have an Instance running, and hosting a website, the website could be anything. And the website serves via Nginx or Apache server.

After launching the instance, get inside the server using SSH, update the Linux, and install the Nginx package.

sudo apt update
sudo apt install nginx

Now, after this, we will clone the project from a GitHub repo, you can host any other website if you want, but to avoid technical jargon I am using this simple open-source website. Look for the package.json and install the compatible node js and npm package

sudo git clone https://github.com/cruip/open-react-template.git
cd open-react-template/

We need the node version v18.20.3 and npm version 10.7.0

curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt-get install -y nodejs

To install the necessary package with a compatible version to run this website, and after this, we will run the command specified in the script in the above-highlighted picture.

sudo npm install
sudo npm run dev
OR
sudo npm run build
OR
sudo npm run start

After running this our website is up and live(make sure you do not close this, to do the rest of the steps open a new terminal), we can access it at port 3000, just enter this on your browser, <public_ip_address_of_EC2_instance>:3000

Make sure your EC2 instance security group allows requests to 3000 ports over the internet.

After entering <public_ip_address_of_EC2_instance>:3000, the website will be visible on the web browser like this.

Now the next step will be redirecting the HTTP request to port 3000, and for this, we will utilize the nginx configuration file. Right now IP address will redirect to the Nginx page

Now get back inside the server and look for the nginx directory.

cd /etc/nginx/site-available
sudo nano open-website

Now copy the following in the nano editor and save it, replace <ip_address> with your EC2 instance public_ip_address,

server {
    listen 80;

    server_name <ip_address>;  # Replace this with your domain name or public IP address

    location / {
        proxy_pass http://<ip_address>: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;
    }

    # Optional: Redirect HTTP to HTTPS if you have SSL configured
    # if ($scheme != "https") {
    #     return 301 https://$host$request_uri;
    # }
}

After saving it, enter the command to check the syntax of the nginx configuration and reload nginx.

sudo nginx -t
sudo nginx -s reload

After following all the steps, type the public_ip of the EC2 instance again, this time and you will see that the website is visible (make sure your react JS website is running).

Now, this is the outcome we desired, after this we will see the nginx logs, to check the connectivity-related logs, in /var/log/nginx/access.log

cd /var/log/nginx/
cat access.log
# OR
tail -f access.log

As we can see 200 HTTP status code, means the website is up and running, which what we want but often time website behave unexpectedly like this

And we will get this 404 or 502 status code in our logs

Now in the next part, we will send these logs to the CloudWatch log group.

Stay tuned!

Please take a moment to share your valuable feedback, which will assist me in identifying the areas where I need to focus for improvement. Till then…

Happy Learning😊

Feel free to connect-

LinkedIn — Manish