Menyebarkan aplikasi membuat reaksi-reaksi ke Microsoft Azure

Menggunakan aplikasi React ke Microsoft Azure kelihatan mudah, tetapi kerumitan tersembunyi wujud. Panduan ini memberi tumpuan kepada penggunaan RE-app-app (atau rangka kerja front-end yang sama dengan menggunakan PushState Routing) kepada Azure, meminimumkan konflik penghalaan klien-pelayan.

Anekdot ringkas menggambarkan cabaran-cabaran: Dalam projek terdahulu dengan reaksi front-end dan ASP.NET teras back-end yang dikerahkan secara berasingan ke Azure, Page Refreshes menghasilkan 404 kesilapan disebabkan oleh routing misconfigurations. Ini menyerlahkan keperluan untuk konfigurasi sisi pelayan yang betul untuk mengendalikan penghalaan sisi klien.

React React Production dibina

Membina aplikasi React untuk pengeluaran (menggunakan npm run build ) Mewujudkan folder build yang dioptimumkan yang mengandungi aset statik. Menggunakan folder ini ke pelayan cukup untuk aplikasi langsung. Struktur biasanya menyerupai:

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

Routing sisi pelanggan dengan Router React

React Router memanfaatkan API Pushstate HTML5. PushState mengemas kini URL tanpa tambah nilai halaman penuh, membolehkan penghalaan sisi klien. Walau bagaimanapun, ini memberikan cabaran apabila menggunakan pelayan. Pelayan standard mengharapkan untuk mencari fail yang sepadan dengan laluan URL; Dengan penghalaan klien, ini tidak berlaku. Pelayan mesti dikonfigurasi untuk berkhidmat index.html untuk semua laluan.

Express.js, sebagai contoh, memerlukan konfigurasi ini:

 app.get ('*', (req, res) => {
  res.sendFile (path.resolve (__ dirname, 'client', 'binaan', 'index.html'));
});

Ini mengandaikan aplikasi React dihoskan di akar pelayan. Untuk projek front-end dan back-end berasingan, pendekatan ini bermasalah. Oleh kerana kami menggunakan aplikasi statik, back-end tidak diperlukan dengan ketat.

Penyebaran Perkhidmatan Aplikasi Azure

Untuk menggunakan Azure:

1. Buat perkhidmatan aplikasi baru di portal Azure.
2. Navigasi ke pusat penempatan. Kami akan menggunakan git tempatan dengan Kudu sebagai pembekal binaan.
3. Azure menyediakan URL jauh Git; klon ini secara tempatan.
4. Selepas membina aplikasi React ( npm run build ), memulakan repositori Git dalam folder build , melakukan perubahan, dan tolak ke Azure Remote.

Secara kritis, pastikan package.json anda menentukan versi Node.js yang disokong untuk Azure (periksa versi yang tersedia menggunakan az webapp list-runtimes ). Tambah garis seperti "engines": {"node": "10.0"} .

Penggunaan awal mungkin gagal pada halaman menyegarkan kerana ralat 404.

Mendamaikan penghalaan pelayan klien di Azure

Untuk menyelesaikannya, tambahkan fail web.config ke folder build :

  xml version = "1.0"?>
<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>

Membina semula dan Redeploy. Permohonan kini berfungsi dengan betul. Untuk penempatan yang berterusan, terokai ciri integrasi berterusan/berterusan Azure (CI/CD).

Kesimpulan

Azure menawarkan keupayaan yang mantap untuk menggunakan aplikasi React. Memahami interaksi penghalaan pelanggan-pelayan adalah kunci kepada penyebaran yang berjaya. Sumber lanjut mengenai penggunaan Kudu, Node.js, dan penempatan tapak statik di Azure disyorkan untuk pemahaman yang lebih mendalam.

Atas ialah kandungan terperinci Menyebarkan aplikasi membuat reaksi-reaksi ke Microsoft Azure. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!