Laravel、Vue 和 Apache2 通过反向代理进行热重载

Question

我已经为此苦恼了两个多星期，但无法让它在我的一生中发挥作用。 信息如下：

• 我的网站位于 Digital Ocean 的远程服务器上，运行 Ubuntu 和 apache2。
• 我的前端是Vue2
• 我的后端是 Laravel 10
• 两者都位于同一服务器上。
• 我使用 Auth0 进行 SSO。 （mylogingscreen.mydevsite.com/auth0login？等）
• 用于 ssl 的 Certbot。
• 使用 webpack 运行 Laravel Echo
• 使用 webpack atm，但如果需要可以更改为 w/e。

该网站当前的工作方式是手动编译前端文件并将其复制到 laravel 内的 /public/ 文件夹中。 （基本上，就像是生产环境一样）。但我需要让它适用于前端开发，所以我需要热重载。 换句话说，我想访问 https://myloggingscreen.mydevsite.com 并实时查看我的更改。

我像这样设置我的 vue.config.js：

devServer: {
    allowedHosts: "all",
    client: {
      webSocketURL: 'auto://0.0.0.0:0/ws'
    },

对于 apache 我添加了这个：

ProxyPass / http://localhost:8080/
ProxyPassReverse / http://localhost:8080/

我的 apache 站点配置是这样的：

<VirtualHost :80>
    DocumentRoot /var/www/laravel/public
    ServerAlias mylogingscreen.mydevsite.com 

    
    ProxyPass / http://localhost:8080/
    ProxyPassReverse / http://localhost:8080/
  
    RewriteEngine On
    RewriteCond %{HTTP:UPGRADE} ^WebSocket$ [NC]
    RewriteCond %{HTTP:CONNECTION} ^Upgrade$ [NC]
    RewriteRule . ws://echo:6001%{REQUEST_URI} [P]
    

    ProxyPass /socket.io http://echo:6001/socket.io
    ProxyPassReverse /socket.io http://echo:6001/socket.io

    <Directory /var/www/laravel>
        Require all granted
        AllowOverride All
    </Directory>
   RewriteCond %{SERVER_NAME} =mylogingscreen[OR]
   RewriteCond %{SERVER_NAME} =mylogingscreen.mysite.com 
   RewriteRule ^ https://%{SERVER_NAME}%{REQUEST_URI} [END,NE,R=permanent]
</VirtualHost>

当我执行纱线服务时，它可以很好地加载首页，但任何有关后端的操作都不会执行任何操作并再次重新加载首页。

也许我应该为 echo 保留 webpack，为 vue 使用 vite？或者也使用nginx？

非常感谢任何帮助！

Answer 1

我正在对您的情况做出一些假设，但听起来您正在经历很多痛苦才能保持前端和后端紧密耦合。 我会根据您的情况推荐一些东西：

1. 考虑将 Vue 应用程序与 Laravel 应用程序解耦。选项将转移到使用 Nuxt.js 的 SPA 或 SSR。 （当涉及到前端的开发和部署时，这几乎肯定会让事情变得更加容易并且成本更低。）

2. 考虑使用本地开发环境，除非有充分的理由不这样做。听起来你使用的是远程开发服务器，这会使事情变得复杂；尽管大多数 IDE 都有帮助程序/扩展，可以让这一切变得更顺利。 Laravel 和 Vue 2 都提供具有热重载功能的本地服务器选项，非常易于配置。

3. 考虑从 Webpack 迁移到 Vite。如果时间对您来说很重要（听起来确实如此），那么这是一个理所当然的选择。 我广泛使用过这两种方法，Vite 比 Webpack 速度/效率快几个数量级。 除非没办法出手，几乎所有方式：Vite>Webpack。