gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 17:29:32 25 4
gpt4 key购买 nike

我有一个与后端 Rails API 应用程序分开的 React 应用程序,我想介绍一个将前端应用程序置于维护模式的功能,但我想不出任何好主意。
我的客户想要一个按钮来点击,这样当他点击它时,应用程序就会进入维护模式。
由于这是一个 React 应用程序,显然 HTML 不是由任何后端服务器呈现(后端 API 仅用于向前端提供数据并作为管理面板),而是由 JS。我用 react-router并且我有许多渲染不同组件的路由,这些路由又向后端发出多个 API 调用。我可以将后端置于维护模式并使前端应用程序对后端的响应使用react(503 服务不可用),但这需要花费大量的精力和时间,因为我必须修改所有路由和传奇才能使它们使用react适本地响应来自后端的响应。
我正在考虑创建一个单独的分支,只包含一个维护页面,并让客户随时部署该分支,而不是单击按钮。我试过使用 Express.js 中间件 Maintenance但要么它不起作用,要么我不知道如何使用它(我对此很陌生)。该应用程序在 Node.js 上的 Express 服务器上运行。我怎么解决这个问题?

最佳答案

我认为最好的办法是为维护模式创建一个简单的 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>

关于reactjs - 如何将 React 应用程序置于维护模式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57045792/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com