By Riheme Ben Hassan
Deploying an Angular app using 2 different methods:
- Static websites in Azure Storage and front-door
- Static Web Apps + Azure Function as an API
Github Link: rihemebh/cloud-computing-project (github.com)
- Create a frontend app local version:
- Create resource group
- Go to static websites and create w container
- Build the app : npm run build
- copy the website inside the container :
AzCopyis a command-line utility that you can use to copy blobs or files to or from a storage account
azcopy copy "G:\test-app\dist\test-app"
"https://cpctg.blob.core.windows.net/$web?sp=racwd&st=2022-12-14T09:53:39Z&
se=2022-12-16T17:53:39Z&spr=https&sv=2021-06-08&sr=c&sig=O5h9M9dC9BDYCDmAeskhuo
C9JtbqNU3yvmZWSmfTp2E%3D"
--recursive=trueAzure Front Door can help you deliver higher availability, lower latency, greater scale, and more secure experiences to your users wherever they are.
Creation:
- Create a static Web App
- A
yamlfile is generated to deploy the app on everypush
- Pushing the app and the action are successfully passed
- here is our app deployed in the cloud
- Visualization
- Add an API to the app using Azure Functions
Azure Function is a serverless compute service that enables us to run event-triggered code without having to provision or manage infrastructure.
So it will be very beneficial for us to use with a static web app that will need some simple changes
the functions will be triggered anytime we the app calls them.
→ using the vscode extension I created an azure function for the API and I get a new folder with this structure
├── .github
│ └── workflows
│ └── azure-static-web-apps-victorious-meadow-06d368b03.yml
│
├── api
│ ├── getName
│ │ ├── function.json
│ │ └── index.js
│ ├── host.json
│ ├── local.settings.json
│ └── package.json
│
└── (folders and files from my static web app)- Now I just need to modify the frontend to consume the API we just created and push the code and the Github actions will deploy it automatically
TestApp (2.azurestaticapps.net)
the objective of this project was fulfilled successfully and I leaned how to:
- easily deploy a static application
- Automate the deployment
- Add API without provision
- Create a front door to enhance the availability