如何在 apache 中正确运行 react 应用程序?

如何在 apache 中正确运行 react 应用程序?

我正在使用 apache 运行 moodle 应用程序(PHP),但现在我需要在这个 moodle 应用程序中添加一个 React 应用程序,但是当尝试启动 React 应用程序时,它只显示一个空的 index.html

我已经修改了 apache 配置文件来为 react 应用程序提供服务,如下所示:

<VirtualHost ipserver:443>
        ServerAdmin [email protected]
        ServerName moodleapp

        DocumentRoot /var/www/moodleapp
        ErrorLog ${APACHE_LOG_DIR}/upficerror.log
        CustomLog ${APACHE_LOG_DIR}/upficaccess.log combined

        SSLEngine on
        SSLCertificateFile /etc/ssl/certs/aula/moodleapp.crt
        SSLCACertificateFile /etc/ssl/certs/aula/moodleapp.ca
        SSLCertificateKeyFile /etc/ssl/certs/aula/moodleapp.key

        <FilesMatch "\.(cgi|shtml|phtml|php)$">
                SSLOptions +StdEnvVars
        </FilesMatch>
        <Directory /usr/lib/cgi-bin>
                SSLOptions +StdEnvVars
        </Directory>

        <Directory /var/www/moodleapp/>
                Options -Indexes
                Order allow,deny
                Allow from all
        </Directory>

        <Directory /var/www/moodleapp/react/build>
            Options -Indexes
            Order allow,deny
            Allow from all
            DirectoryIndex index.html
            FallbackResource /react/index.html
        </Directory>

        Alias /react /var/www/moodleapp/react/build

        <Location /react>
            ProxyPass http://localhost:3000
            ProxyPassReverse http://localhost:3000
        </Location>

        <Directory /var/www/moodleapp/react/src>
            Options -Indexes
            Order allow,deny
            Allow from all
        </Directory>

        Alias /react/src /var/www/moodleapp/react/src

</VirtualHost>

并且在 Rreact 应用程序根目录中我有一个 .htaccess:

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /react/index.html [L]

vite我的反应应用程序是用以下文件配置构建的:

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

export default defineConfig({
  plugins: [react()],
  build: {
    outDir: 'build',
  },
  server: {
    port: 3000,
    host: true,
  }
});

在 package.json 中我还添加了"homepage"如下内容:

  "name": "react",
  "private": true,
  "version": "1.0.0",
  "type": "commonjs",
  "homepage": "/react/",

yarn start一旦使用或启动应用程序,我就会使用或pm2检查路径,但它不起作用。在浏览器中检查 ,我发现页面从、和收到 404 错误,但显然路径是错误的,因为不在内。我不确定错误在哪里。domain/reactip/reactNetworkhttps://mydomain/@vite/clienthttps://mydomain/src/main.jsxhttps://mydomain/@react-refreshmain.jsxmydomain/react/src/main.jsxmydomain/src/main.jsx

相关内容