Code Monkey home page Code Monkey logo

cloudguruchallenge-your-resume-in-azure's Introduction

A Cloud Guru Challenge: Your resume in Azure

Hi there!

This repository is hosting the code and documentation of the A Cloud Guru Challenge: Your resume in Azure.

The idea is to build a resume and host it using Azure services.

For a detailed view of the journey, you should take a look at my blog article

The steps

  • Create a GitHub repository
  • Create the website (HTML, CSS...)
  • Add a visitor counter on the website
    • Create CosmoDB database
    • Create Azure function to get number of views
  • Deploy the website to Azure Static Web App
  • Enable HTTPS and custom domain support
  • Set up GitHub actions
  • Add tests to the counter function

Additional steps:

  • Migrate out of Azure static web apps
    • Azure Blob storage
    • HTTPS
    • Custom domain
    • Function
    • CI/CD Github Actions
      • Static website
      • Counter Function (Python)

Last step:

My journey

I already worked on the Cloud Resume challenge before. The goal was to host my resume on AWS.

I have a decent knowledge of AWS and passed the AZ-900 but I'm not working on a daily basis with Azure. This challenge is a way to get some experience with it.

Static hosting

  • Use Azure Static Apps
  • Configure Custom domain
    • Add to your DNS entries a CNAME pointing to the Static App url
    • Verify it (Custom domains > Add+)

Azure function

  • Create an Azure account

  • Install VSCode extension and Core tools (v3) (run funcin terminal to check the installation)

  • Configure a new HTTPTrigger (with Python for me)

  • Create CosmosDB account from portal (serverless mode)

  • Create a Cosmos container

  • Create a document with a counter property

  • Add CORS for the static website to be able to call the Azure function

don't forget to check the Enable Access-Control-Allow-Credentials option

to set up the python env: python3 -m venv .env & source .venv/bin/activate

Host static website

Tutorial

  • create a storage account and run the following:
az storage blob service-properties update --account-name myresume --static-website --404-document error.html --index-document index.html

az storage blob upload-batch -s ./front -d '$web' --account-name myresume 

Azure CDN

Tutorial

Map a custom domain

Tutorial

Use cdnverify to avoid downtime when migrating

Custom domain https with CDN managed certificates

Github action

  • Generate deployment credentials and copy the json for later use
az ad sp create-for-rbac --name {myStaticSite} --role contributor --scopes /subscriptions/{subscription-id}/resourceGroups/{resource-group} --sdk-auth
  • Add a secret to Github repository with the json

  • Create a new workflow under .github/workflows/

(link to be added to the workflow file...)

Note that if you are using Azure Static Web Apps, the workflow file is already generated.

Scripting

Tutorial

ARM template reference

  • Install Azure CLI

  • Use az login to set up credentials

  • Create a template.json and set up the blank template

  • Create resource group for the template

az group create \
--name resumeGroup \
--location "East US 2"
templateFile="{path to your template file}"
az deployment group create \
  --name blanktemplate \
  --resource-group resumeGroup \
  --template-file $templateFile
  • Add storage resource

cloudguruchallenge-your-resume-in-azure's People

Contributors

flolight avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

Forkers

rudesandwich

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.