Развертывание API Rails 7 с фронтендом на React с использованием Vite на Heroku

Я создал базовый API на Rails 7 с фронтендом на React, используя Vite. Проект также был создан с помощью:

npm create vite@latest

команды, если это полезно для понимания контекста. Проблема, с которой я сталкиваюсь, заключается в том, что приложение работает нормально локально, но компоненты/маршруты не отображаются на Heroku.

Приложение использует React Router для обработки маршрутизации, поэтому я понимаю, что это вызовет проблему с тем, что маршруты не отображаются так, как ожидалось через Heroku, из-за того, что контент рендерится на стороне клиента. Я пытался решить это с помощью Nginx buildpack для Heroku.

Тем не менее, мне не удается успешно отобразить мои компоненты после развертывания, несмотря на то, что я настроил NodeJS, Ruby и Nginx buildpack (в этом порядке) и следовал множеству похожих постов здесь:

• https://elements.heroku.com/buildpacks/heroku/heroku-buildpack-nginx

• Как развернуть фронтенд на React + бэкенд API на Rails с nginx, capistrano и passenger

• https://medium.com/@murithibrianm/solving-react-routing-on-production-nginx-configuration-eb98c7ab34a7

• https://gist.github.com/huangzhuolin/24f73163e3670b1cd327f2b357fd456a

Вот некоторые скриншоты и файлы для справки:

Структура файлов

Снова, это приложение было настроено с помощью команды Vite выше, так что эта структура предоставлена из коробки.

Похоже, что Heroku может искать мой файл vite.config.js в каталоге /app/frontend/ вместо каталога /frontend/ на основе логов Heroku:

Package.json

{
  "name": "frontend",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "@emotion/react": "^11.13.3",
    "@emotion/styled": "^11.13.0",
    "@fontsource/roboto": "^5.1.0",
    "@mui/icons-material": "^6.1.1",
    "@mui/material": "^6.1.1",
    "@mui/styles": "^6.1.1",
    "@mui/x-data-grid": "^7.18.0",
    "@mui/x-date-pickers": "^7.18.0",
    "axios": "^1.7.7",
    "dayjs": "^1.11.13",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-router-dom": "^6.26.2"
  },
  "devDependencies": {
    "@eslint/js": "^9.9.0",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "@vitejs/plugin-react": "^4.3.1",
    "eslint": "^9.9.0",
    "eslint-plugin-react": "^7.35.0",
    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
    "eslint-plugin-react-refresh": "^0.4.9",
    "globals": "^15.9.0",
    "vite": "^5.4.1"
  }
}

nginx.conf.erb

daemon off;
# У Heroku dynos минимум 4 ядра.
worker_processes <%= ENV['NGINX_WORKERS'] || 4 %>;

events {
    use epoll;
    accept_mutex on;
    worker_connections <%= ENV['NGINX_WORKER_CONNECTIONS'] || 1024 %>;
}

http {
    gzip on;
    gzip_comp_level 2;
    gzip_min_length 512;
    gzip_proxied any; # маршрутизатор Heroku отправляет заголовок Via

    server_tokens off;

    log_format l2met 'measure#nginx.service=$request_time request_id=$http_x_request_id';
    access_log <%= ENV['NGINX_ACCESS_LOG_PATH'] || 'logs/nginx/access.log' %> l2met;
    error_log <%= ENV['NGINX_ERROR_LOG_PATH'] || 'logs/nginx/error.log' %>;

    include mime.types;
    default_type application/octet-stream;
    sendfile on;

    # Необходимо прочитать тело за 5 секунд.
    client_body_timeout 5;

    upstream app_server {
        server unix:/tmp/nginx.socket fail_timeout=0;
    }

    server {
        listen <%= ENV["PORT"] %>;
        server_name _;
        keepalive_timeout 5;

        location / {
            # Раскомментируйте это условие, чтобы принудительно использовать SSL/перенаправить http -> https
            # if ($http_x_forwarded_proto != "https") {
            #   return 301 https://$host$request_uri;
            # }

            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header Host $http_host;
            proxy_redirect off;
            proxy_pass http://app_server;
        }
    }
}

vite.json

{
  "all": {
    "sourceCodeDir": "frontend",
    "watchAdditionalPaths": []
  },
  "development": {
    "autoBuild": true,
    "publicOutputDir": "vite-dev",
    "port": 3036
  },
  "test": {
    "autoBuild": true,
    "publicOutputDir": "vite-test",
    "port": 3037
  }
}

vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/api': {
        target: 'https://fake.herokuapp.com/', // Раскомментируйте эту строку при развертывании на Heroku
        // target: 'http://localhost:3000', // Раскомментируйте эту строку при разработке локально - Замените на ваш URL API Rails
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },
})

Буду признателен за любые советы!