web-dev-qa-db-fra.com

Comment remplacer% PUBLIC_URL% dans l'application React sur un site Web Azure

J'ai une application React qui fonctionne parfaitement bien localement, quand je la déploie sur Azure, j'ai quelques 404 erreurs, sur l'index.html

Tous avec le tag% PUBLIC_URL%

Selon la documentation, ils seront remplacés dans le processus de génération, mais ne savez pas comment cela se fait, de sorte que lors du déploiement, les URL correctes soient mises en place

<!doctype html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="theme-color" content="#000000">
    <!--
          manifest.json provides metadata used when your web app is added to the
          homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon.png">
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700" rel="stylesheet" async>
    <link async rel="stylesheet" href="%PUBLIC_URL%/css/ionicons.min.css">
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/style.min.css">
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
         integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="
         crossorigin="" async/>
    <!--
          Notice the use of %PUBLIC_URL% in the tags above.
          It will be replaced with the URL of the `public` folder during the build.
          Only files inside the `public` folder can be referenced from the HTML.

          Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
          work correctly both with client-side routing and a non-root public URL.
          Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>Isomorphic</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
    <!--
          This HTML file is a template.
          If you open it directly in the browser, you will see an empty page.

          You can add webfonts, meta tags, or analytics to this file.
          The build step will place the bundled scripts into the <body> tag.

          To begin the development, run `npm start` or `yarn start`.
          To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>
reactjsnpmazure-devopsazure-web-sitesyarnpkg
7
Luis Valencia

COMMENT REMPLACER% PUBLIC_URL%

Par défaut, Create React App produit une version en supposant que votre application est hébergée à la racine du serveur. example.com Si votre site Web n'est pas diffusé à partir de cette racine, (peut-être souhaitez-vous diffuser à partir de example.com/relativepath, vous pouvez remplacer cela en spécifiant la page d'accueil dans votre package.json

"homepage": "http://example.com/relativepath",

Cela permettra à Create React App de déduire correctement le chemin racine à utiliser dans le fichier HTML généré.

Dans votre cas, cependant, je pense que vous obtenez une erreur 404 car Azure essaie de trouver un index.html (ou un autre index. * Nommé). Pour résoudre ce problème, Azure doit savoir comment transmettre l'itinéraire souhaité au seul et unique index.html placé à la racine du site. Créez un nouveau fichier nommé web.config à l'intérieur /site/wwwroot dossier avec le contenu suivant:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
   <system.webServer>
      <rewrite>
         <rules>
            <rule name="React Routes" stopProcessing="true">
               <match url=".*" />
               <conditions logicalGrouping="MatchAll">
                  <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                  <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                  <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
               </conditions>
               <action type="Rewrite" url="/" />
            </rule>
         </rules>
      </rewrite>
   </system.webServer>
</configuration>

Cela indiquera à Azure de réécrire toutes les URL comme si elles pointaient vers notre fichier racine et que notre application SPA pouvait gérer correctement les liens.

Les références:

J'espère que cela peut vous aider

4
Tatsu

Cela ressemble au fichier d'index extrait de public au lieu de build.

Comme le dit la documentation, %PUBLIC_URL% est remplacé lorsque vous générez le projet.

En supposant que vous avez utilisé create-react-app, assurez-vous que vous exécutez npm run build et hébergeant les fichiers du répertoire build.

4
Smarticles101