DEV Community: Elliott Ross

Deploying Headless Strapi to Netlify and Digital Ocean — Part 4: Running your Strapi app on the droplet

Elliott Ross — Sun, 09 Aug 2020 03:46:09 +0000

Getting strapi on the server

Since we used the NodeJS 1-click app from Digital Ocean, our server already has Git installed on it.

SSH into your server and cd into the directory where you want your app to live. In my case, I'm going to put my app in /var/www and for the sake of this article I'll be using that as my path everywhere
I'm using Gitlab for source control and prefer to use SSH to clone my repositories so I need to create an SSH key for it (Gitlab provides simple instructions to generate one). If you are using the HTTPS way then all you need to do is run your command and it will prompt for credentials
Now git clone your repo
cd into your project root folder and run npm install
Here's where the NodeJS 1-click comes in handy again because they already installed pm2 for us (pm2 is a process manager)
1. Make sure you are in the root directory of your project. For me it's /var/www/frontendcuts-backend
2. Now simply run pm2 init which will generate a file named ecosystem.config.js
3. Edit that file and paste this in:
```
module.exports = {
  apps: [
    {
      name: 'strapi',
      cwd: '/var/www/frontendcuts-backend', # replace this with path to your app
      script: 'npm',
      args: 'start',
      env: {
        NODE_ENV: 'production',
      },
    },
  ],
};
```
1. We are almost there! We still need to connect the our MongoDB Atlas Cluster to the app. Once you create your cluster (instructions here), make sure to give Network Access to your droplet IP Address and under Database Access you need to create a user that you will use in your connection string.
2. Back on your server create a .env file in the root folder of your project and paste the connection string from Atlas into the DATABASE_URI variable (On your cluster page there's a "Connect" button). Here's an example:
```
DATABASE_URI=mongodb+srv://<your-db-admin-user-name>:<password>@cluster0.xxxxx.azure.mongodb.net/<database-name>?retryWrites=true&w=majority
```
Make sure to add any other environment variables you might need (API keys for other services, etc)

NOTE ABOUT YOUR DATABASE: Because this is an existing project you might have to migrate some of your strapi database collections to your atlas cluster. Strapi provides some CLI commands to help dump and restore config collections.
Finally let's run the app. In the root folder of your project run pm2 start ecosystem.config.js and you should see some output like this:
To verify your app is running and started up correctly you can use the pm2 log command to see the output. If everything looks good, you should be able to visit your API subdomain url and see this:
Visit your admin subdomain and you should be able to create your admin user, login, and access the entire Admin Panel.

WE DID IT!

We now have:

https://frontendcuts.dev is our main website
https://api.frontendcuts.dev is where our headless strapi is accessible
https://admin.frontendcuts.dev is our admin panel UI that connects to strapi backend

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

Elliott Ross — Sun, 09 Aug 2020 03:46:00 +0000

Deploying strapi API to a Digital Ocean Droplet

Creating the Droplet

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
Click the Create dropdown at the top right of the page and select Droplet
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.
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.
I'm not adding block storage and I'm selecting the New York 3 region but pick whichever region you want
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.
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
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

Let's go back to Netlify and login to our account
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
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
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

Fill in your Domain

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

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

Deploying Headless Strapi to Netlify and Digital Ocean — Part 2: The Admin Panel UI

Elliott Ross — Sun, 09 Aug 2020 03:45:50 +0000

We are going to start with what I consider the easiest part. Netlify is a fantastic tool with a great free tier that we are going to deploy our Strapi Admin Panel (and have already deployed our Nuxt website). They offer static hosting and because Strapi's Admin Panel is a React app we can simply build it and deploy separately.

Why set up the admin UI before the API? The main reason is that it's easier to hit the ground running once you launch the API server and the API won't be vulnerable to someone hijacking and setting up the admin user before we can!

Remember: We are assuming you already have a domain and it is using Netlify DNS. For instructions on that go here.

Before we deploy, we just need to tweak a few settings in our Strapi project. In production we need to tell the API to not build or serve the admin panel since it will run on Netlify. Let's update the production server config:

config/env/production/server.js

module.exports = ({ env }) => ({
    host: env("HOST", "127.0.0.1"),
    port: env.int("PORT", 1337), 
    url: "https://api.frontendcuts.dev", 
    admin: {
        url: "https://admin.frontendcuts.dev", 
        serveAdminPanel: false,
    },
});

Note this file lives under the /production/ folder in env. This lets strapi know to only use it when NODE_ENV is set to 'production.'

Let's go through each setting:

host — when we deploy the API to our Digital Ocean droplet we are telling the API to use 127.0.0.1 (local loopback) as our host
port — goes with the host and adds the port
url — tells the admin UI what the base url is for the API
admin.url — url path for admin UI resources. This is important when running the UI on netlify! Since our admin UI builds into a folder build/ and all the resources live at the root folder level we need to set this so it can load the javascript, css, html, and other resources properly. It's also used in password reset.
admin.serveAdminPanel — tells the API not to serve the admin UI resources

Ok, we are ready to deploy! Here comes the screenshots...

Deploy the Admin UI to Netlify

Once logged in, click the button "New Site from Git"

Setup your build settings like this:

Let it go and watch it build. Now we need to add a DNS record. Since you are using Netlify DNS for the primary domain we can head over to the domains page and add a domain alias:

This change might take a few hours so be patient while DNS propagates!

Now try to visit your admin site and you should see a blank white page with a loading spinner. If you open the admin console you will see that our UI resources loaded but it failed to call the API (since we don't have a server up yet!). Also note the request url it tried to call for init. The base url should match the url property we put in our config/env/production/server.js file above.

If your resources load and your init base url looks correct then congrats! we just deployed the admin UI to netlify!

Now let's create our droplet and hook this thing up

Part 3: Create and Configure Our Droplet

Deploying Headless Strapi to Netlify and Digital Ocean — Part 1: Intro

Elliott Ross — Sun, 09 Aug 2020 03:45:20 +0000

This is really my first tech article and it's a 4-parter. If you have any corrections, comments, or pro tips let me know!

Quick note: If you want the quick and easy solution Digital Ocean offers a 1-click install button for Strapi on a $10/month server. It's great if you don't have an existing Strapi project (Shameless plug: Here's my referral link for $100 in credit)

So why did I do the deployment myself?

Be cheap and save $5 a month by running it headless
I love figuring these things out
I thought it would be easier to configure the admin UI to be on a subdomain

This guide assumes:

You already own a domain and it's using Netlify DNS
You have a Digital Ocean account
You have an existing strapi project in a git repository
We will be using MongoDB as our backend through MongoDB Atlas (they have a generous free tier!)

Versions
Strapi -- 3.0.1
Node -- 12.18.0
NPM -- 6.14.5

I've been wanting to build this side project for a while and this is a perfect opportunity to build it and share how I first deployed and set it up. My side project is Front End Cuts, a place to create, contribute, manage, and search for code samples for front end development. While writing this article the only thing you can do is signup/signin and create/view a cut. More will be added later so please don't comment on the ugly look 😂

This article is not for extreme beginners as I'm assuming you have some knowledge of strapi, linux/unix commands, and mongodb. Throughout the different parts I will link to guides for things that do not directly contribute to deploying Strapi.

Here's what we want:
frontendcuts.dev --> Frontend Nuxt site
admin.frontendcuts.dev --> Strapi Admin Panel (React app)
api.frontendcuts.dev --> Strapi server and API

Let's dive in!

Go to Part 2: The Admin Panel UI