DEV Community

loading...

Portfolio project with Digital Ocean Droplet

Hulya
Front End Developer
Updated on ・4 min read

What I built

I have built two portfolio projects, first one was with Strapi and Gatsby, but I couldn't deploy the Strapi app, I have checked the tutorials and followed the steps, but it still seems like not working. I really wanted to submit my project, and yesterday I have thought I have already missed the deadline; but hopefully, I saw that submissions can be sent until the end of today.

So, I decided to deploy another portfolio project made with HTML, CSS, and Javascript. I have thought it shouldn't be so hard, but again built failed. I have searched around, I even started to do a Django portfolio project, because I have found resources about how to deploy to the Digital Ocean. Anyway, then I remembered Kevin Powell has made a portfolio project and deployed it to Digital Ocean via FTP.

I have watched the tutorial about deployment and eventually I have finished deploying my portfolio site.

Category Submission:

Personal Site/Portfolio

App Link

http://142.93.92.173/

Screenshots

IMG

contact

droplet

load

health

graph

alert

firewall

Description

This is a static portfolio site built with HTML, CSS, and Javascript. It has cool animations and form submissions are through formspree.

Link to Source Code

https://github.com/hulyak/hulya

Permissive License

MIT

Background

(What made you decide to build this particular app? What inspired you?)

I have always wanted to work with Cloud platforms to improve my understanding and learn DevOps methodologies. I think the project doesn't matter, I have learned a lot about the Digital Ocean platform and how easy it is to connect our applications.

I have chosen this project because it's helped me create a portfolio page and learn about the Digital Ocean.

How I built it

(How did you utilize DigitalOcean’s App Platform? Did you learn something new along the way? Pick up a new skill?)

I have been following Digital Ocean's weekly talks and webinars lately, and recently have taken a workshop about how to deploy and secure apps with Digital Ocean.

DigitalOcean provides Cloud Computing services and allows us to host applications in Droplets. We can add features such as Firewalls, Load Balancers, and Alert Policies to our Droplets.

I have learned how to add a new user to the droplet and how to use a load balancer to easily access the server because of an overload of server requests, too many people trying to connect at once, or the server can go down or fail.

Load balancing distributes network traffic across multiple Droplets. If one server fails or is overloaded, the user can still make a successful connection.

Load balancers give us three things:
● Availability: Load balancers check to see which Droplets are healthy before sending requests to them.
● Flexibility: You can make changes to applications running on our servers without worrying that a user won’t be able to access the server while you do it.
● Performance: You can share the traffic workload across multiple Droplets - so one Droplet doesn’t get overwhelmed.

How it works?

Instead of directly accessing the Droplet, you go to the Load Balancer’s network address.
The Load Balancer then selects the best Droplet to fulfill the request.

Load Balancer Health Checks

The Load Balancer will select a healthy droplet.

To measure healthiness, the Load Balancer will ping* our Droplet periodically to check for a successful response.
If it gets a successful response, it will record that the Droplet is currently in a healthy status.

I have implemented load balancing to my website and connected it to my droplet. We need at least one Healthy Droplet to be able to access our Load Balancer.

DevOps Monitoring

A vital part of DevOps is monitoring the servers that host our software.
We can track things such as:
● Server memory usage
● Incoming/Outgoing network
traffic
● HTTP Requests

I have checked the graphs for the load balancer.

Alert Policies

An important aspect of monitoring is being alerted to potential issues before they become big problems.
With DigitalOcean we can create Alert Policies.

With an Alert Policy, we define a threshold for a metric such as CPU or Memory usage.
When the threshold is breached, it sends us an alert via email.

I have installed Metrics Agent to monitor the droplet with this command.

curl -sSL https://repos.insights.digitalocean.com/install.sh | sudo bash

I have created alert policies if the Droplet is using more than 70% of its CPU, I'll receive a notification via email.

Adding a Firewall

Our application is online and could be subject to remote attack over a network.

How can we combat this?

One way is through creating a Firewall.

Firewalls control what traffic is allowed to access a server. If the traffic isn’t allowed, it’s dropped by the Firewall. We can write rules for Firewalls that can block or allow access to specific ports.

I have created Cloud Firewalls and configured them with SSH and Custom rules.

Additional Resources/Info

  • Ping: A utility that sends a request to a network device and waits for a response. It measures the time taken and if any data was lost.
  • Firewall: A security service that monitors incoming and outgoing network traffic and uses rules to block unwanted traffic.

  • How to Install the DigitalOcean Metrics Agent

  • Kevin Powell video

Thanks for your time. Like this post? Consider buying me a coffee to support me writing more.

Discussion (0)