web-dev-qa-db-ja.com

Azure Webサイトの反応アプリで％PUBLIC_URL％を置き換える方法

ローカルで完全に正常に動作する反応アプリがあり、それをAzureにデプロイすると、index.htmlでいくつかの404エラーが発生します

タグ％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/[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

％PUBLIC_URL％を置き換える方法

デフォルトでは、Create Reactアプリは、アプリがサーバールートでホストされていると想定してビルドを生成します。example.comウェブサイトがこのルートから提供されない場合、 example.com/relativepathから、package.jsonでホームページを指定することでこれをオーバーライドできます

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

これにより、Create Reactアプリは、生成されたHTMLファイルで使用するルートパスを正しく推測できます。

ただし、あなたの場合、Azureがindex.html（または他のindex。*という名前）を見つけようとしているため、404エラーが発生すると思います。これを修正するには、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アプリケーションがリンクを正しく処理できるようになります。

参照：

これがお役に立てば幸いです

4
Tatsu

これは、publicではなくbuildから取得されたインデックスファイルのようです。

ドキュメントが言うように、%PUBLIC_URL%は、プロジェクトをビルドすると置き換えられます。

create-react-app、実行していることを確認してくださいnpm run buildおよびbuildディレクトリのファイルをホストします。

4
Smarticles101