Strapi admin API on subfolder hitting 404 on JS files behind nginx reverse proxy

Viewed 68

I'm trying to setup Strapi on my DO droplet.

I have a UI for my web app running on a subdomain (from here onwards: https://blah.mywebsite.com) - it's running a Next.js instance - but I believe that is irrelevant.

I also have Strapi running on a separate node process (via PM2) both the Next.js and Strapi node instances are done via pm2 using the following ecosystem.config.js file:

module.exports = {
  apps: [
    {
      name: "webapp",
      cwd: "/root/webapp",
      script: "npm",
      args: "start",
      env: { NODE_ENV: "production" },
    },
    {
      name: "strapi",
      cwd: "/root/webappstrapi",
      script: "yarn",
      args: "start",
      env: {
        NODE_ENV: "production",
        APP_KEYS: "STRINGGOESHERE,STRINGGOESHERE",
        ADMIN_JWT_SECRET: "STRINGGOESHERE",
        JWT_SECRET: "STRINGGOESHERE",
        API_TOKEN_SALT: "STRINGGGOESHERE",
        DATABASE_NAME: "DBNAMEHERE",
        DATABASE_PASSWORD: "PASSWORDHERE"
      },
    },
  ],
};

From what I can see there isn't an issue with either node process and both are running just fine.

I then follow the tutorial here ("Subfolder unified"): https://docs.strapi.io/developer-docs/latest/setup-deployment-guides/deployment/optional-software/nginx-proxy.html#nginx-virtual-host

My Strapi config/server.js file looks like this:

module.exports = ({ env }) => ({
  host: env("HOST", "0.0.0.0"),
  port: env.int("PORT", 1337),
  url: "https://blah.mywebsite.com/strapi",
  app: {
    keys: env.array("APP_KEYS"),
  },
});

I have ran yarn build and run the build files via the aforementioned pm2 config above.

To setup the following URL structure: https://blah.mywebsite.com/strapi/admin https://blah.mywebsite.com/strapi/api

My Nginx config for the subdomain looks like this (following the strapi docs):

server {
    listen                  443 ssl http2;
    listen                  [::]:443 ssl http2;
    server_name             blah.mywebsite.com;
    root                    /var/www/blah.mywebsite.com/public;

    # SSL
    ssl_certificate         /etc/letsencrypt/live/blah.mywebsite.com/fullchain.pem;
    ssl_certificate_key     /etc/letsencrypt/live/blah.mywebsite.com/privkey.pem;
    ssl_trusted_certificate /etc/letsencrypt/live/blah.mywebsite.com/chain.pem;

    # security
    include                 nginxconfig.io/security.conf;

    location / {
        proxy_pass http://127.0.0.1:3000; # next.js
        include    nginxconfig.io/proxy.conf;
    }

    location /strapi/ {
        rewrite ^/strapi/?(.*)$ /$1 break;
        proxy_pass http://127.0.0.1:1337;
        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;
    }

    # additional config
    include nginxconfig.io/general.conf;
}

# subdomains redirect
server {
    listen                  443 ssl http2;
    listen                  [::]:443 ssl http2;
    server_name             *.blah.mywebsite.com;

    # SSL
    ssl_certificate         /etc/letsencrypt/live/blah.mywebsite.com/fullchain.pem;
    ssl_certificate_key     /etc/letsencrypt/live/blah.mywebsite.com/privkey.pem;
    ssl_trusted_certificate /etc/letsencrypt/live/blah.mywebsite.com/chain.pem;
    return                  301 https://blah.mywebsite.com$request_uri;
}
# HTTP redirect
server {
    listen      80;
    listen      [::]:80;
    server_name .blah.mywebsite.com;
    include     nginxconfig.io/letsencrypt.conf;

    location / {
        return 301 https://blah.mywebsite.com$request_uri;
    }
}

Now when I navigate to https://blah.mywebsite.com/strapi/admin - the HTML resolves - but I get a blank page - looking at the browser console I get:

GET blah.mywebsite.com/strapi/admin/runtime~main.67ca8ce7.js net::ERR_ABORTED 404
GET blah.mywebsite.com/strapi/admin/main.57d09928.js net::ERR_ABORTED 404

So it looks like the build JS bundle files aren't being served by my server.

Looking at the pm2 logs for my strapi node instance I only see:

[2022-09-11 18:45:03.145] http: GET /admin/ (3 ms) 200

So it looks like the requests for the JS files aren't hitting the Strapi node process - which leads me to believe Nginx isn't passing on the GET requests for the JS files...

How do I solve this?

0 Answers
Related