Create aws-vs-azure.html
· 1 year ago
06d2ca175971fa05aecd8ca2e8748cada09fae9b
Parent:
7ac614f7f
1 file changed +922 −0
- aws-vs-azure.html +922 −0
Diff
--- /dev/null +++ b/aws-vs-azure.html @@ -0,0 +1,922 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="UTF-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + <title>AWS vs Azure: A Cloud Architect's Comparative Cheatsheet</title> + + <link + rel="icon" + href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>☁️</text></svg>" + /> + + <!-- SEO Meta Description --> + <meta + name="description" + content="A comprehensive and interactive cheatsheet comparing AWS and Azure services, philosophies, unique strengths, and resources for cloud architects." + /> + + <!-- Canonical URL (Update this to your actual URL when deployed) --> + <link rel="canonical" href="http://cheatsheets.davidveksler.com/aws-vs-azure.html" /> <!-- Placeholder --> + + <!-- Social Media Metadata --> + <meta property="og:title" content="AWS vs Azure: A Cloud Architect's Comparative Cheatsheet" /> + <meta + property="og:description" + content="Explore AWS and Azure: Side-by-side service comparisons, core philosophies, unique features, and essential learning resources." + /> + <meta property="og:type" content="article" /> + <meta property="og:url" content="http://cheatsheets.davidveksler.com/aws-vs-azure.html" /> <!-- Placeholder --> + <meta property="og:site_name" content="Cloud Cheatsheets" /> + <!-- Placeholder for og:image --> + <!-- <meta property="og:image" content="http://cheatsheets.davidveksler.com/aws-azure-cheatsheet-image.jpg" /> --> + + <meta name="twitter:card" content="summary_large_image" /> + <meta name="twitter:title" content="AWS vs Azure: A Cloud Architect's Comparative Cheatsheet" /> + <meta + name="twitter:description" + content="Explore AWS and Azure: Side-by-side service comparisons, core philosophies, unique features, and essential learning resources." + /> + <!-- Placeholder for twitter:image --> + <!-- <meta name="twitter:image" content="http://cheatsheets.davidveksler.com/aws-azure-cheatsheet-image.jpg" /> --> + + <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" /> + <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css" /> + + <style> + :root { + --bs-body-bg: #f0f2f5; /* Light grey background */ + --bs-primary: #007bff; /* Standard Blue for general links/accents */ + --bs-primary-dark: #0056b3; + --bs-primary-light: #cfe2ff; + --bs-secondary: #6c757d; /* Grey */ + --card-border-color: #cfd8dc; + --card-shadow-color: rgba(0, 123, 255, 0.1); + --text-color-main: #212529; + --text-color-secondary: #495057; + --text-color-highlight: var(--bs-primary-dark); + --blueprint-grid-color: rgba(0, 123, 255, 0.07); + --schema-bg-color: rgba(255, 255, 255, 0.92); + --schema-border-color: #b0bec5; + + /* --- AWS vs Azure Theme Colors --- */ + --theme-color-services: #17a2b8; /* Teal/Info */ + --theme-color-deep-dive: #6f42c1; /* Purple */ + --theme-color-resources: #28a745; /* Green/Success */ + --theme-color-general: #007bff; /* Primary Blue for fallback or general sections */ + + --theme-category-color: var(--theme-color-general); /* Default */ + } + + body { + background-color: var(--bs-body-bg); + background-image: linear-gradient(to right, var(--blueprint-grid-color) 1px, transparent 1px), + linear-gradient(to bottom, var(--blueprint-grid-color) 1px, transparent 1px); + background-size: 80px 80px; + font-family: "Segoe UI", "Roboto", Helvetica, Arial, sans-serif; + padding-bottom: 3rem; + font-size: 16px; + color: var(--text-color-main); + box-sizing: border-box; + } + *, *::before, *::after { box-sizing: inherit; } + + .page-header { + background: linear-gradient(135deg, var(--bs-primary-light), #e0e0e0); + padding: 3rem 1.5rem; + text-align: center; + border-bottom: 4px solid var(--bs-primary); + margin-bottom: 3rem; + position: relative; + z-index: 10; + box-shadow: 0 5px 20px rgba(0, 123, 255, 0.15); + } + .page-header h1 { + color: var(--bs-primary-dark); + font-weight: 600; + letter-spacing: 0.5px; + margin-bottom: 0.75rem; + font-size: 2.8rem; /* Adjusted */ + } + .page-header h1 .bi { + font-size: 1em; + vertical-align: -0.05em; + margin-right: 0.5em; + color: var(--bs-secondary); + } + .page-header .lead { + color: var(--text-color-secondary); + font-size: 1.2rem; /* Adjusted */ + max-width: 850px; + margin: auto; + font-weight: 300; + } + + .schema-container { + background-color: var(--schema-bg-color); + border: 2px solid var(--schema-border-color); + border-radius: 10px; + padding: 1.5rem 1.5rem 0.5rem 1.5rem; + margin-bottom: 3rem; + box-shadow: 0 6px 15px rgba(0, 123, 255, 0.08); + backdrop-filter: blur(4px); + position: relative; + } + + .section-title { + color: #fff; + background-color: var(--theme-category-color); /* Uses the specific section color */ + margin: -2.8rem 0 1.8rem 0; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.1em; + font-size: 1.2rem; + border-bottom: none; + padding: 0.6rem 1.2rem; + display: inline-block; + position: relative; + left: 1.2rem; + z-index: 15; + border: 2px solid var(--schema-border-color); + border-bottom: none; + border-radius: 8px 8px 0 0; + box-shadow: 0 -3px 8px rgba(0, 0, 0, 0.05); + } + + .info-card { + background: #fff; + border: 1px solid var(--card-border-color); + border-radius: 8px; + box-shadow: 0 4px 10px var(--card-shadow-color); + height: 100%; + display: flex; + flex-direction: column; + transition: box-shadow 0.25s ease, transform 0.25s ease; + position: relative; + z-index: 5; + } + .info-card:hover { + box-shadow: 0 7px 18px rgba(0, 123, 255, 0.22); + transform: translateY(-4px); + z-index: 20; + } + .info-card .card-body { + padding: 0; + flex-grow: 1; + display: flex; + flex-direction: column; + } + .info-card h5 { /* Card titles */ + color: #fff; + background-color: var(--theme-category-color); /* Uses the specific section/card color */ + font-size: 1.1rem; /* Adjusted */ + text-align: center; + margin: 0; + padding: 0.9rem 0.8rem; /* Adjusted */ + font-weight: 600; /* Adjusted */ + display: flex; + justify-content: center; + align-items: center; + gap: 0.6rem; /* Adjusted */ + font-family: "Segoe UI Semibold", "Roboto Condensed", Consolas, Menlo, Monaco, "Courier New", monospace; + border-bottom: 1px solid var(--card-border-color); + border-radius: 7px 7px 0 0; + } + .info-card h5 .bi { + font-size: 1.3em; /* Adjusted */ + color: #fff; + opacity: 0.95; + } + .card-content-wrapper { + padding: 1.2rem; /* Adjusted */ + flex-grow: 1; + display: flex; + flex-direction: column; + } + .info-card p.summary { + font-size: 0.95rem; /* Adjusted */ + color: var(--text-color-secondary); + margin-bottom: 1rem; /* Adjusted */ + flex-grow: 1; + line-height: 1.6; /* Adjusted */ + } + + .collapse-content { + font-size: 0.92rem; /* Adjusted */ + border-top: 1px solid #e0e0e0; + padding: 1.2rem; /* Adjusted */ + margin-top: 1rem; + color: var(--text-color-main); + background-color: #fcfdff; + border-radius: 0 0 7px 7px; + } + .collapse-content h6 { + font-weight: 700; + color: var(--text-color-highlight); + margin-top: 1rem; /* Adjusted */ + margin-bottom: 0.4rem; /* Adjusted */ + font-size: 1rem; /* Adjusted */ + } + .collapse-content ul { + padding-left: 0.5rem; + margin-bottom: 1rem; /* Adjusted */ + list-style: none; + } + .collapse-content li { + margin-bottom: 0.7rem; /* Adjusted */ + padding-bottom: 0.7rem; /* Adjusted */ + font-size: 0.9rem; /* Adjusted */ + line-height: 1.55; /* Adjusted */ + border-bottom: 1px dashed #ced4da; + position: relative; + padding-left: 1.8rem; /* Adjusted */ + } + .collapse-content li:last-child { + border-bottom: none; + margin-bottom: 0; + } + .collapse-content li::before { + content: "\F1D7"; /* Bootstrap icon: cloud-fill, or other relevant icon */ + font-family: "bootstrap-icons"; + position: absolute; + left: 0; + top: 3px; /* Adjusted */ + color: var(--theme-category-color); + opacity: 0.85; + font-size: 1.1em; /* Adjusted */ + } + .collapse-content li strong { /* For AWS/Azure labels */ + color: var(--text-color-highlight); + display: inline-block; /* Allow side-by-side if needed */ + margin-bottom: 0.2rem; /* Adjusted */ + font-weight: 600; + } + .collapse-content p { + font-size: 0.92rem; /* Adjusted */ + margin-bottom: 0.7rem; /* Adjusted */ + line-height: 1.6; /* Adjusted */ + } + .collapse-content code, .term { + font-size: 0.88rem; /* Adjusted */ + color: var(--bs-primary-dark); + background-color: var(--bs-primary-light); + padding: 0.2em 0.5em; + border-radius: 4px; + font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; + font-weight: 600; + } + .collapse-content .service-item { /* Custom class for service comparison items */ + margin-bottom: 1rem; + padding-bottom: 1rem; + border-bottom: 1px dashed #e0e0e0; + } + .collapse-content .service-item:last-child { + border-bottom: none; + margin-bottom: 0; + padding-bottom: 0; + } + .collapse-content .service-item strong { /* For AWS/Azure service names */ + display: block; + margin-bottom: 0.2rem; + } + .collapse-content .service-item .platform-label { + font-weight: bold; + color: var(--text-color-secondary); + } + .collapse-content .service-item em { /* For descriptions */ + font-size: 0.85rem; + color: #555; + display: block; + margin-top: 0.25rem; + } + + + .row > * { + margin-bottom: 2.5rem; /* Adjusted */ + } + footer { + padding-top: 3rem; /* Adjusted */ + font-size: 0.92em; /* Adjusted */ + color: #5a6872; + position: relative; + z-index: 10; + text-align: center; + } + footer a { color: var(--bs-primary); } + footer a:hover { color: var(--bs-primary-dark); } + + .details-toggle { + font-size: 0.88rem; /* Adjusted */ + margin-top: auto; + align-self: flex-start; + padding: 0.4rem 0.8rem; /* Adjusted */ + color: var(--theme-category-color); + border: 2px solid var(--theme-category-color); + background-color: transparent; + transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease; + display: inline-flex; + align-items: center; + gap: 0.5em; + border-radius: 5px; + font-weight: 600; + } + .details-toggle:hover { + background-color: var(--theme-category-color); + color: white; + transform: scale(1.03); + } + .details-toggle .bi { transition: transform 0.2s ease-in-out; } + .details-toggle[aria-expanded="true"] .bi { transform: rotate(180deg); } + + a { + color: var(--bs-primary); + text-decoration: none; + font-weight: 500; + } + a:hover { + color: var(--bs-primary-dark); + text-decoration: underline; + } + + /* --- Theme Category Color Styling --- */ + .section-services, .card-services { --theme-category-color: var(--theme-color-services); } + .section-deep-dive, .card-deep-dive { --theme-category-color: var(--theme-color-deep-dive); } + .section-resources, .card-resources { --theme-category-color: var(--theme-color-resources); } + </style> + </head> + <body> + <header class="page-header"> + <h1><i class="bi bi-cloud-arrows-fill"></i> AWS vs Azure: Comparative Cheatsheet</h1> + <p class="lead"> + An interactive guide comparing key services, philosophies, unique aspects, and resources for Amazon Web Services (AWS) and Microsoft Azure. + </p> + </header> + + <div class="container" id="main-container"> + + <!-- I. CORE SERVICE COMPARISON --> + <div class="schema-container section-services" data-section-id="section-service-comparison"> + <h2 class="section-title" id="section-service-comparison-title">Core Service Comparison</h2> + <div class="row"> + <!-- Compute Card --> + <div class="col-lg-4 col-md-6"> + <div class="info-card card-services" id="card-compute-services"> + <div class="card-body"> + <h5><i class="bi bi-cpu-fill"></i> Compute Services</h5> + <div class="card-content-wrapper"> + <p class="summary">Comparison of virtual servers, auto-scaling, serverless functions, and container services.</p> + <button class="btn btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseComputeServices" aria-expanded="false" aria-controls="collapseComputeServices"> + Details <i class="bi bi-chevron-down"></i> + </button> + </div> + </div> + <div class="collapse collapse-content" id="collapseComputeServices"> + <div class="service-item"> + <h6>Virtual Servers</h6> + <span class="platform-label">AWS:</span> <strong>Elastic Compute Cloud (EC2)</strong><br> + <span class="platform-label">Azure:</span> <strong>Virtual Machines (VMs)</strong> + <em>Virtual servers supporting Linux and Windows.</em> + </div> + <div class="service-item"> + <h6>Auto Scaling</h6> + <span class="platform-label">AWS:</span> <strong>Auto Scaling</strong><br> + <span class="platform-label">Azure:</span> <strong>VM Scale Sets</strong> + <em>Automatically adjusts the number of compute resources based on demand.</em> + </div> + <div class="service-item"> + <h6>Serverless Compute</h6> + <span class="platform-label">AWS:</span> <strong>Lambda</strong><br> + <span class="platform-label">Azure:</span> <strong>Functions</strong> + <em>Run code in response to events without managing servers.</em> + </div> + <div class="service-item"> + <h6>Containers</h6> + <span class="platform-label">AWS:</span> <strong>Elastic Container Service (ECS), AWS Fargate, Elastic Kubernetes Service (EKS)</strong><br> + <span class="platform-label">Azure:</span> <strong>Container Instances, Azure Kubernetes Service (AKS), Service Fabric</strong> + <em>Services for running and managing containerized applications.</em> + </div> + <div class="service-item"> + <h6>Container Registry</h6> + <span class="platform-label">AWS:</span> <strong>Elastic Container Registry (ECR)</strong><br> + <span class="platform-label">Azure:</span> <strong>Container Registry</strong> + <em>A repository to store and manage container images.</em> + </div> + <div class="service-item"> + <h6>Batch Processing</h6> + <span class="platform-label">AWS:</span> <strong>AWS Batch</strong><br> + <span class="platform-label">Azure:</span> <strong>Azure Batch</strong> + <em>Provision compute resources for batch job requirements.</em> + </div> + </div> + </div> + </div> + + <!-- Storage Card --> + <div class="col-lg-4 col-md-6"> + <div class="info-card card-services" id="card-storage-services"> + <div class="card-body"> + <h5><i class="bi bi-database-fill-up"></i> Storage Services</h5> + <div class="card-content-wrapper"> + <p class="summary">Object storage, block storage, archival, file storage, and data transfer solutions.</p> + <button class="btn btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseStorageServices" aria-expanded="false" aria-controls="collapseStorageServices"> + Details <i class="bi bi-chevron-down"></i> + </button> + </div> + </div> + <div class="collapse collapse-content" id="collapseStorageServices"> + <div class="service-item"> + <h6>Object Storage</h6> + <span class="platform-label">AWS:</span> <strong>Simple Storage Service (S3)</strong><br> + <span class="platform-label">Azure:</span> <strong>Blob Storage</strong> + <em>Scalable and durable data storage for unstructured data.</em> + </div> + <div class="service-item"> + <h6>Block Storage</h6> + <span class="platform-label">AWS:</span> <strong>Elastic Block Storage (EBS)</strong><br> + <span class="platform-label">Azure:</span> <strong>Managed Disks</strong> + <em>Persistent block storage for use with EC2 instances/VMs.</em> + </div> + <div class="service-item"> + <h6>Archival Storage</h6> + <span class="platform-label">AWS:</span> <strong>S3 Glacier</strong><br> + <span class="platform-label">Azure:</span> <strong>Archive Storage (part of Blob Storage)</strong> + <em>Low-cost storage for data archiving.</em> + </div> + <div class="service-item"> + <h6>File Storage</h6> + <span class="platform-label">AWS:</span> <strong>Elastic File System (EFS)</strong><br> + <span class="platform-label">Azure:</span> <strong>Azure Files</strong> + <em>Managed file storage shareable across multiple resources.</em> + </div> + <div class="service-item"> + <h6>Data Transfer Appliances</h6> + <span class="platform-label">AWS:</span> <strong>Snowball Family</strong><br> + <span class="platform-label">Azure:</span> <strong>Data Box Family</strong> + <em>Physical devices for large-scale data transfer to the cloud.</em> + </div> + <div class="service-item"> + <h6>Hybrid Storage</h6> + <span class="platform-label">AWS:</span> <strong>Storage Gateway</strong><br> + <span class="platform-label">Azure:</span> <strong>Azure File Sync / Data Box Gateway (StorSimple being phased out)</strong> + <em>Solutions for integrating on-premises storage with cloud storage.</em> + </div> + </div> + </div> + </div> + + <!-- Networking Card --> + <div class="col-lg-4 col-md-6"> + <div class="info-card card-services" id="card-networking-services"> + <div class="card-body"> + <h5><i class="bi bi-diagram-3-fill"></i> Networking Services</h5> + <div class="card-content-wrapper"> + <p class="summary">Virtual networks, DNS, dedicated connections, load balancing, and API management.</p> + <button class="btn btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseNetworkingServices" aria-expanded="false" aria-controls="collapseNetworkingServices"> + Details <i class="bi bi-chevron-down"></i> + </button> + </div> + </div> + <div class="collapse collapse-content" id="collapseNetworkingServices"> + <div class="service-item"> + <h6>Virtual Private Network</h6> + <span class="platform-label">AWS:</span> <strong>Virtual Private Cloud (VPC)</strong><br> + <span class="platform-label">Azure:</span> <strong>Virtual Network (VNet)</strong> + <em>Isolated private network in the cloud.</em> + </div> + <div class="service-item"> + <h6>DNS</h6> + <span class="platform-label">AWS:</span> <strong>Route 53</strong><br> + <span class="platform-label">Azure:</span> <strong>Azure DNS</strong> + <em>Scalable Domain Name System (DNS) web service.</em> + </div> + <div class="service-item"> + <h6>Dedicated Connection</h6> + <span class="platform-label">AWS:</span> <strong>Direct Connect</strong><br> + <span class="platform-label">Azure:</span> <strong>ExpressRoute</strong> + <em>Dedicated private network connection from on-premises to the cloud.</em> + </div> + <div class="service-item"> + <h6>Load Balancing</h6> + <span class="platform-label">AWS:</span> <strong>Elastic Load Balancing (ALB, NLB, GWLB)</strong><br> + <span class="platform-label">Azure:</span> <strong>Load Balancer, Application Gateway, Azure Front Door</strong> + <em>Distributes incoming application traffic across multiple targets.</em> + </div> + <div class="service-item"> + <h6>API Management</h6> + <span class="platform-label">AWS:</span> <strong>API Gateway</strong><br> + <span class="platform-label">Azure:</span> <strong>API Management</strong> + <em>Service for creating, publishing, maintaining, and securing APIs.</em> + </div> + </div> + </div> + </div> + + <!-- Database Card --> + <div class="col-lg-4 col-md-6"> + <div class="info-card card-services" id="card-database-services"> + <div class="card-body"> + <h5><i class="bi bi-server"></i> Database Services</h5> + <div class="card-content-wrapper"> + <p class="summary">Managed relational (SQL) and NoSQL database services, and data warehousing.</p> + <button class="btn btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseDatabaseServices" aria-expanded="false" aria-controls="collapseDatabaseServices"> + Details <i class="bi bi-chevron-down"></i> + </button> + </div> + </div> + <div class="collapse collapse-content" id="collapseDatabaseServices"> + <div class="service-item"> + <h6>Managed Relational Databases</h6> + <span class="platform-label">AWS:</span> <strong>Relational Database Service (RDS) (supports various engines), Aurora</strong><br> + <span class="platform-label">Azure:</span> <strong>SQL Database, Azure Database for MySQL/PostgreSQL/MariaDB</strong> + <em>Managed services for relational databases.</em> + </div> + <div class="service-item"> + <h6>Managed NoSQL Databases</h6> + <span class="platform-label">AWS:</span> <strong>DynamoDB</strong><br> + <span class="platform-label">Azure:</span> <strong>Cosmos DB</strong> + <em>Scalable, high-performance NoSQL database services.</em> + </div> + <div class="service-item"> + <h6>Data Warehousing</h6> + <span class="platform-label">AWS:</span> <strong>Redshift</strong><br> + <span class="platform-label">Azure:</span> <strong>Synapse Analytics (formerly SQL Data Warehouse)</strong> + <em>Services for large-scale data warehousing and analytics.</em> + </div> + </div> + </div> + </div> + <!-- Management & Governance Card --> + <div class="col-lg-4 col-md-6"> + <div class="info-card card-services" id="card-management-governance"> + <div class="card-body"> + <h5><i class="bi bi-gear-wide-connected"></i> Management & Governance</h5> + <div class="card-content-wrapper"> + <p class="summary">Monitoring, infrastructure as code, configuration management, optimization, and cost management tools.</p> + <button class="btn btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseManagementGovernance" aria-expanded="false" aria-controls="collapseManagementGovernance"> + Details <i class="bi bi-chevron-down"></i> + </button> + </div> + </div> + <div class="collapse collapse-content" id="collapseManagementGovernance"> + <div class="service-item"> + <h6>Monitoring</h6> + <span class="platform-label">AWS:</span> <strong>CloudWatch</strong><br> + <span class="platform-label">Azure:</span> <strong>Azure Monitor</strong> + <em>Monitoring and observability for applications and infrastructure.</em> + </div> + <div class="service-item"> + <h6>Infrastructure as Code</h6> + <span class="platform-label">AWS:</span> <strong>CloudFormation</strong><br> + <span class="platform-label">Azure:</span> <strong>Azure Resource Manager (ARM) templates, Bicep</strong> + <em>Define and provision infrastructure using code.</em> + </div> + <div class="service-item"> + <h6>Configuration & Compliance</h6> + <span class="platform-label">AWS:</span> <strong>AWS Config, Systems Manager</strong><br> + <span class="platform-label">Azure:</span> <strong>Azure Policy, Azure App Configuration, Azure Automation State Configuration</strong> + <em>Track resource configurations and ensure compliance.</em> + </div> + <div class="service-item"> + <h6>Optimization Advisor</h6> + <span class="platform-label">AWS:</span> <strong>Trusted Advisor</strong><br> + <span class="platform-label">Azure:</span> <strong>Azure Advisor</strong> + <em>Provides recommendations to optimize your cloud environment.</em> + </div> + <div class="service-item"> + <h6>Cost Management</h6> + <span class="platform-label">AWS:</span> <strong>Cost Explorer, AWS Budgets</strong><br> + <span class="platform-label">Azure:</span> <strong>Cost Management + Billing</strong> + <em>Tools for analyzing and managing cloud costs.</em> + </div> + </div> + </div> + </div> + + <!-- Security & Identity Card --> + <div class="col-lg-4 col-md-6"> + <div class="info-card card-services" id="card-security-identity"> + <div class="card-body"> + <h5><i class="bi bi-shield-lock-fill"></i> Security & Identity</h5> + <div class="card-content-wrapper"> + <p class="summary">Identity management, key management, web application firewalls, and DDoS protection.</p> + <button class="btn btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSecurityIdentity" aria-expanded="false" aria-controls="collapseSecurityIdentity"> + Details <i class="bi bi-chevron-down"></i> + </button> + </div> + </div> + <div class="collapse collapse-content" id="collapseSecurityIdentity"> + <div class="service-item"> + <h6>Identity & Access Management</h6> + <span class="platform-label">AWS:</span> <strong>Identity and Access Management (IAM)</strong><br> + <span class="platform-label">Azure:</span> <strong>Microsoft Entra ID (formerly Azure Active Directory)</strong> + <em>Manage user access and permissions.</em> + </div> + <div class="service-item"> + <h6>Key Management</h6> + <span class="platform-label">AWS:</span> <strong>Key Management Service (KMS)</strong><br> + <span class="platform-label">Azure:</span> <strong>Azure Key Vault</strong> + <em>Manage cryptographic keys and secrets.</em> + </div> + <div class="service-item"> + <h6>Web Application Firewall</h6> + <span class="platform-label">AWS:</span> <strong>Web Application Firewall (WAF)</strong><br> + <span class="platform-label">Azure:</span> <strong>Azure WAF (on Application Gateway, Front Door, CDN)</strong> + <em>Protects web applications from common web exploits.</em> + </div> + <div class="service-item"> + <h6>DDoS Protection</h6> + <span class="platform-label">AWS:</span> <strong>AWS Shield</strong><br> + <span class="platform-label">Azure:</span> <strong>Azure DDoS Protection</strong> + <em>Protection against Distributed Denial of Service (DDoS) attacks.</em> + </div> + </div> + </div> + </div> + <!-- Developer Tools Card --> + <div class="col-lg-4 col-md-6"> + <div class="info-card card-services" id="card-developer-tools"> + <div class="card-body"> + <h5><i class="bi bi-tools"></i> Developer Tools</h5> + <div class="card-content-wrapper"> + <p class="summary">Suite of services for DevOps practices including CI/CD, code repositories, and build/deploy automation.</p> + <button class="btn btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseDeveloperTools" aria-expanded="false" aria-controls="collapseDeveloperTools"> + Details <i class="bi bi-chevron-down"></i> + </button> + </div> + </div> + <div class="collapse collapse-content" id="collapseDeveloperTools"> + <div class="service-item"> + <h6>DevOps Suite</h6> + <span class="platform-label">AWS:</span> <strong>CodeCommit, CodeBuild, CodeDeploy, CodePipeline, CodeStar</strong><br> + <span class="platform-label">Azure:</span> <strong>Azure DevOps (includes Repos, Pipelines, Boards, Test Plans, Artifacts)</strong> + <em>Comprehensive tools for the software development lifecycle.</em> + </div> + </div> + </div> + </div> + <!-- AI & Machine Learning Card --> + <div class="col-lg-4 col-md-6"> + <div class="info-card card-services" id="card-ai-ml"> + <div class="card-body"> + <h5><i class="bi bi-robot"></i> AI & Machine Learning</h5> + <div class="card-content-wrapper"> + <p class="summary">Services for building, training, deploying ML models, and AI-powered applications.</p> + <button class="btn btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAiMl" aria-expanded="false" aria-controls="collapseAiMl"> + Details <i class="bi bi-chevron-down"></i> + </button> + </div> + </div> + <div class="collapse collapse-content" id="collapseAiMl"> + <div class="service-item"> + <h6>Machine Learning Platform</h6> + <span class="platform-label">AWS:</span> <strong>SageMaker, Rekognition, Polly, Lex, Comprehend, Translate</strong><br> + <span class="platform-label">Azure:</span> <strong>Azure Machine Learning, Azure AI Services (formerly Cognitive Services - e.g., Vision, Speech, Language, Decision)</strong> + <em>Comprehensive platforms and pre-trained models for AI/ML.</em> + </div> + </div> + </div> + </div> + <!-- Internet of Things (IoT) Card --> + <div class="col-lg-4 col-md-6"> + <div class="info-card card-services" id="card-iot"> + <div class="card-body"> + <h5><i class="bi bi-hdd-network-fill"></i> Internet of Things (IoT)</h5> + <div class="card-content-wrapper"> + <p class="summary">Services for connecting, managing, and securing IoT devices and solutions.</p> + <button class="btn btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseIot" aria-expanded="false" aria-controls="collapseIot"> + Details <i class="bi bi-chevron-down"></i> + </button> + </div> + </div> + <div class="collapse collapse-content" id="collapseIot"> + <div class="service-item"> + <h6>IoT Platform</h6> + <span class="platform-label">AWS:</span> <strong>AWS IoT Core, IoT Greengrass, IoT Device Management</strong><br> + <span class="platform-label">Azure:</span> <strong>Azure IoT Hub, IoT Edge, IoT Central</strong> + <em>Connect, monitor, and manage billions of IoT assets.</em> + </div> + </div> + </div> + </div> + + </div> <!-- End Row --> + </div> <!-- End Service Comparison Section --> + + + <!-- II. PHILOSOPHICAL & UNIQUE ASPECTS --> + <div class="schema-container section-deep-dive" data-section-id="section-platform-deep-dive"> + <h2 class="section-title" id="section-platform-deep-dive-title">Philosophical & Unique Aspects</h2> + <div class="row"> + <!-- Philosophical Differences Card --> + <div class="col-lg-6 col-md-6"> + <div class="info-card card-deep-dive" id="card-philosophical-differences"> + <div class="card-body"> + <h5><i class="bi bi-lightbulb-fill"></i> Core Philosophies</h5> + <div class="card-content-wrapper"> + <p class="summary">Understanding the foundational approaches, origins, and focus areas that shape AWS and Azure.</p> + <button class="btn btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapsePhilosophicalDifferences" aria-expanded="false" aria-controls="collapsePhilosophicalDifferences"> + Details <i class="bi bi-chevron-down"></i> + </button> + </div> + </div> + <div class="collapse collapse-content" id="collapsePhilosophicalDifferences"> + <h6>AWS Philosophy:</h6> + <ul> + <li><strong>First-Mover & Breadth:</strong> Early market entry led to a mature, extensive service portfolio. Often provides granular building blocks.</li> + <li><strong>Infrastructure Focus & Neutral Hypervisor:</strong> Initially aimed to replicate physical hardware virtually, appealing to Linux users and those wanting fine-grained control.</li> + <li><strong>Developer-Centric:</strong> Strong emphasis on developers with a wide range of SDKs and tools.</li> + <li><strong>Ecosystem & Community:</strong> Large, mature partner ecosystem and vibrant community support.</li> + </ul> + <h6>Azure Philosophy:</h6> + <ul> + <li><strong>Enterprise & Hybrid Focus:</strong> Leverages Microsoft's enterprise strength; strong in hybrid scenarios with existing Microsoft product integration.</li> + <li><strong>Integrated PaaS:</strong> Emphasis on Platform-as-a-Service offerings, abstracting infrastructure for easier development, especially for Microsoft stack users.</li> + <li><strong>Familiarity for Windows Shops:</strong> Offers a smoother cloud transition for organizations heavily invested in Microsoft technologies.</li> + <li><strong>Solution-Oriented:</strong> Often groups services into solutions targeting specific business problems.</li> + </ul> + <p><em>Note: Both platforms are evolving, and these distinctions are becoming less rigid as they expand their capabilities.</em></p> + </div> + </div> + </div> + + <!-- Unique Platform Strengths Card --> + <div class="col-lg-6 col-md-6"> + <div class="info-card card-deep-dive" id="card-unique-strengths"> + <div class="card-body"> + <h5><i class="bi bi-star-fill"></i> Unique Platform Strengths</h5> + <div class="card-content-wrapper"> + <p class="summary">Highlighting distinct advantages, specialized offerings, and key differentiators of each cloud provider.</p> + <button class="btn btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseUniqueStrengths" aria-expanded="false" aria-controls="collapseUniqueStrengths"> + Details <i class="bi bi-chevron-down"></i> + </button> + </div> + </div> + <div class="collapse collapse-content" id="collapseUniqueStrengths"> + <h6>Azure's Unique Strengths:</h6> + <ul> + <li><strong>Hybrid Cloud (Azure Arc, Azure Stack):</strong> Strong capabilities for managing resources across on-premises, multi-cloud, and edge environments.</li> + <li><strong>Microsoft Ecosystem Integration:</strong> Deep integration with Visual Studio, Microsoft Entra ID, SQL Server, .NET, Microsoft 365.</li> + <li><strong>Azure DevOps:</strong> Comprehensive and well-integrated suite for CI/CD and collaboration.</li> + <li><strong>Cosmos DB:</strong> Globally distributed, multi-model database service with unique capabilities.</li> + <li><strong>Azure Policy & Blueprints:</strong> Powerful governance tools for enforcing organizational standards.</li> + </ul> + <h6>AWS's Unique Strengths:</h6> + <ul> + <li><strong>Market Leadership & Maturity:</strong> Longest-standing major provider, known for stability and extensive global infrastructure.</li> + <li><strong>Breadth & Depth of Services:</strong> Often the widest selection of instance types and specialized services (e.g., Graviton processors).</li> + <li><strong>Serverless Innovation (Lambda):</strong> Pioneer in the serverless space with a feature-rich offering.</li> + <li><strong>Extensive Partner Ecosystem (APN):</strong> Vast network offering third-party software, services, and expertise.</li> + <li><strong>AI/ML Breadth:</strong> Comprehensive suite of AI/ML services from infrastructure to pre-trained models (SageMaker).</li> + <li><strong>Marketplace:</strong> Rich marketplace for third-party software and services.</li> + </ul> + </div> + </div> + </div> + </div> <!-- End Row --> + </div> <!-- End Philosophical & Unique Aspects Section --> + + + <!-- III. RESOURCES & GUIDANCE --> + <div class="schema-container section-resources" data-section-id="section-learning-resources"> + <h2 class="section-title" id="section-learning-resources-title">Resources & Guidance</h2> + <div class="row"> + <!-- Essential Resources & Docs Card --> + <div class="col-lg-6 col-md-12"> <!-- Made this card wider for more links --> + <div class="info-card card-resources" id="card-essential-resources"> + <div class="card-body"> + <h5><i class="bi bi-book-fill"></i> Essential Resources & Docs</h5> + <div class="card-content-wrapper"> + <p class="summary">Key links to official documentation, learning platforms, architectural guidance, and best practices for both AWS and Azure.</p> + <button class="btn btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseEssentialResources" aria-expanded="false" aria-controls="collapseEssentialResources"> + Details <i class="bi bi-chevron-down"></i> + </button> + </div> + </div> + <div class="collapse collapse-content" id="collapseEssentialResources"> + <h6>Azure Resources:</h6> + <ul> + <li><strong>Azure Architecture Center:</strong> Reference architectures, best practices.</li> + <li><strong>Microsoft Learn for Azure:</strong> Training paths, modules, certifications.</li> + <li><strong>Azure Documentation:</strong> Official product documentation.</li> + <li><strong>Azure for AWS Professionals (Microsoft Learn):</strong> Comparative guidance.</li> + <li><strong>Cloud Adoption Framework for Azure:</strong> Cloud adoption strategies.</li> + <li><strong>Azure Well-Architected Framework:</strong> Guiding tenets for workload quality.</li> + <li><strong>Azure Security Documentation:</strong> Resources for securing Azure.</li> + </ul> + <h6>AWS Resources:</h6> + <ul> + <li><strong>AWS Architecture Center:</strong> Reference architectures, Well-Architected best practices.</li> + <li><strong>AWS Well-Architected Framework:</strong> Pillars for building robust infrastructure.</li> + <li><strong>AWS Documentation:</strong> Official product documentation.</li> + <li><strong>AWS Training and Certification:</strong> Courses and certifications.</li> + <li><strong>AWS Solutions Library:</strong> Collection of cloud-based solutions.</li> + <li><strong>AWS vs Azure Services Comparison (Tutorials Dojo):</strong> Service mapping cheat sheet.</li> + </ul> + <p><em>Always refer to the latest official documentation from AWS and Microsoft for the most current information.</em></p> + </div> + </div> + </div> + + <!-- Architect's Quick Tips Card --> + <div class="col-lg-6 col-md-12"> <!-- Made this card wider --> + <div class="info-card card-resources" id="card-architect-tips"> + <div class="card-body"> + <h5><i class="bi bi-check2-circle"></i> Architect's Quick Tips</h5> + <div class="card-content-wrapper"> + <p class="summary">Practical advice for cloud architects working with or transitioning between AWS and Azure environments.</p> + <button class="btn btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseArchitectTips" aria-expanded="false" aria-controls="collapseArchitectTips"> + Details <i class="bi bi-chevron-down"></i> + </button> + </div> + </div> + <div class="collapse collapse-content" id="collapseArchitectTips"> + <ul> + <li> + <strong>Focus on Concepts, Not Just Names:</strong> Understand underlying principles (scalability, fault tolerance). Implementation details differ, but core concepts are transferable. + </li> + <li> + <strong>Hands-On Practice:</strong> The best way to learn is by doing. Utilize free tiers for experimentation on both platforms. + </li> + <li> + <strong>Certifications:</strong> Consider pursuing certifications to validate skills and deepen knowledge for the platform you're focusing on. + </li> + <li> + <strong>Understand Organizational Context:</strong> The "best" platform often depends on specific needs, existing technology investments, and team skillsets. + </li> + <li> + <strong>Stay Updated:</strong> Cloud platforms evolve rapidly. Continuously learn about new services, features, and best practices. + </li> + <li> + <strong>Leverage Official Documentation:</strong> Both AWS and Azure provide extensive and detailed documentation – make it your primary reference. + </li> + </ul> + </div> + </div> + </div> + </div> <!-- End Row --> + </div> <!-- End Resources & Guidance Section --> + + </div> <!-- End Main Container --> + + <footer class="container text-center pb-3"> + <p class="mb-2"> + © <span id="currentYear"></span> Cloud Cheatsheet Contributor. Content inspired by official AWS and Azure documentation and community resources. + </p> + <div> + <a + href="https://aws.amazon.com/documentation/" + title="AWS Documentation" + target="_blank" + rel="noopener noreferrer" + class="mx-2 link-secondary" + > + <i class="bi bi-book-half"></i> AWS Docs + </a> + <a + href="https://docs.microsoft.com/azure/" + title="Azure Documentation" + target="_blank" + rel="noopener noreferrer" + class="mx-2 link-secondary" + > + <i class="bi bi-journal-bookmark-fill"></i> Azure Docs + </a> + </div> + </footer> + + <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> + <script> + document.addEventListener("DOMContentLoaded", () => { + const collapseElements = document.querySelectorAll(".collapse"); + collapseElements.forEach((collapseEl) => { + const button = document.querySelector(`.details-toggle[data-bs-target="#${collapseEl.id}"]`); + const icon = button ? button.querySelector(".bi") : null; + if (button && icon) { + const updateIconAndButton = (isShown) => { + if (isShown) { + icon.classList.remove("bi-chevron-down"); + icon.classList.add("bi-chevron-up"); + button.setAttribute("aria-expanded", "true"); + } else { + icon.classList.remove("bi-chevron-up"); + icon.classList.add("bi-chevron-down"); + button.setAttribute("aria-expanded", "false"); + } + }; + + updateIconAndButton(collapseEl.classList.contains("show")); + + collapseEl.addEventListener("show.bs.collapse", () => { + updateIconAndButton(true); + }); + collapseEl.addEventListener("hide.bs.collapse", () => { + updateIconAndButton(false); + }); + } + }); + + document.getElementById("currentYear").textContent = new Date().getFullYear(); + }); + </script> + </body> +</html> \ No newline at end of file