Gambaran umum penyebaran aplikasi JavaScript ke Azure

Untuk menyebarkan aplikasi berbasis JavaScript ke Azure, Anda memindahkan file atau sekumpulan file ke Azure untuk dilayani melalui titik akhir HTTP. Proses pemindahan file disebut penyebaran.

Prasyarat

• Langganan Azure - buat langganan secara gratis.
• Node.js LTS.
• Akun GitHub jika Anda berencana untuk menyebarkan dari repositori GitHub.

Alat penerapan

Azure menawarkan berbagai alat penyebaran agar sesuai dengan kebutuhan yang berbeda. Berikut adalah beberapa metode umum:

Alat penyebaran lain ada, berdasarkan layanan tertentu. Misalnya, layanan aplikasi Azure mendukung berbagai alat penyebaran:

• Dari file ZIP
• Dengan FTP
• Dropbox atau OneDrive
• Git Lokal
• cURL
• SSH

Anda dapat menyebarkan ulang ke layanan Aplikasi menggunakan salah satu metode yang disediakan meskipun Anda tidak menggunakan metode tersebut untuk menyebarkan awalnya. Anda mungkin perlu melakukan beberapa konfigurasi sebelum menerapkan ulang jika Anda beralih ke metode lain.

Layanan hosting Azure untuk aplikasi JavaScript

Mulailah dengan memilih layanan hosting yang paling cocok dengan aplikasi Anda. Setelah Anda memilih layanan, gunakan jalur penyebaran yang direkomendasikan untuk mendapatkan tutorial yang tepat lebih cepat.

Untuk informasi selengkapnya tentang memilih layanan hosting yang tepat, lihat Menghosting aplikasi di Azure.

Metode penerapan menggunakan alat

Setelah Anda memilih layanan hosting, pilih metode penyebaran yang sesuai dengan cara Kerja Anda.

• Build sebelum penyebaran: Untuk build yang kompleks atau panjang, kemas aplikasi Anda ke dalam file zip dan sebarkan. Paket penyebaran memungkinkan Anda mengontrol dan menguji build sebelum penyebaran.
• Build selama penyebaran: Untuk build yang lebih sederhana, gunakan variabel lingkungan yang disediakan Azure SCM_DO_BUILD_DURING_DEPLOYMENT=true untuk melakukan build pada aplikasi Anda selama penyebaran.

Jika Anda menyebarkan ke App Service, metode penyebaran lainnya juga tersedia:

Slot penyebaran di Azure App Service memungkinkan Anda membuat lingkungan terpisah untuk penahapan dan produksi. Penggunaan slot memungkinkan Anda menguji aplikasi di lingkungan penahapan sebelum menukarnya dengan slot produksi, memastikan penyebaran yang lancar dan bebas kesalahan. Pelajari lebih lanjut tentang slot penyebaran.

Jangan gunakan slot penyebaran untuk mencampur tujuan penyebaran. Semua slot penyebaran berbagi layanan aplikasi sehingga Anda perlu memastikan pola lalu lintas dan penggunaan semua slot yang dimaksudkan sama. Jika Anda memerlukan lingkungan uji atau tahap yang dihosting, itu seharusnya menjadi layanan aplikasi yang terpisah.

Menyebarkan dengan Azure Developer CLI

Untuk jalur end-to-end tercepat untuk menyediakan sumber daya Azure dan menyebarkan aplikasi Anda, mulailah dengan Azure Developer CLI (azd).

Azure Developer CLI menyederhanakan proses penyebaran aplikasi Anda ke Azure. Ikuti langkah-langkah berikut:

1. Instal Azure Developer CLI.

2. Temukan proyek yang sudah ada yang menggunakan banyak sumber daya yang sama dengan yang digunakan proyek Anda.

3. Inisialisasi versi lokal proyek untuk digunakan sebagai templat infrastruktur untuk proyek Anda sendiri.

4. Buat sumber daya dan sebarkan kode ke Azure.

   azd auth login
   azd init --template <template-name>
   azd up
   

Gunakan jalur ini saat Anda menginginkan satu alur kerja untuk infrastruktur, penyebaran, dan lingkungan yang dapat diulang.

Menyebarkan dengan Visual Studio Code

Jika Anda menginginkan alur penyebaran terpandu di editor Anda, gunakan ekstensi Azure untuk Visual Studio Code.

Untuk menyebarkan atau menyebarkan ulang aplikasi App Service Anda dengan menggunakan Visual Studio Code, selesaikan langkah-langkah berikut:

1. Instal ekstensi Azure terkait, seperti Azure App Service atau Azure Functions.

2. Buka penjelajah Azure. Pilih ikon Azure di bilah sisi utama atau gunakan pintasan keyboard (Shift + Alt + A).

3. Di grup Sumber Daya, pilih langganan dan layanan Anda.

4. Klik kanan layanan Anda lalu pilih Sebarkan ke Aplikasi Web....

   

Langkah berikutnya khusus layanan

Setelah Anda memilih layanan hosting dan metode penyebaran, lanjutkan dengan jalur khusus layanan yang cocok dengan aplikasi Anda.

Terapkan ke Azure Static Web Apps

Azure Static Web Apps sangat ideal untuk aplikasi web modern yang dibangun dengan kerangka kerja JavaScript. Untuk mengimplementasikan:

1. Instal ekstensi Azure Static Web Apps untuk Visual Studio Code.
2. Bangun aplikasi Anda secara lokal untuk memastikan aplikasi berfungsi seperti yang diharapkan.
3. Di Visual Studio Code, buka Azure explorer, dan temukan Azure Static Web Apps.
4. Klik kanan langganan Anda, lalu pilih Buat Aplikasi Web Statis.
5. Ikuti perintah untuk menyambungkan repositori GitHub Anda. Azure secara otomatis membuat alur kerja GitHub Actions.
6. Dorong perubahan ke repositori Anda untuk memicu penyebaran otomatis.

Untuk detail selengkapnya, lihat Menyebarkan aplikasi web Anda ke Azure Static Web Apps.

Menyebarkan ke Azure App Service

Azure App Service cocok ketika Anda memerlukan hosting terkelola untuk aplikasi web atau API. Anda dapat menyebarkan dengan menggunakan azd, Visual Studio Code, Azure CLI, atau GitHub Actions.

Anda dapat menyebarkan ulang ke App Service Anda dengan menggunakan salah satu metode yang tersedia, bahkan jika Anda tidak menggunakan metode tersebut untuk awalnya menyebarkan. Anda mungkin memerlukan beberapa konfigurasi sebelum menyebarkan ulang jika Anda beralih metode.

Untuk jalur penyebaran khusus layanan, mulailah dengan salah satu tutorial berikut:

• Menyebarkan aplikasi web Node.js dan MongoDB ke Azure App Service
• Menyebarkan ke App Service dengan menggunakan GitHub Actions
• Menyebarkan ke App Service dari paket ZIP

Menyebarkan dengan Azure CLI

Untuk menyebarkan aplikasi JavaScript Anda dengan menggunakan Azure CLI, ikuti langkah-langkah berikut:

1. Instal Azure CLI jika Anda belum memilikinya.

2. Masuk ke akun Azure Anda.

   az login
   

3. Membuat atau menggunakan paket App Service dan layanan aplikasi yang ada.

   az appservice plan create --name <plan-name> --resource-group <resource-group> --sku B1 --is-linux
   az webapp create --resource-group <resource-group> --plan <plan-name> --name <app-name> --runtime "NODE|20-lts"
   

4. Sebarkan kode aplikasi Anda sebagai file ZIP atau dari repositori Git lokal.

   Untuk penyebaran ZIP:

   az webapp deployment source config-zip --resource-group <resource-group> --name <app-name> --src <path-to-zip>
   

   Untuk penyebaran Git lokal:

   az webapp deployment source config-local-git --resource-group <resource-group> --name <app-name>
   az webapp config appsettings set --resource-group <resource-group> --name <app-name> --settings DEPLOYMENT_BRANCH='main'
   git remote add azure <git-url>
   git push azure main
   

Menerapkan dengan GitHub Actions

GitHub Actions mengotomatiskan proses penyebaran setiap kali Anda mendorong perubahan ke repositori GitHub Anda. Untuk menyiapkan GitHub Actions untuk deployment ke Azure:

1. Di repositori GitHub Anda, buat direktori .github/workflows/ jika belum ada.

2. Buat file alur kerja (misalnya, azure-deploy.yml) yang menentukan langkah-langkah penyebaran Anda.

3. Gunakan tindakan masuk Azure untuk mengautentikasi dengan Azure. Direkomendasikan: Gunakan OpenID Connect (OIDC) untuk keamanan yang ditingkatkan alih-alih menyimpan kredensial sebagai rahasia.

   Opsi A: OpenID Connect (disarankan)

   permissions:
     id-token: write
     contents: read
   
   - name: Azure Login
     uses: azure/login@v2
     with:
       client-id: ${{ secrets.AZURE_CLIENT_ID }}
       tenant-id: ${{ secrets.AZURE_TENANT_ID }}
       subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
   
   - name: Deploy to Azure Web App
     uses: azure/webapps-deploy@v3
     with:
       app-name: <app-name>
       package: '.'
   

   Untuk instruksi penyiapan, lihat Mengonfigurasi OpenID Connect dengan GitHub Actions.

   Opsi B: Autentikasi berbasis kredensial (warisan)

   - name: Azure Login
     uses: azure/login@v2
     with:
       creds: ${{ secrets.AZURE_CREDENTIALS }}
   
   - name: Deploy to Azure Web App
     uses: azure/webapps-deploy@v3
     with:
       app-name: <app-name>
       package: '.'
   

4. Tambahkan langkah-langkah penyebaran yang sesuai untuk layanan hosting Anda (App Service, Static Web Apps, atau Aplikasi Kontainer).

5. Terapkan dan dorong file alur kerja ke repositori Anda untuk mengaktifkan penyebaran otomatis.

Untuk panduan selengkapnya, lihat Menyebarkan dengan GitHub Actions.

Menyebarkan ke Azure Functions

Azure Functions cocok untuk aplikasi JavaScript berbasis peristiwa dan API tanpa server.

Untuk menyebarkan dari Visual Studio Code:

1. Instal ekstensi Azure Functions.
2. Buka Azure explorer, dan pilih langganan Azure Anda.
3. Buat atau pilih aplikasi fungsi Anda.
4. Gunakan perintah ekstensi untuk menerbitkan proyek lokal Anda.

Untuk panduan layanan, lihat dokumentasi Azure Functions dan Ringkasan Fungsi.

Menyebarkan ke Azure Container Apps

Azure Container Apps menyediakan hosting kontainer tanpa server untuk aplikasi JavaScript. Untuk mengimplementasikan:

1. Kontainerisasi aplikasi Anda dengan menggunakan Docker. Buat Dockerfile di direktori root proyek Anda.
2. Buat dan uji kontainer Anda secara lokal.
3. Dorong gambar kontainer Anda ke Azure Container Registry.
4. Gunakan ekstensi Azure Container Apps atau Azure CLI untuk membuat dan menyebarkan aplikasi kontainer Anda.

Untuk panduan lengkapnya, lihat Gambaran umum JavaScript di Azure Container Apps.

Langkah-langkah membangun

Setelah Anda memilih layanan dan jalur penyebaran, putuskan kapan build harus terjadi.

Bergantung pada kompleksitas aplikasi dan kebutuhan penyebaran, Anda dapat memilih untuk membangun aplikasi JavaScript anda baik sebelum atau selama penyebaran:

• Build sebelum penyebaran: Untuk build yang kompleks atau panjang, kemas aplikasi Anda ke dalam file zip dan sebarkan. Paket penyebaran memberi Anda kontrol atas proses build dan memungkinkan Anda mengujinya sebelum penyebaran.
• Bangun selama penyebaran: Untuk build yang lebih sederhana, gunakan variabel SCM_DO_BUILD_DURING_DEPLOYMENT=true lingkungan yang disediakan Azure untuk membangun aplikasi Anda selama penyebaran.

Slot penggunaan

Gunakan slot penyebaran setelah Anda memiliki aplikasi App Service yang sedang berjalan dan memerlukan proses rilis yang lebih aman.

Slot penyebaran di Azure App Service memungkinkan Anda membuat lingkungan terpisah untuk penahapan dan produksi. Dengan menggunakan slot, Anda dapat menguji aplikasi di lingkungan penahapan sebelum menukarnya dengan slot produksi, memastikan penyebaran yang lancar dan bebas kesalahan.

Jangan gunakan slot penyebaran untuk mencampur tujuan penyebaran. Semua slot deployment menggunakan App Service yang sama, jadi Anda perlu memastikan bahwa pola lalu lintas dan tujuan penggunaan semua slot adalah sama. Jika Anda memerlukan lingkungan pengujian atau tahap yang dihosting, gunakan App Service terpisah.

Menyambungkan ke lingkungan yang dihosting di Azure Anda

• Untuk akses manual atau sesekali ke lingkungan yang dihosting, lihat cara melihat file di lingkungan yang dihosting Azure Anda.
• Untuk akses otomatis atau konsisten, pertimbangkan menyiapkan salah satu metode penyebaran.

Menampilkan file di lingkungan yang dihosting Azure

Ada beberapa cara untuk segera melihat file di aplikasi Web Azure atau aplikasi Fungsi yang dihosting. Jika Anda menggunakan slot di sumber daya yang dihosting, Anda perlu memastikan Anda berada di slot yang benar sebelum melihat file.

• Lihat file di portal Azure - pilih Console di bawah Development tools untuk sumber daya hosting Anda.

• Lihat file di ekstensi Visual Studio Code - pilih ikon Azure di bilah Aktivitas. Di bagian Sumber Daya, pilih langganan dan layanan Anda. Simpul File menyediakan tampilan berkas jarak jauh Anda.

  • ekstensi Azure App Service dan Azure Functions keduanya menyediakan tampilan file jarak jauh.

  

Menampilkan titik akhir HTTP di portal Microsoft Azure

Lihat titik akhir HTTP Anda dari halaman Gambaran Umum layanan di portal Microsoft Azure.

Konten terkait

• Tutorial penyebaran menggunakan Visual Studio Code
• Hosting aplikasi di Azure
• Dokumentasi Azure Static Web Apps
• Dokumentasi Azure Container Apps
• Dokumentasi Azure App Service
• Dokumentasi Azure Functions