How to configure nginx config for strapi and nuxt?

Question

I need to configure the nginx configuration so that the site nuxt is accessible at the usual address, the admin panel strapi at the address /api. The site itself works and receives data, but does not receive images from the uploads folder from strapi.

Also, I can't get into the strapi admin panel, since the strapi main page is welcome, then there is a redirect to the /admin page, which I don't have. I've tried a lot of configuration variations, but I'm not getting it.

What do I need to do?

/etc/nginx/conf.d/upstream.conf

upstream strapi {
    server localhost:1337;
}

upstream nuxt {
    server localhost:3000;
}

nuxt.config.ts

 vite: {
        server: {
            hmr: {
                protocol: "wss",
                clientPort: 443,
                path: "hmr/",
            },
        },
    },

confing

server {
    listen 80;
    listen 0.0.0.01:80;
    server_name example.com www.example.com;

        return 301 https://example.com$request_uri;
}
server {
    listen 443 ssl http2;
    listen 0.0.0.01:443 ssl http2;

    server_name www.example.com;
    return 301 https://example.com$request_uri;

    ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;
    ssl_trusted_certificate /etc/letsencrypt/live/example.com/chain.pem;

    include snippets/ssl-params.conf;
}



server {
    listen 443 ssl http2;
    listen 0.0.0.01:443 ssl http2;

    server_name example.com;
    root /var/www/example.com/client;
    index index.mjs index.html index.xml;

    ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;
    ssl_trusted_certificate /etc/letsencrypt/live/example.com/chain.pem;

    include snippets/ssl-params.conf;

rewrite ^/(.*) /$1 break;



location / {

proxy_set_header        Host $host;
        proxy_set_header        X-Real-IP $remote_addr;
        proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header        X-Forwarded-Proto $scheme;
        proxy_redirect          off;
        proxy_buffering         on;
        proxy_cache_valid       200 1d;
        proxy_cache_use_stale   error timeout invalid_header updating http_500 http_502 http_503 http_504;

        proxy_pass              http://nuxt;
        proxy_read_timeout      1m;
        proxy_connect_timeout   1m;
include proxy_params;

    }

location /api/ {
  rewrite ^/api/(.*)$ /$1 break;

        proxy_http_version 1.1;
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Server $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header Host $http_host;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
        proxy_pass_request_headers on;
     proxy_pass http://strapi;
        include proxy_params;

}
 location /_nuxt/hmr/ {
        proxy_pass http://localhost:24678;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }


}

score 0 · Accepted Answer · answered May 28 '23 at 19:58

First read this

Strapi works only with subdomain strapi.exaple.com or example.com/strapi.

Following the guide, you need to create a url that will open the admin panel strapi.

I excluded the line serveAdminPanel: false from the guide.

String url: 'http://yourbackend.com must contain the path to the frontend part of strapi

All the addresses of your sites in the .env files should have https instead of http, this is necessary in the frontend part and in the backend part of your application

How to configure nginx config for strapi and nuxt?

1 Answers1