クライアント側のレンダリングされたCreate-React-AppをMicrosoft Azureに展開します

Microsoft AzureへのReactアプリケーションの展開は簡単に見えますが、隠された複雑さが存在します。このガイドでは、Create-React-App（またはPushStateルーティングを使用した同様のフロントエンドフレームワーク）をazureに展開し、クライアントサーバールーティングの競合を最小限に抑えることに焦点を当てています。

簡単な逸話は課題を示しています。Azureに個別に展開されたReactフロントエンドとASP.NETのコアバックエンドを備えた以前のプロジェクトでは、ページのリフレッシュは、ルーティングの誤った不明瞭さのために404のエラーをもたらしました。これにより、クライアント側のルーティングを処理するための適切なサーバー側の構成が必要になりました。

生産対応のReactビルド

生産用のReactアプリの構築（ npm run buildを使用）は、静的資産を含む最適化されたbuildフォルダーを作成します。このフォルダーをサーバーに展開するだけで、ライブアプリケーションに十分です。構造は通常、次のように似ています。

 <code>→ build → static → css → css files → js → js files → media → media files → index.html → other files...</code>

Reactルーターを使用したクライアント側のルーティング

ReactルーターはHTML5プッシュステートAPIをレバレッジします。プッシュステートは、フルページのリロードなしでURLを更新し、クライアント側のルーティングを有効にします。ただし、これはサーバーに展開する際の課題を提示します。標準サーバーは、URLパスに一致するファイルを見つけることを期待しています。クライアント側のルーティングでは、そうではありません。サーバーは、すべてのルートにindex.html提供するように構成する必要があります。

たとえば、Express.jsにはこの構成が必要です。

 app.get（ '*'、（req、res）=> {
  res.sendfile（path.resolve（__ dirname、 'client'、 'build'、 'index.html'））;
}）;

これは、Reactアプリがサーバールートでホストされていることを前提としています。別々のフロントエンドとバックエンドのプロジェクトの場合、このアプローチには問題があります。静的アプリを展開しているため、バックエンドは厳密に必要ありません。

Azure Appサービスの展開

Azureに展開するには：

1. Azureポータルで新しいアプリサービスを作成します。
2. 展開センターに移動します。 BuildプロバイダーとしてKuduを使用してローカルGitを使用します。
3. AzureはGitリモートURLを提供します。これをローカルにクローンします。
4. React App（ npm run build ）を構築した後、 buildフォルダーのGITリポジトリを初期化し、変更をコミットし、Azureリモートにプッシュします。

重要なことに、 package.jsonがAzureのサポートされているnode.jsバージョンを指定してください（ az webapp list-runtimesを使用して利用可能なバージョンを確認してください）。 "engines": {"node": "10.0"} 。

404エラーのため、最初の展開がページの更新で失敗する可能性があります。

Azureでのクライアントサーバールーティングの調整

これを解決するには、 web.configファイルをbuildフォルダーに追加します。

 
<configuration>
  <system.webserver>
    <rewrite>
      <rules>
        <rule name="React Routes" stopprocessing="true">
          <match url=".*"></match>
          <conditions logicalgrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchtype="IsFile" negate="true"></add>
            <add input="{REQUEST_FILENAME}" matchtype="IsDirectory" negate="true"></add>
            <add input="{REQUEST_URI}" negate="true" pattern="^/(api)"></add>
          </conditions>
          <action type="Rewrite" url="/"></action>
        </rule>
      </rules>
    </rewrite>
  </system.webserver>
</configuration>

再構築と再展開。アプリケーションが正しく機能するようになりました。継続的な展開については、Azureの継続的な統合/継続的展開（CI/CD）機能を調べてください。

結論

Azureは、Reactアプリケーションを展開するための堅牢な機能を提供します。クライアントサーバーのルーティングインタラクションを理解することは、展開を成功させるための鍵です。 Kudu、node.jsの展開、およびAzureの静的サイトの展開に関するさらなるリソースが、より深い理解のために推奨されます。

以上がクライアント側のレンダリングされたCreate-React-AppをMicrosoft Azureに展開しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。