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

jed*_*edi 5 reactjs

我有一个与后端 Rails API 应用程序分开的 React 应用程序,我想介绍一个将前端应用程序置于维护模式的功能,但我想不出任何好主意。

我的客户想要一个按钮来点击,这样当他点击它时,应用程序就会进入维护模式。

由于这是一个 React 应用程序,显然 HTML 不是由任何后端服务器呈现(后端 API 仅用于向前端提供数据并作为管理面板),而是由 JS 呈现。我使用react-router并且我有许多路由来呈现不同的组件,这些路由又向后端发出多个 API 调用。我可以将后端置于维护模式并使前端应用程序对后端的响应做出反应(503 服务不可用),但这需要花费大量的精力和时间,因为我必须修改所有路由和传奇才能使它们做出反应适当地响应来自后端的响应。

我正在考虑创建一个单独的分支,只包含一个维护页面,并让客户随时部署该分支,而不是单击按钮。我试过使用 Express.js 中间件维护,但要么不起作用,要么我不知道如何使用它(我对此很陌生)。该应用程序在 Node.js 上的 Express 服务器上运行。我怎么解决这个问题?

Jon*_*win 4

我认为最好的选择是为维护模式提供一个简单的 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
Run Code Online (Sandbox Code Playgroud)

简单维护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>
Run Code Online (Sandbox Code Playgroud)