september 30, 2023

{ adding a blog to a react site with headless cms, part 2: deployment }


tags: headless cms, strapi, react, servers and deployment

With my Strapi blog working the way I wanted in development, it was time to deploy it. I chose to use a (DigitalOcean "Droplet")[https://www.digitalocean.com/products/droplets], which is one of DigitalOcean's VM solutions. My main goals were low cost and a not an extremely time consuming set up, and this combo worked well.

It was so easy that the entire process took a week.

Deploy Strapi to a Digital Ocean Droplet

First I had to decide where to host my headless CMS. Given that it could cost me $10 a month, I figured it required at least 18 hours of research, reading comparisons, checking out reviews, and testing free trials.

Strapi does let you host it with them, but that seemed less cost effective. The free tier of Strapi is full featured as long as you can host it yourself. Besides, why would I pass up the chance to set up a server?

I ended up with DigitalOcean. I have no complaints yet.

That was day 1 and 2.

Days 3, 4, 5, and 6 were Deployment Attempt 1, Deployment Attempt 2, and Deployment Attempt 3.

First, let me say that the documentation for Strapi about deployment and DigitalOcean are really good. You have to bounce back and forth between the two, but it's very step by step with mostly just copying and pasting. There are resources if you want to learn more about different pieces, but it definitely isn't a requirement to know everything to deploy.

There are two reasons it took me so many tries:

  1. I ignored the documentation. Apparently, if the documentation says this app requires 2 GB to run, you should not try to save money by only buying 1 GB of space.
  2. I followed the documentation too closely. After Mistake 1, I went line by line and did everything the documentation said and nothing it didn't. So because the documentation did not remind me to go into my DNS and add an A record to point the subdomain to my new server, I did not do that. So, amateur tip (let's be real, there are no pros here), if your browser cannot connect to the server, make sure you've added A records for both www.example.com and example.com wherever that is managed.

I finally got the server set up, merged in the new branch on the front end, and adjusted the environmental variables...all to run up against an error because I hadn't added SSL to the blog. My site has SSL so the API to my blog was blocked.

No worries. Back to the documentation to add an SSL cert, which was very straightforward. What was less straightforward is that you need to go into server.js to change http to https . Strapi gives you an error in the front end that there is a problem with the API when you try to log into the admin dashboard. In the console, I saw that there was a problem loading a resource from http://example.com/admin/init which put me on the right path.

And for the last, absolutely ridiculous sticking point of the night: the API was not returning any results. On my live site and in Insomnia, it was returning an empty data set although I had written a post already. After much harrowing debugging, I realized I had not yet clicked "Publish" on my post.

With that, it must clearly be time for bed. Good night!