Over the past year or so I find myself learning more and more of frontend development and ops/deployment of web sites. There are so many different ways to deploy a web site nowadays it can be overwhelming.
Many examples assume prior knowledge of DevOps tooling of some sort. Docker and/or containers are examples that I commonly found. Sure, there are services that abstract large portions of this away, but what if I just wanted learn about how a basic website might be deployed? Reading many of these examples, I would need to first read up on Docker and containers before actually getting to learn how to deploy and maintain a website. My website doesn't need to be a globally scaling production monster and doing this without the use of Docker and/or containers is still viable. I found it rewarding to be able to configure the whole infrastructure, not that there's anything wrong with using any of the amazing services that help with this.
In this tutorial I want to focus on taking a very simple web app from a dev machine to a publically accessible domain on a web server. The tutorial will not use Docker or containers directly to serve or ship the website itself, as I want to focus on the basics of setting a web server up. I do understand there are non-performance benefits related to using containers when setting a web server up, but this tutorial is aimed at someone just dipping their feet into setting up a website who also is interested in configuring it themselves instead of using a service such as Zeit Now, Netlify, etc.
Below is what this tutorial will cover. The idea is to break these out into reusable pieces that you can hopefully take with you to other projects that may be more complex.
Part 1
Using a React app that has been created via create-react-app
Feel free to sync the repository or bring your own website! You do not have to use this tool to make your web site. The tutorial will focus on running a tiny Single-Page Application, but the website you use in this tutorial does not need to be a Single-Page Application. If you're comfy using your favorite framework or no framework, by all means go right ahead. Just know the process of getting it running on our web server might be slightly different.
Part 2
Creating a \$5 Digital Ocean Droplet
We'll be configuring our web server on a $5/month Digital Ocean Droplet. These are extremely handy and straightforward to configure and I'll go through the process of doing so. We will be using Ubuntu on our Droplet. Required knowledge of Linux is minimal. If you would like, Digital Ocean offers a referral program. Use this referral link to create your account and Digital Ocean will give you get $50 in credit over 30 days. More details on their referral program can be found on their site.
Also, we will configure Digital Ocean Droplet monitoring to enable alerts when our Droplet's resources are over a threshold for a certain period of time. We want to monitor the Droplet's resource availability itself and Digital Ocean offers tooling to do so with minimal configuration necessary. In this section, we'll setup email alerts based on memory and CPU usage of our Droplet.
Part 3
Configuring a domain to point to Digital Ocean nameservers and deploying our website
In order to serve up a memorable website you'll need a domain name. This is necessary to route users to our Droplet when querying for our website on the interwebs.
We will also configure Nginx on our Droplet. Nginx is an popular, open-source application that has many uses. We will be using it as our web server. This will allow us to route users to our site and serve our content when they hit the Droplet as well as support SSL for our site using a generated certificate.
Finally we will push our built website to the Droplet. We need to actually put the files from our dev machine on our Droplet. Here's where we can first test if our site is externally accessible from our domain!
Part 4
Generating an SSL certificate so our website is served over https
Let's Encrypt and Certbot have made it very easy to so in a reliable way. We will also run our site through Qualys SSL Labs analysis tool to verify our configuration.
Part 5
Install GoAccess and view real-time or historical server logs
I use this to browse Nginx logs on my servers. It's lightweight, free, and console-based. A wonderful tool. It's also not limited to viewing just Nginx logs.
Part 6
Setup Sentry for error logging
Logging errors automatically is very important for debugging and feedback purposes. Sentry is an incredible tool with a useful free tier that we can use. We'll go over adding it to our website and generate some test errors.
Part 7
Conclude with a few potential next steps now that your website is up and running. Server hardening, Nginx config tools, GDPR, Nginx amplify, banning IP addresses.
Whew! There's a lot to deploying a website. It's no wonder there are more and more services dedicated to making it easier for developers. However, I hope you'll find that going from local hobby website to deployed hobby website is not that bad. Additionally, you should be able to take this knowledge with you for other projects that may not be limited to just a basic website.
Will your server be a highly-optimized, globally scaling beast after following this tutorial? No. However, you will be able to go quite far with this setup and get a lot of great insight from the various logging and monitoring services we'll be configuring.
Let's get started!
Top comments (0)