How to Deploy Strapi v4 on the DigitalOcean App Platform with MySQL Databaseby@bylde
2,636 reads

How to Deploy Strapi v4 on the DigitalOcean App Platform with MySQL Database

November 8th 2021
4 min
by @bylde 2,636 reads
tldt arrow
Read on Terminal Reader

Too Long; Didn't Read

This is a step-by-step guide for deploying a Strapi v4 project to DigitalOcean's App Platform with managed mySql Database. If you don't have a DigitalOcean account you will need to create one, you can use this referral link to get $100 of free credits. The only things you need to change are what you should use in the most things most things you should change are named named named environment variables. You cannot deploy on DigitalOcean unless you have your code on GitHub. Please do not build or run strapi server - this is important.

Company Mentioned

Mention Thumbnail
featured image - How to Deploy Strapi v4 on the DigitalOcean App Platform with MySQL Database
Ash Bylde HackerNoon profile picture

@bylde

Ash Bylde

react to story with heart

This is a step-by-step guide for deploying a Strapi v4 project to DigitalOcean's App Platform with managed mySql Database

First, log in to your DigitalOcean account.

If you don't have a DigitalOcean account you will need to create one, you can use this referral link (opens new window)to get $100 of free credits

Step 1 Create a Database on Digital Ocean

Databases can be created using DigitalOcean's Managed Databases.

image

Then select your database as mySql and choose the data center

image

Once done, click on create a database cluster

image

Once your cluster is created, go to Getting Started section and click next.

In Secure this database cluster section, add your IP showcased on Digital Ocean but do not believe it. Because Digital Ocean sucks in figuring out IP addresses. Not sure why.

So go on Google search for my ip and then select your IP copy it.

image

Then paste it in the approved section:

image

Once done, copy your database connection details and save it securely in a file.

image

Then go to user and database section and create another user. I will explain later why we did that.

image

Step 2 Install Strapi v4 on your local machine

This is a very simple step.

Open your terminal.

cd into folder where you want to install strapi v4.

image

Then run this command:

npx [email protected] name-of-your-folder

Notice we are not using --quickstart flag here, that's because we want to use managed MySQL database.

After that, terminal will walk you through some steps where you have to provide the Database connection details.

image

Once done, press enter, and it will start installing strapi v4 on your local machine.

You will see something like this once the installation is done. Please do not build or run strapi server - THIS IS IMPORTANT

image

Now cd into your strapi installation folder

cd beta/

and open it in your IDE mine is VS code so I will just do it with typing

code .

image

Step 3 Configure Your Strapi Project to connect with managed database

To deploy your Strapi v4 app, you will need to create a database configuration file.

We will be using MySQL for this example, but you can connect to any of the databases provided by DigitalOcean and supported by Strapi.

With the setup below, you will only need to set an environment variable for the DATABASE_URL to connect to your MySQL database.

First, install the pg-connection-string (opens new window)package (with npm install pg-connection-string or yarn add pg-connection-string) then add the following to config/env/production/database.js:

Create a file:

config/env/production/database.js

Add the following into your file:

module.exports = ({ env }) => ({
  defaultConnection: 'default',
  connections: {
    default: {
      connector: 'bookshelf',
      settings: {
        client: 'mysql',
        host: env('DATABASE_HOST', 'localhost'),
        port: env.int('DATABASE_PORT', 3306),
        database: env('DATABASE_NAME', 'strapi'),
        username: env('DATABASE_USERNAME', 'strapi'),
        password: env('DATABASE_PASSWORD', 'strapi'),
      },
      options: {},
    },
  },
});

Your application is now ready to deploy to the DigitalOcean App Platform.

Step 4 Push your local code on GitHub

Now you have to push your local code to GitHub. I know its very frustrating, but this is important. You cannot deploy on DigitalOcean unless you have your code on GitHub.

If you don't know how to do that, you can follow my article here> I have written this amazing article about how to push your local code on GitHub.

git init
git add .
git commit -m "initial commit"
git remote add origin https://github.com/harshalone/strapi-v4.git
git push -u origin master

Step 5 Create your App on Digital Ocean

First click on the Manage Dropdown

Then Click on App -> Create

image

Then Select GitHub

If you are logging in for the first time into your digital ocean account, and you have not authorised your GitHub access. Then you have to click on GitHub link and approve your GitHub account access.

Otherwise

image

Just select your repository and branch and click on next button.

image

Step 6# Add Environment Variables and other Configurations

Here, you will configure how DigitalOcean App Platform deploys your Strapi app. You can leave most things default. The only things you need to change are shown below:

Whatever you named your database, here is what you should use in the environment variables.

Environment Variables
: Add 
DATABASE_URL: ${defaultdb.DATABASE_URL}
Build Command
: NODE_ENV=production npm run build

Run Command
: NODE_ENV=production npm start

image

image


Step 7 Select a Database

Click on the Add a Database button. We will be selecting the database we have created before.

For instance, we name the database defaultdb, and we use the environment variable value: ${defaultdb.DATABASE_URL}

Click "Next".

image

Step 8 Name your web service

You can choose whatever name you would like in your subdomain.

image

Step 9 Choose your plan and launch the app

image

Then, it will take a while to start deploying and get your app running on digital ocean.

image


Article Sources:

  • https://strapi.io/documentation/developer-docs/latest/setup-deployment-guides/deployment/hosting-guides/digitalocean-app-platform.html


RELATED STORIES

L O A D I N G
. . . comments & more!
Hackernoon hq - po box 2206, edwards, colorado 81632, usa