Two different ports for front end and back end? (using Strapi) - configuration for nginx

Question

I guess it's a very basic question, but it still confuses me. At development stage, when launching react with 'npm start' I'm using port 3000. In addition when launching strapi (which is a backend cms), it automatically uses port 1337.

Does it actually mean that my app is using two different ports?

I'm asking this because I would like to configure nginx so that I can run two different strapi apps (attached to two different react apps) - on the same server.

I want nginx to redirect from a specific location to the second website. I could write inside the sites-available file:

server {
    listen 80;
    location / {
      proxy_pass "http://mysite:3000";
    }

    location /mysecondsite {
      rewrite ^/mysecondsite(.*) $1 break;
      proxy pass "http://mysite:??????? WHAT SHOULD I WRITE HERE?"
    }
}

But where should I redirect users entering the secondsite url, to what port?

In strapi documentation, they point to a file called server.json where you can change the port that strapi uses, and also create a proxy (which I don't understand why you would want to do if you can just redirect from nginx?), for example:

{
  "host": "localhost",
  "port": 1337,
  "proxy": {
    "enabled": true,
    "ssl": true,
    "host": "example.com",
    "port": 8443
  },
  "autoReload": {
    "enabled": true
  },
  "cron": {
    "enabled": true
  }
}

But changing the port of the second project will affect only the strapi backend, won't it? How can I create a different port for the front end of the second project?

I'm sorry if I misunderstand the terms here Thanks in advance

Daniel Karski · Answer 1 · 2019-06-27T16:02:17.363

Update 2019-06-29: (one application - frontend & strapi)

I come back because I discover that somebody resolve your case and deploy one application with strapi.

How to integrate Strapi API and Admin Panel with another node app (that consumes Strapi API)?

So you will have to build you website app. And push the build in the ./public folder of the Strapi application.

Then in your api/.../config/routes.json files you will have to add an option prefix in the config key of each of your routes and for all your APIs
{
   "routes": [
     {
       "method": "POST",
       "path": "/restaurants",
       "handler": "Restaurant.create",
       "config": {
         "policies": [],
         "prefix": "/api"
       }
     }
   ]
 }
So at the end you will have your admin on /admin

Your APIs endpoints prefixed by /api

And your website/assets on /

And you don't must configure nginx for your second application becaouse is only one.

2019-06-11: (two separate application)

You want to has main react application on port 3000 and cms for backend api on 1337 where be used by main react application? You can use configuration like in bellow.

nginx.conf

server {
  listen 80;
  server_name mywebsite.pl www.mywebsite.pl;

  location / {
    proxy_pass http://mysite:3000/;
  }

  location /admin/
  {
    proxy_pass http://mysite:1337/admin/;
  }

  location /strapi/
  {
    proxy_pass http://mysite:1337/;
  }
}

server.json

{
  "host": "localhost",
  "port": 1337,
  "proxy": {
     "enabled": false
  },
  "autoReload": {
    "enabled": true
  },
  "cron": {
    "enabled": false
  },
  "admin": {
    "path": "/admin",
    "build": {
      "host": "/admin",
      "backend": "http://mywebsite/strapi",
      "plugins": {
        "source": "backend",
        "folder": "/strapi"
      }
    }
  }
}

Remember:

⚠️ If you changed the path to access to the administration, the step #2 is required -> You must resetup admin to install the dependencies and build the project
Change on the production environment NODE_ENV flag to production. Run the server with the production settings.

Resource:

Thanks a lot, but I want the url mysite/mysecondsite to redirect to the second project, so how can I define it? because by default every project I deploy, the port of the front end will be 3000? — sir-haver, Jun 11 '19 at 11:47
@sir-haver what is your second project? React website application or strapi-cms application? Every application could be hosted by one port so you need two difrent ports for frontend application and strapi-cms application. — Daniel Karski, Jun 11 '19 at 12:06
Thank you Daniel. My second project is both react and strapi. So it means that I need to setup .env file for my react to use a different port, and also define server.json for strapi to use a different port and then set it all up similarly to what you did in my nginx file? So in total I'm using 4 different ports right? For my react and strapi, for each project — sir-haver, Jun 11 '19 at 12:09
Yes. You need 4 different ports when strapi-cms application is seperate instance per every react application. You must configure your react application to use the correct strapi-cms api — Daniel Karski, Jun 11 '19 at 13:50
Hi, I come back because I discover that somebody resolve your case and deploy one application with strapi. You can see here: https://stackoverflow.com/questions/56661677/how-to-integrate-strapi-api-and-admin-panel-with-another-node-app-that-consumes — Daniel Karski, Jun 26 '19 at 15:24

Two different ports for front end and back end? (using Strapi) - configuration for nginx

1 Answers1

How to integrate Strapi API and Admin Panel with another node app (that consumes Strapi API)?

Remember:

Resource: