Bagikan melalui

Menyebarkan aplikasi web Anda ke Azure Static Web Apps

  • Artikel

Dalam artikel ini, Anda membuat aplikasi web baru dengan kerangka kerja pilihan Anda, menjalankannya secara lokal, lalu menyebarkannya ke Azure Static Web Apps.

Prasyarat

Untuk menyelesaikan tutorial ini, Anda perlu:

Sumber daya Deskripsi
Langganan Azure Jika Anda tidak memilikinya, Anda dapat membuatnya secara gratis.
Node.js Instal versi 20.0 atau yang lebih baru.
Azure CLI Instal versi 2.6x atau yang lebih baru.

Anda juga memerlukan editor teks. Untuk bekerja dengan Azure, Visual Studio Code disarankan.

Anda dapat menjalankan aplikasi yang Anda buat di artikel ini di platform pilihan Anda termasuk: Linux, macOS, Windows, atau Subsistem Windows untuk Linux.

Membuat aplikasi web Anda

  1. Buka jendela terminal.

  1. Pilih direktori yang sesuai untuk kode Anda, lalu jalankan perintah berikut.

    npm create vite@latest swa-vanilla-demo -- --template=vanilla
cd swa-vanilla-demo
npm install
npm run dev

    Saat Anda menjalankan perintah ini, server pengembangan mencetak URL situs web Anda. Pilih tautan untuk membukanya di browser default Anda.

    Cuplikan layar aplikasi web vanilla yang dihasilkan.

  1. Pilih direktori yang sesuai untuk kode Anda, lalu jalankan perintah berikut.

    npx --package @angular/cli@latest ng new swa-angular-demo --ssr=false --defaults
cd swa-angular-demo
npm start

    Saat Anda menjalankan perintah ini, server pengembangan mencetak URL situs web Anda. Pilih tautan untuk membukanya di browser default Anda.

    Cuplikan layar aplikasi web sudut yang dihasilkan.

  1. Pilih direktori yang sesuai untuk kode Anda, lalu jalankan perintah berikut.

    npm create vite@latest swa-react-demo -- --template react
cd swa-react-demo
npm install
npm run dev

    Saat Anda menjalankan perintah ini, server pengembangan mencetak URL situs web Anda. Pilih tautan untuk membukanya di browser default Anda.

    Cuplikan layar aplikasi web react yang dihasilkan.

  1. Pilih direktori yang sesuai untuk kode Anda, lalu jalankan perintah berikut.

    npm create vite@latest swa-vue-demo -- --template vue
cd swa-vue-demo
npm install
npm run dev

    Saat Anda menjalankan perintah ini, server pengembangan mencetak URL situs web Anda. Pilih tautan untuk membukanya di browser default Anda.

    Cuplikan layar aplikasi web Vue yang dihasilkan.

  1. Pilih Cmd/Ctrl+C untuk menghentikan server pengembangan.

Membuat aplikasi web statis di Azure

Anda dapat membuat aplikasi web statis menggunakan portal Azure, Azure CLI, Azure PowerShell, atau Visual Studio Code (dengan ekstensi Azure Static Web Apps). Tutorial ini menggunakan Azure CLI.

  1. Masuk ke Azure CLI:

    az login

    Secara default, perintah ini membuka browser untuk menyelesaikan proses. Azure CLI mendukung berbagai metode untuk masuk jika metode ini tidak berfungsi di lingkungan Anda.

  2. Jika Anda memiliki beberapa langganan, Anda mungkin perlu memilih langganan. Anda bisa menampilkan langganan Anda saat ini menggunakan perintah berikut:

    az account show

    Untuk memilih langganan, Anda dapat menjalankan az account set perintah .

    az account set --subscription "<SUBSCRIPTION_NAME_OR_ID>"

  3. Buat grup sumber daya.

    Grup sumber daya digunakan untuk mengelompokkan sumber daya Azure bersama-sama.

    az group create -n swa-tutorial -l centralus --query "properties.provisioningState"

    Parameter -n mengacu pada nama situs, dan parameternya -l adalah nama lokasi Azure. Perintah menyimpulkan dengan --query "properties.provisioningState" sehingga perintah hanya mengembalikan pesan keberhasilan atau kesalahan.

  4. Buat aplikasi web statis di grup sumber daya yang baru dibuat.

    az staticwebapp create -n swa-demo-site -g swa-tutorial --query "defaultHostname"

    Parameter -n mengacu pada nama situs, dan -g parameter mengacu pada nama grup sumber daya Azure. Pastikan Anda menentukan nama grup sumber daya yang sama seperti pada langkah sebelumnya. Aplikasi web statis Anda didistribusikan secara global, sehingga lokasi tidak penting untuk cara Anda menyebarkan aplikasi.

    Perintah dikonfigurasi untuk mengembalikan URL aplikasi web Anda. Anda dapat menyalin nilai dari jendela terminal ke browser untuk melihat aplikasi web yang disebarkan.

Mengonfigurasi untuk penyebaran

  1. staticwebapp.config.json Tambahkan file ke kode aplikasi Anda dengan konten berikut:

    {
    "navigationFallback": {
        "rewrite": "/index.html"
    }
}

    Menentukan rute fallback memungkinkan situs Anda untuk server index.html file untuk setiap permintaan yang dibuat terhadap domain.

    Periksa file ini ke dalam sistem kontrol kode sumber Anda (seperti git) jika Anda menggunakannya.

  2. Instal Azure Static Web Apps (SWA) CLI di proyek Anda.

    npm install -D @azure/static-web-apps-cli

    SWA CLI membantu Anda mengembangkan dan menguji situs Anda secara lokal sebelum Anda menyebarkannya ke cloud.

  3. Buat file baru untuk proyek Anda dan beri nama swa-cli.config.json.

    File menjelaskan swa-cli.config.json cara membangun dan menyebarkan situs Anda.

    Setelah file ini dibuat, Anda dapat menghasilkan kontennya menggunakan npx swa init perintah .

    npx swa init --yes

  4. Bangun aplikasi Anda untuk distribusi.

    npx swa build

  5. Gunakan SWA CLI untuk masuk ke Azure.

    npx swa login --resource-group swa-tutorial --app-name swa-demo-site

    Gunakan nama grup sumber daya yang sama dan nama aplikasi web statis yang Anda buat di bagian sebelumnya. Saat Anda mencoba masuk, browser terbuka untuk menyelesaikan proses jika perlu.

Peringatan

Angular v17 dan yang lebih baru menempatkan file yang dapat didistribusikan dalam subdirektori jalur output yang dapat Anda pilih. SWA CLI tidak tahu lokasi direktori tertentu. Langkah-langkah berikut menunjukkan kepada Anda cara mengatur jalur ini dengan benar.

Temukan file index.html yang dihasilkan di proyek Anda di folder dist/swa-angular-demo/browser.

  1. Atur SWA_CLI_OUTPUT_LOCATION variabel lingkungan ke direktori yang berisi file index.html :

    export SWA_CLI_OUTPUT_LOCATION="dist/swa-angular-demo/browser"

Menyebarkan situs Anda ke Azure

Sebarkan kode Anda ke aplikasi web statis Anda:

npx swa deploy --env production

Mungkin perlu beberapa menit untuk menyebarkan aplikasi. Setelah selesai, URL situs Anda ditampilkan.

Cuplikan layar perintah sebarkan.

Pada sebagian besar sistem, Anda dapat memilih URL situs untuk membukanya di browser default Anda.

Membersihkan sumber daya (opsional)

Jika Anda tidak melanjutkan tutorial lain, hapus grup sumber daya dan sumber daya Azure:

az group delete -n swa-tutorial

Saat menghapus grup sumber daya, Anda menghapus semua sumber daya yang ada di dalamnya. Anda tidak dapat membatalkan tindakan ini.

Langkah berikutnya

Menambahkan autentikasi

Konten terkait