برنامه نویسی

ورزش 09 – CDN را با ماژول های BICEP اضافه کنید (سبک اختیاری!)

🚀 “وب سایت Toy Wombat به CDN نیاز دارد!”

“تیم های دیگر به آن احتیاج ندارند.”

من: “مشکلی نیست – من آن را می سازم اختیاری. “


🎯 مأموریت

ما در حال راه اندازی یک وب سایت برای اسباب بازی جدید Wombat هستیم – و برای رسیدگی به سنبله های ترافیکی ، ما اضافه خواهیم کرد شبکه تحویل محتوا (CDN)بشر

اما … فقط در صورت لزومبشر تیم های دیگر می توانند از آن پرش کنند.

بنابراین بیایید این هوشمند و قابل استفاده مجدد را بسازیم:

  • 📦 استفاده کنید ماژول برای سرویس برنامه و CDN
  • cdn را درست کنید اختیاری
  • 🌍 بسته به آنچه مستقر شده است ، نام میزبان سمت راست را خروجی کنید

🧱 مرحله 1: ماژول برنامه را ایجاد کنید

در کد VS:

  1. پوشه ای به نام ایجاد کنید modules
  2. در داخل آن ، یک پرونده ایجاد کنید: app.bicep

چسباندن در این منطق:

@description('The Azure region into which the resources should be deployed.')
param location string

@description('The name of the App Service app.')
param appServiceAppName string

@description('The name of the App Service plan.')
param appServicePlanName string

@description('The name of the App Service plan SKU.')
param appServicePlanSkuName string

resource appServicePlan 'Microsoft.Web/serverfarms@2024-04-01' = {
  name: appServicePlanName
  location: location
  sku: {
    name: appServicePlanSkuName
  }
}

resource appServiceApp 'Microsoft.Web/sites@2024-04-01' = {
  name: appServiceAppName
  location: location
  properties: {
    serverFarmId: appServicePlan.id
    httpsOnly: true
  }
}

@description('The default host name of the App Service app.')
output appServiceAppHostName string = appServiceApp.properties.defaultHostName
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

این چه کاری انجام می دهد:

این برنامه یک برنامه خدمات برنامه اصلی + برنامه را می چرخاند. نام میزبان برنامه را خروجی می کند.


💻 مرحله 2: الگوی اصلی خود را تنظیم کنید

فایلی به نام ایجاد کنید main.bicepبشر

این پارامترها را اضافه کنید:

param location string = 'westus3'
param appServiceAppName string = 'toy-${uniqueString(resourceGroup().id)}'
param appServicePlanSkuName string = 'F1'
param deployCdn bool = true
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

یک متغیر اضافه کنید:

var appServicePlanName="toy-product-launch-plan"
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید


🧩 مرحله 3: از ماژول برنامه استفاده کنید

هنوز در main.bicep، این ماژول را وارد کنید:

module app 'modules/app.bicep' = {
  name: 'toy-launch-app'
  params: {
    appServiceAppName: appServiceAppName
    appServicePlanName: appServicePlanName
    appServicePlanSkuName: appServicePlanSkuName
    location: location
  }
}
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید


🌐 مرحله 4: ماژول CDN را ایجاد کنید

یک فایل جدید در داخل ایجاد کنید modules فراخوانی cdn.bicepبشر

این کد را جایگذاری کنید:

param originHostName string
param profileName string = 'cdn-${uniqueString(resourceGroup().id)}'
param endpointName string = 'endpoint-${uniqueString(resourceGroup().id)}'
param httpsOnly bool

var originName="my-origin"

resource cdnProfile 'Microsoft.Cdn/profiles@2024-09-01' = {
  name: profileName
  location: 'global'
  sku: {
    name: 'Standard_Microsoft'
  }
}

resource endpoint 'Microsoft.Cdn/profiles/endpoints@2024-09-01' = {
  parent: cdnProfile
  name: endpointName
  location: 'global'
  properties: {
    originHostHeader: originHostName
    isHttpAllowed: !httpsOnly
    isHttpsAllowed: true
    queryStringCachingBehavior: 'IgnoreQueryString'
    contentTypesToCompress: [
      'text/plain'
      'text/html'
      'text/css'
      'application/x-javascript'
      'text/javascript'
    ]
    isCompressionEnabled: true
    origins: [
      {
        name: originName
        properties: {
          hostName: originHostName
        }
      }
    ]
  }
}

output endpointHostName string = endpoint.properties.hostName
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

این چه کاری انجام می دهد:

این یک پروفایل CDN + نقطه پایانی ایجاد می کند و به برنامه شما اشاره می کند. نام میزبان CDN را خروجی می کند.


🧩 مرحله 5: از ماژول CDN (با یک شرط) استفاده کنید

در پشت main.bicep، ماژول CDN را اضافه کنید:

module cdn 'modules/cdn.bicep' = if (deployCdn) {
  name: 'toy-launch-cdn'
  params: {
    httpsOnly: true
    originHostName: app.outputs.appServiceAppHostName
  }
}
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

💡 این فقط اجرا می شود اگر deployCdn درست استبشر


📦 مرحله 6: نام میزبان راست را خروجی کنید

حال ، بیایید URL صحیح را بر اساس اینکه آیا CDN روشن است ، به کاربر بدهیم:

output websiteHostName string = deployCdn ? cdn.outputs.endpointHostName : app.outputs.appServiceAppHostName
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید


✅ نهایی main.bicep عکس فوری

param location string = 'westus3'
param appServiceAppName string = 'toy-${uniqueString(resourceGroup().id)}'
param appServicePlanSkuName string = 'F1'
param deployCdn bool = true

var appServicePlanName="toy-product-launch-plan"

module app 'modules/app.bicep' = {
  name: 'toy-launch-app'
  params: {
    appServiceAppName: appServiceAppName
    appServicePlanName: appServicePlanName
    appServicePlanSkuName: appServicePlanSkuName
    location: location
  }
}

module cdn 'modules/cdn.bicep' = if (deployCdn) {
  name: 'toy-launch-cdn'
  params: {
    httpsOnly: true
    originHostName: app.outputs.appServiceAppHostName
  }
}

output websiteHostName string = deployCdn ? cdn.outputs.endpointHostName : app.outputs.appServiceAppHostName
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید


🚀 آن را مستقر کنید!

مطمئن شوید که آماده هستید:

az bicep install && az bicep upgrade
az login
az group create --name BicepRG --location westus3
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

سپس استقرار:

az deployment group create \
  --resource-group BicepRG \
  --name main \
  --template-file main.bicep
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید


🔎 استقرار را بررسی کنید

در پورتال لاجورد:

  • رفتن به گروه های منابع> biceprg
  • رفتن به استقرار> اصلی
  • آن را گسترش دهید تا هر دو ماژول را ببینید: toy-launch-app و (در صورت فعال بودن) toy-launch-cdn
  • خروجی ها را بررسی کنید:
    • اگر CDN فعال باشد ، شما دریافت خواهید کرد نام میزبان CDN
    • در غیر این صورت ، شما دریافت می کنید نام میزبان سرویس برنامه

هر دو را در مرورگر امتحان کنید (اضافه کنید https:// در جلو)!

📌 CDN ممکن است یک دقیقه طول بکشد – اگر فوراً بارگیری نشود ، فقط صبر کنید و دوباره امتحان کنید.


🧠 به طور خلاصه

نشان کاری که ما انجام دادیم
ماژول برنامه برنامه خدمات برنامه قابل استفاده مجدد + استقرار برنامه
ماژول CDN یک لایه حافظه پنهان در سطح جهانی ایجاد کرد
ماژول شرطی CDN را فقط در صورت لزوم مستقر کرد
خروجی هوشمند به طور خودکار URL عمومی صحیح را برگردانید

آیا می خواهید سفر یادگیری لاجورد من را دنبال کنید؟

به اطراف خود بچسبید – من همه آن را به اشتراک می گذارم ، برنده ها و لک ها شامل 😄

شما می توانید من را در LinkedIn پیدا کنید – برای من پیام دهید و فقط سلام کنید

دوست دارم آنچه را که روی آن کار می کنید بشنوید یا یاد بگیرید!

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا