如何将 Create-react-app 项目部署到 Azure

Question

我们在 azure 中创建了一个静态 Web 应用程序项目。

将代码推送到 github 存储库。

我添加了 staticwebapp.config.json 文件，因为路由抛出 404。我正在使用 ReactRouter 处理 404 和每条路由

{
  "navigationFallback": {
    "rewrite": "index.html"
  }
}

现在我收到此错误消息，页面只有 2 条路线

内容服务器拒绝了请求：BadRequest 原因：静态文件数量太大

我可能做错了什么，还是 Azure 只能处理 Nextjs 应用程序而不能处理 CreateReactApp 项目？

Answer 1

以下是创建 React 应用程序并将其部署到 Azure 静态 Web 应用程序的步骤：

• 使用以下命令创建 React 应用程序：

npx create-react-app my-react-app
cd my-react-app

将

staticwebapp.config.json

添加到 React 应用程序文件夹。

{
  "navigationFallback": {
    "rewrite": "index.html"
  }
}

构建应用程序并将其推送到 Git。

• 创建一个静态 Web 应用程序并选择您推送代码的 Git 存储库。
• Git 操作完成后浏览应用程序。

带路由：

以下是更正的句子：

以下是创建 React 应用程序并通过路由将其部署到 Azure 静态 Web 应用程序的步骤。

• 代码参考 DOC @Swaraj Gosavi 以及来自 MSDOC 的 Azure 静态 Web 应用程序的路由配置

  npm install react-router-dom

// src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { HashRouter } from 'react-router-dom';

ReactDOM.render(
  <HashRouter>
    <App />
  </HashRouter>,
  document.getElementById('root')
);

// src/Navbar.js

import React from 'react';
import { Link } from 'react-router-dom';
import './App.css';

export default function Navbar() {
  return (
    <div className="App">
      <center>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/contact">Contact</Link></li>
        </ul>
      </center>
    </div>
  );
}

// src/templates/Home.js

import React from 'react';
import logo from '../logo.svg';
import '../App.css';

export default function Home() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React With Swaraj
        </a>
      </header>
    </div>
  );
}

// src/templates/About.js

import React from 'react';

export default function About() {
  return (
    <div>
      <h1>
        <center>
          <p>
            This is About.
          </p>
          <a
            href="https://github.com/swarajgosavi/swarajgosavi"
            target="_blank"
            rel="noopener noreferrer"
          >
            About Me.
          </a>
        </center>
      </h1>
    </div>
  );
}

// src/templates/Contact.js

import React from 'react';

export default function Contact() {
  return (
    <div>
      <h1>
        <center>
          <p>
            You can Contact Me.
          </p>
          <a
            href="https://github.com/"
            target="_blank"
            rel="noopener noreferrer"
          >
            Sampath (GitHub) [@Sampath]
          </a>
        </center>
      </h1>
    </div>
  );
}

// src/App.js

import React from 'react';
import { Routes, Route } from 'react-router-dom';
import Home from './templates/Home';
import About from './templates/About';
import Contact from './templates/Contact';
import Navbar from './Navbar';

function App() {
  return (
    <>
      <Navbar />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </>
  );
}

export default App;

staticwebapp.config.json：

{

"routes":  [

{

"route":  "/",

"allowedRoles":  ["anonymous"]

},

{

"route":  "/about",

"allowedRoles":  ["anonymous"]

},

{

"route":  "/contact",

"allowedRoles":  ["anonymous"]

},

{

"route":  "/profile*",

"allowedRoles":  ["authenticated"]

}

],

"navigationFallback":  {

"rewrite":  "/index.html"

},

"globalHeaders":  {

"cache-control":  "no-store, must-revalidate"

},

"trailingSlash":  "auto"

}