Deploying Headless Strapi to Netlify and Digital Ocean — Part 3: Create and Configure our Droplet

elliottross23

Elliott Ross

Posted on August 9, 2020

Deploying Headless Strapi to Netlify and Digital Ocean — Part 3: Create and Configure our Droplet

Deploying strapi API to a Digital Ocean Droplet

Creating the Droplet

  1. Login to your Digital Ocean account (if you don't have one my shameless plug for $100 is here)
    • In my account I created a new project for this to keep the resources in. It's totally optional but I do recommend it
  2. Click the Create dropdown at the top right of the page and select Droplet
  3. We are going to use the 1-click NodeJS droplet to help us out. It comes with everything we need to run and serve our API. Click on the "Marketplace" tab and type "NodeJS" in the search box. Click on the first search result and it will select the NodeJS 1-click app for us.
  4. Scroll down and choose the Basic plan with the $5/month server (1 GB / 1 CPU, 25 GB / SSD disk, 1000 GB / transfer) I'm using the smaller server because I'm cheap and it's more than sufficient right now.
  5. I'm not adding block storage and I'm selecting the New York 3 region but pick whichever region you want
  6. I'm skipping some other sections and scrolling down to "Authentication" where you should select SSH Keys. I pick one of my current keys to attach to the droplet. This allows us to login from our computer using our SSH key instead of a password and is considered more secure.
  7. Finally choose your hostname (which is your droplet name that shows up in the web console), add tags if you want, and check if you want backups
  8. Now click the magic "Create Droplet" button!

NOTE I recommend following the instructions here for initial server setup that will guide you through creating a user and granting them admin privileges. It is not recommended to use root!

Point our domain to the Droplet

We are going to do this before setting up our droplet to give the DNS records time to propagate

  1. Let's go back to Netlify and login to our account
  2. On the menu across the top click on "Domains" and select your domain for this project. In my case, I'm clicking on frontendcuts.dev
  3. We need to add a DNS record that points our API sudomain to our droplet so under the DNS Settings section click "Add a record" and you will get a popover.
    • Record Type — A
    • Name — api
    • Value — (your droplet IP address)
    • TTL in Seconds — this is optional and just let's DNS know how long to cache your current record value. I like to set some of my longer term ones to 14400
  4. Now let's save the record and give it time to propagate while we get the Strapi API running

Create our NGINX config

We are using NGINX as a reverse proxy to help us out with a few things.

  • Rate limit
  • Enforce HTTPS and serve our SSL/TLS certificates (and with Let's Encrypt renew them automatically)
  • Forward incoming requests to our running strapi app on 127.0.0.1:1337 (we setup the host and port in our server config in Part 2)

Digital Ocean is coming in handy again with a free tool they provide to help you with configuration: https://www.digitalocean.com/community/tools/nginx

Select the NodeJS preset
Alt Text

Fill in your Domain
Alt Text

Setup the Reverse Proxy. Your proxy_pass should use the host and port from the server config.
Alt Text

You can see all the generated config at the bottom of the page in the "Config Files" section which is really cool.

Now you can just follow the instructions in the "Setup" section to get set up on your server.

Ok so now we have our NGINX being a reverse proxy for us with certificates on and we....get a 502 Bad Gateway. This is good though! It's exactly what we should see right now since we haven't setup our Strapi API yet!

Time to setup the Strapi API
Part 4: Running your Strapi app on the droplet

💖 💪 🙅 🚩
elliottross23
Elliott Ross

Posted on August 9, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related