Question

我有一个独立于后端Rails API应用程序的React应用程序，我想引入一项将前端应用程序置于维护模式的功能，我想不出什么好主意。我的客户希望单击一个按钮，这样当他单击该按钮时，该应用程序将进入维护模式。由于这是一个React应用程序，因此HTML显然不是由任何后端服务器呈现的（后端API仅用于将数据提供给前端并作为管理面板），而是由JS呈现。我使用react-router，并且有很多路由可以呈现不同的组件，而这些路由又对后端进行了几次API调用。我可以将后端置于维护模式，并使前端应用对后端的响应做出反应（503服务不可用），但是这将花费大量的精力和时间，因为我必须修改所有路线和sagas才能使其做出反应适当地响应来自后端的响应。我正在考虑创建一个仅包含维护页面的单独分支，并让客户在需要时部署该分支，而不用单击按钮。我已经尝试过使用Express.js中间件Maintenance，但是它要么不起作用，要么我不知道如何使用它（对此我很陌生）。该应用程序在Node上的Express服务器上运行。您有什么想法可以解决这个问题吗？

Answer 1

我认为最好的选择是维护模式有一个简单的index.html页面。然后，只需交换index.html和maintenance_index.html。很棒，因为它会绕过所有React，以防万一其中有损坏。

我不确定您用于该Express服务器的环境，但是您可以使用Bash快速轻松地交换文件：

$ mv index.html tmp_index.html && mv maintenance_index.html index.html && mv tmp_index.html maintenance_index.html

简单的维护html：

<!-- To use swap with index.html and invalidate web cache -->
<!DOCTYPE html>
<title>Site Maintenance</title>
<style>
  body {
    text-align: center;
    padding: 20px;
  }

  @media (min-width: 768px) {
    body {
      padding-top: 150px;
    }
  }

  h1 {
    font-size: 50px;
  }

  body {
    font: 20px Helvetica, sans-serif;
    color: #333;
  }

  article {
    display: block;
    text-align: left;
    max-width: 650px;
    margin: 0 auto;
  }
</style>

<article>
  <h1>We&rsquo;ll be back soon!</h1>
  <div>
    <p>
      Sorry for the inconvenience but we&rsquo;re performing some maintenance at the moment.We&rsquo;ll be back online
      shortly!
    </p>
    <p>&mdash; The XX Team</p>
  </div>
</article>

如何将React应用程序置于维护模式？

1 个答案: