Join Log in
Score:0
Adiel avatar Server

configure NGINX: for Wordpress Headless with nextjs

br flag
Adiel

I want to make a WordPress Headless (using wpgraphql API at /graphql uri), where frontend will be next.js. And I want both the front-end (Next.js) and the back-end (WordPress. admin, content, and API) to be in the same domain.

To that end I want all requests only for /wp-admin/* and /wp-content/* and /graphql to be directed to WordPress. And all other uri's will be redirected to the next.js server in localhost:3000 via reverse proxy. Below is the nginx configuration file.

server {
  listen 80;
  listen [::]:80;
  root /var/www/wordpress;
  index index.php index.html index.htm;
  server_name localhost;

  client_max_body_size 100M;
  autoindex off;

  # WordPress 
  location / {
    try_files $uri $uri/ /index.php?$args;
  }

  location ~ \.php$ {
    include snippets/fastcgi-php.conf;
    fastcgi_pass unix:/var/run/php/php7.4-fpm.sock;
    fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
    include fastcgi_params;
  }

  # Next.js
  location # ... {
    proxy_pass http://localhost:3000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    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_set_header X-Forwarded-Host $host;
    proxy_set_header X-Forwarded-Port $server_port;
  }
}

Any help appreciated, thanks

145
0 + 0
Score:0
avatar Server
us flag
Tero Kilkanen

nginx uses the longest matching prefix specified with location directive. Therefore the following setup should do what you want.

You can take the following approach:

  location /wp-admin {
     try_files $uri $uri/ /index.php?$args;
  }
  
  location /wp-includes {
     try_files $uri $uri/ /index.php?$args;
  }
    
  location /wp-json {
     try_files $uri $uri/ /index.php?$args;
  }

  location /wp-content {
      try_files $uri $uri/ /index.php?$args;
  }

  location /graphql {
      try_files $uri $uri/ /index.php?$args;
  }
0 + 0
Adiel avatar
br flag
Adiel
Works great, but the `wp-includes` and `wp-json` paths must be added. Thanks
0
Reply
ธงชาติไทย
Elon Musk
I sit in a Tesla and translated this thread with Ai:

mangohost

Post an answer

Most people don’t grasp that asking a lot of questions unlocks learning and improves interpersonal bonding. In Alison’s studies, for example, though people could accurately recall how many questions had been asked in their conversations, they didn’t intuit the link between questions and liking. Across four studies, in which participants were engaged in conversations themselves or read transcripts of others’ conversations, people tended not to realize that question asking would influence—or had influenced—the level of amity between the conversationalists.