Nginx configuration for laravel and two react apps, Gets 404 on refresh-CodePudding

I have an issue.

First of all, let me tell you, I've tried all StackOverflow and other websites solutions,

But they didn't solve the problem.

So let me explain the problem:

I have a Laravel app and two React apps, they are inside one project and in different directories.

I used docker-compose for orchestration.

**The problem is with Nginx, It works, But when I refresh the page it gets me 404. In the end, I've explained the problem **

Here is my docker-compose :

version: '3.3'
services:

  ex-mysql:
    image: mysql:latest
    container_name: ex-mysql
    restart: always
    ports:
      - "3307:3306"
    env_file:
      - ./mysql/dev/mysql.env
    networks:
      - ex-net

  ex-app:
    build:
      context: .
      dockerfile: ./be/be-app.dockerfile
    container_name: ex-app
    tty: true
    restart: unless-stopped
    working_dir: /var/www/html
    env_file: './be/.env.dev'
    environment:
      CONTAINER_ROLE: app
    volumes:
      - ./be:/var/www/html
      - ./php/local/local.ini:/usr/local/etc/php/conf.d/local.ini
      - ./be/start.sh:/usr/local/bin/start
    depends_on:
      - ex-mysql
    networks:
      - ex-net

  ex-queue:
    build:
      context: ./
      dockerfile: ./be/be-app.dockerfile
    container_name: ex-queue
    restart: always
    environment:
      CONTAINER_ROLE: queue
    working_dir: /var/www/html
    env_file: './be/.env.dev'
    volumes:
      - ./be:/var/www/html
      - ./php/dev/dev.ini:/usr/local/etc/php/conf.d/local.ini
      - ./be/start.sh:/usr/local/bin/start
    depends_on:
      - ex-app
    networks:
      - ex-net

  ex-server:
    image: 'nginx:stable-alpine'
    container_name: ex-server
    tty: true
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - ./nginx/dev/nginx.conf:/etc/nginx/conf.d/default.conf:ro
      - ./be:/var/www/html
      - ./fe-admin/build:/var/www/fe-admin
      - ./fe-dashboard/build:/var/www/fe-dashboard
      - ./nginx/dev/certificates/certificate.crt:/etc/nginx/certificate.crt
      - ./nginx/dev/certificates/private.key:/etc/nginx/private.key
    depends_on:
      - ex-app
    networks:
      - ex-net

  ex-js-report:
    build:
      context: ./report/
      dockerfile: report.dockerfile
    container_name: ex-js-report
    tty: true
    restart: always
    ports:
      - "5488:5488"
    volumes:
      - ./report/config/jsreport.config.json:/app/jsreport.config.json
      - ./report/data:/app/data
    depends_on:
      - ex-app
    networks:
      - ex-net

  ex-fe-dashboard:
    build:
      context: ./fe-dashboard/
      dockerfile: fe-dashboard.dockerfile
    container_name: ex-fe-dashboard
    restart: "no"
    tty: true
    volumes:
      - /app/node_modules/
      - ./fe-dashboard/build:/app/build
      - ./fe-dashboard/start.sh:/app/start.sh
    networks:
      - ex-net

  ex-fe-admin:
    build:
      context: ./fe-admin/
      dockerfile: fe-admin.dockerfile
    container_name: ex-fe-admin
    restart: "no"
    tty: true
    volumes:
      - /app/node_modules/
      - ./fe-admin/build:/app/build
      - ./fe-admin/start.sh:/app/start.sh
    networks:
      - ex-net

networks:
  ex-net:
    driver: bridge

And here is the nginx configuration, That causes the problem:

server {
    client_max_body_size 250M;
    listen 80 default_server;
    server_name exmple.com;
    root /var/www/html/public;
    index index.php index.html;
    error_log  /var/log/nginx/error.log;
    access_log /var/log/nginx/access.log;
    location ~ \.php$ {
        client_max_body_size 8000000M;
        try_files $uri =404;
        fastcgi_split_path_info ^(. \.php)(/. )$;
        fastcgi_pass ex-app:9000;
        fastcgi_index index.php;
        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        fastcgi_param PATH_INFO $fastcgi_path_info;
        fastcgi_connect_timeout 1200;
        fastcgi_send_timeout 1200;
        fastcgi_read_timeout 90;
    }
    location /api {
        try_files $uri $uri/ /index.php?$query_string;
        gzip_static on;
    }
    location ~ ^/ {
        root /var/www/fe-dashboard/;
        index index.html;
        try_files $uri $uri/ /index.html?$query_string =404;
    }
}

server {
    client_max_body_size 250M;
    listen 80;
    server_name admin.example.com;
    root /var/www/html/public;
    index index.php index.html;
    error_log  /var/log/nginx/error.log;
    access_log /var/log/nginx/access.log;
    location ~ \.php$ {
        client_max_body_size 8000000M;
        try_files $uri =404;
        fastcgi_split_path_info ^(. \.php)(/. )$;
        fastcgi_pass ex-app:9000;
        fastcgi_index index.php;
        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        fastcgi_param PATH_INFO $fastcgi_path_info;
        fastcgi_connect_timeout 1200;
        fastcgi_send_timeout 1200;
        fastcgi_read_timeout 90;
    }
    location /api {
        try_files $uri $uri/ /index.php?$query_string;
        gzip_static on;
    }
    location ~ ^/ {
        root /var/www/fe-admin/;
        index index.html;
        try_files $uri $uri/ /index.html?$query_string =404;
    }
}

This configuration is on a server, And it has a domain and a subdomain.

The build process of React apps are on the pipeline.

When I try to access example.com it is redirecting me to example.com/auth/login and this is correct but when I try to refresh example.com/auth/login it gives me nginx 404 error.

Any suggestion will be helpful, I'm working on this for days.

Thanks a lot to you guys.

CodePudding user response：

Just find out the problem, I've changed my nginx configuration to this:

server {
    client_max_body_size 250M;
    listen 80 default_server;
    server_name exmple.com;
    root /var/www/html/public;
    index index.php index.html;
    error_log  /var/log/nginx/error.log;
    access_log /var/log/nginx/access.log;
    location ~ \.php$ {
        client_max_body_size 8000000M;
        try_files $uri =404;
        fastcgi_split_path_info ^(. \.php)(/. )$;
        fastcgi_pass ex-app:9000;
        fastcgi_index index.php;
        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        fastcgi_param PATH_INFO $fastcgi_path_info;
        fastcgi_connect_timeout 1200;
        fastcgi_send_timeout 1200;
        fastcgi_read_timeout 90;
    }
    location /api {
        try_files $uri $uri/ /index.php?$query_string;
        gzip_static on;
    }
    location / {
        root /var/www/fe-dashboard/build/;
        try_files $uri $uri/ /index.html;
    }
}

server {
    client_max_body_size 250M;
    listen 80;
    server_name admin.example.com;
    root /var/www/html/public;
    index index.php index.html;
    error_log  /var/log/nginx/error.log;
    access_log /var/log/nginx/access.log;
    location ~ \.php$ {
        client_max_body_size 8000000M;
        try_files $uri =404;
        fastcgi_split_path_info ^(. \.php)(/. )$;
        fastcgi_pass ex-app:9000;
        fastcgi_index index.php;
        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        fastcgi_param PATH_INFO $fastcgi_path_info;
        fastcgi_connect_timeout 1200;
        fastcgi_send_timeout 1200;
        fastcgi_read_timeout 90;
    }
    location /api {
        try_files $uri $uri/ /index.php?$query_string;
        gzip_static on;
    }
    location / {
        root /var/www/fe-admin/build/;
        try_files $uri $uri/ /index.html;
    }
}

And it works perfect now.