DEV Community

loading...
Cover image for Production deployment Strapi + Gatsby app on VPS Shared Hosting: preparing & Authenticated Requests. (1)

Production deployment Strapi + Gatsby app on VPS Shared Hosting: preparing & Authenticated Requests. (1)

Daniel Krupnyy
- Self-taught web developer - Live in 🇺🇦 - Trying to be more productive than I am 😕 -
Updated on ・3 min read

Hi there!

Recently ran into a situation where I needed to install Gatsby + Strapi app on VPS hosting. Previously, I deployed everything to Heroku and Strapi.

So it became a challenge for me. Because I imagined how to install a Node.js app on a VPS server but had no idea how to set up vesta cp to work with Node.js

And after a while I managed to solve this problem.

Now I want to share my experience with you.

So at this cycle of tutorials i'll show you all process of adjusting and deploying Strapi based Gatsby application to real hosting server.

Here we go!


Preparing Gatsby and Strapi

For this tutorial we will using ready starter: Strapi Starter Gatsby Blog.
It has all necessary what we need. So simply complete all steps inside Starter's description and all will be ready to start.

Configuring Authenticated Requests in Strapi

Since we will install our builds to a real hosting. We need to secure pass to Strapi collections and types.
For that we will using Authenticated Requests.

First in Strapi Admin Panel go to Settings, then select the Roles under USERS & PERMISSIONS PLUGIN section.
After click on Add new role button in the top right corner.

Fill Role details fields and select fields: find, findOne, count in Permissions for an all APPLICATION types.
Save new role.

Now go to left main menu, click on the Users Collection type. Fill all parameters and won't forget select Role — Reader for new user.
Save user.

That's it! Now you can fetch Authenticated Requests!

Let's create a test request in Postman to test how Authenticated Requests works.

To do this, create a POST request at:
http://localhost:1337/auth/local

Then set the body as raw with the JSON (application/json) type and write:

{
  "identifier": "youruser@main.com",
  "password": "youruserpassword"
}
Enter fullscreen mode Exit fullscreen mode

Send your request.

In response you'll get jwt key:

{
    "jwt": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwiaWF0IjoxNTc2OTM4MTUwLCJleHAiOjE1Nzk1MzAxNTB9.UgsjjXkAZ-anD257BF7y1hbjuY3ogNceKfTAQtzDEsU",
    "user": {
        "id": 1,
        "username": "yourusername",
        ...
    }
}
Enter fullscreen mode Exit fullscreen mode

If you want to find out about jwt you can read info at: jwt.io.

jwt key is updated and has Expiration time. Default Expiration time is month. You can check it at jwt.io. There past your jwt key to Encoded fill.

You'll see: jwt.io image
In PAYLOAD:DATA you will get:

{
  "id": 1,
  "iat": 1611908790,
  "exp": 1611995190
}
Enter fullscreen mode Exit fullscreen mode

If you move you mouse on key "exp" you will se Expiration time is month.

You can change this time for more protection.

For that in Strapi directory go to extensions/user-permissions/config/ and create there file security.json.
Put inside:

{
  "jwt": {
    "expiresIn": "1d"
  }
}
Enter fullscreen mode Exit fullscreen mode

it will look like this:
strapi directory image

Relaunch Strapi and Gatsby. Now Expiration time is one day.

That's it!

In the next part we will install Node.js on a VPS hosting and Create configs for Vestacp and Nginx.

If you want to add something, write in the comments.

Discussion (2)

Collapse
sakis_kalogirou profile image
Sakis Kalogirou

Thanks for the post, can't wait for the next part:)!

Collapse
danielkrupnyy profile image
Daniel Krupnyy Author

I'm Glad you like it 😀 I'll start writing the second part very soon!