Как заменить% PUBLIC_URL% в приложении реакции на веб-сайте Azure - PullRequest
Новая
       26

Как заменить% PUBLIC_URL% в приложении реакции на веб-сайте Azure

0 голосов
/ 09 ноября 2018

У меня есть приложение реагирования, которое отлично работает локально, при развертывании его в Azure у меня возникает несколько 404 ошибок в index.html

Все они с тегом% PUBLIC_URL%

Согласно документации, они будут заменены в процессе сборки, но не уверены, как это сделать, поэтому при развертывании правильные URL-адреса будут введены на место 

<!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/react-instantsearch-theme-algolia@4.0.0/style.min.css">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/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>

Ответы [ 2 ]

0 голосов
/ 18 ноября 2018

КАК ЗАМЕНИТЬ% PUBLIC_URL%

По умолчанию приложение Create React создает сборку, если ваше приложение размещено в корневом каталоге сервера. example.com Если ваш веб-сайт не обслуживается из этого корня (возможно, вы хотите обслуживать с example.com/relativepath, вы можете переопределить это, указав домашнюю страницу в вашем package.json 

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

Это позволит Create React App правильно определить корневой путь для использования в сгенерированном HTML-файле.

Однако в вашем случае, я думаю, вы получите ошибку 404, потому что Azure пытается найти index.html (или какой-то другой index. * Named). Чтобы это исправить, Azure необходимо знать, как передать намеченный маршрут к единственному index.html, расположенному в корне сайта. Создайте новый файл с именем web.config внутри папки /site/wwwroot со следующим содержимым: 

<?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>

Это скажет Azure переписать все URL, как если бы они указывали на наш корневой файл, и наше приложение SPA может правильно обрабатывать ссылки.

Ссылки:

Надеюсь, это поможет вам

0 голосов
/ 14 ноября 2018

Это похоже на индексный файл, взятый из public вместо build.

Как сказано в документации, %PUBLIC_URL% заменяется при сборке проекта.

Предполагая, что вы использовали create-react-app, убедитесь, что вы используете npm run build и размещаете файлы из каталога build.

...