Deploy Static website Storage Account with DevOps CI/CD
After a lot search about this topic I decided myself write about it. So this is my first time :)
I’m not explain about what is devOps or static web storage, but I promise pass for each past how to do a deploy a React web static with DevOps.
Let’s go!
Create a storage account
1- Go to Portal.azure.com
2- Look for Storage Accounts
3- Click to create
4- Set all values and click to review and after create.
How enable static website
1- Open the storage account created on last past
2- In the left menu, click in static website
3- After click in Enable and then click on save.
After save, it will generated a endpoint to access the website and a blob container with name $web save this information.
4- Set value index.html on field Index document name
5- copy the primary endpoint to access your portal.
Now, let’s go to devOps to upload the ReactJs code.
How Upload code to DevOps
1- Create a new repository
2- up the code to the repository cloning the code and doing the commit and push.
Create Pipeline
Now we’re go create the pipeline to build the react code and publish on the article.
1- click in Pipeline on the menu, then click on button New Pipeline
2- Select Azure Repos git and then select the right repository
3- Select Node.js with React
4- Should have this YAML
5- Click on line 22 and add a new task, on right side, click in show assistant
6- search copy files and select, let source files empty, contents add the code bellow to ignore the node_modules
Windows
**/**
!**/node_modules/**Linux
**\**
!**\node_modules\**The target Folder with value $(Build.ArtifactStagingDirectory)
7- Click on button Add to add the task in your YAML
8- Search for “publish build artifacts”, select and click to Add.
9- Click to save and Run
Should have 1 artifact produced.
Create Pipeline Release to deploy to storage account
Now we should create a new pipeline release to get the Artifacts and deploy to storage account.
1- Click at pipeline release on left menu.
2- Click in new to create a new release pipeline
3- Select Empty template and click to apply
4- rename the Stage name if you want
5- Click to add an artifact, then select the project and source that are you react app and click in Add
6- Click in the thunder icon to enable the Continuous deployment trigger
7- click on link “1 job, 0 task” and click on plus icon
8- search for AZ CLI and Add
9- on the Azure Resource Manager connection select the right subscription, on the Script Type select Power Shell, in the Script Location select inline script.
10- in the inline Script field add the code bellow
az storage blob upload-batch --account-name <STORAGE_ACCOUNT_NAME> --account-key <STORAGE_ACCOUNT_KEY> -d '$web' -s ./to get storage account key, you need return to the storage account > access key and copy the key
11- in the Working Directory field click in … and select the build folder
12- now you can save and run the pipeline release.
You storage web should have all build files.
Access your primary endpoint to see you site online.
Good job! you deployed your code and implemented the CI/CD, always that a commit is push to the repository the pipelines will start and to do all job.
