Как развернуть проект Create-react-app в Azure

Question

Мы создали проект статического веб-приложения в Azure.

Поместил код в репозиторий GitHub.

Я добавил файл staticwebapp.config.json, потому что маршруты выдавали ошибки 404. Я обрабатываю ошибки 404 и каждый маршрут с помощью ReactRouter.

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

теперь я получаю это сообщение об ошибке на странице, на которой есть только 2 маршрута

Сервер содержимого отклонил запрос с указанием: BadRequest. Причина: слишком большое количество статических файлов.

Могу ли я делать что-то не так, или Azure может обрабатывать только приложения Nextjs, но не проекты CreateReactApp?

Answer 1

Ниже приведены шаги по созданию приложения React и его развертыванию в статическом веб-приложении Azure.

• Создайте приложение React, используя следующую команду:

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

Добавлятьstaticwebapp.config.jsonв папку приложения React .

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

Соберите и отправьте приложение в Git.

• Создайте статическое веб-приложение и выберите репозиторий Git, куда вы поместили код .
• Просмотрите приложение после завершения действия Git.

С маршрутизацией:

Вот исправленные предложения:

Ниже приведены шаги по созданию приложения React и его развертыванию в статическом веб-приложении Azure с маршрутизацией.

• Справочник по коду DOC @Swaraj Gosavi и конфигурация маршрутизации статических веб-приложений Azure из MSDOC 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"

}

Отправьте код в Git:

Статус развертывания в Git Action:

Лазурный: