SECRET OF CSS

Web3 Meets DevOps: Pipeline, Deploy dApp | by Donovan Brown | Aug, 2022


Web3 needs DevOps

Part 8— Building a DevOps pipeline for the Ethereum blockchain

Photo by Shubham Dhage on Unsplash

In the previous post of this series — Web3 Meets DevOps: Pipeline, Deploy Infrastructure — I used Azure Pipelines and Infrastructure as Code (IaC) to deploy the Azure Static Web App and Ganache on an Azure Container Instance. In this post, I will deploy my smart contracts and frontend into that Infrastructure.

I created a new branch named “blog/part8” for this article.

git checkout -b blog/part8

The contracts are deployed into the instance of Ganache running in Azure Container Instances deployed in the last post. Under the deploy_contracts job of the dev stage, I added the following:

First, the variables needed in this job are defined: ganacheIp and ganacheName. The values for the variables were set when I executed the deploy.ps1 script in the iac job. If I don’t define them, they will not be available for this job.

Under the steps, the script downloads the artifacts created in the previous posts. To deploy the contracts, Truffle must be installed on the agent, which I do with npm install.

Once Truffle is installed, the script restarts the container running Ganache. When the container starts, it displays a list of accounts and private keys.

When the iac job runs, the container is not restarted if it already exists. Over time, if enough builds are run, the logs will no longer have the accounts and private keys. By explicitly restarting the container in this job, it ensures the accounts and private keys are available in the job below so so they are extracted and available to the pipeline summary for use in MetaMask.

With Ganache restarted, I deployed the contracts with the truffle migrate command. The command set the network to development so Ganache was used. The truffle migrate command executed the truffle-config.js file that needed the DEV_NETWORK environment variable set to the ganacheIp.

Finally, a PowerShell task harvests the network ID and contract address and outputs them for use in deploying the frontend.

The frontend will be deployed into the Azure Static Web App deployed in the last post. Under the deploy_frontend job of the dev stage, I added the following:

As with the contracts, the variables I needed in this job are defined first. Some of the values for the variables were set when the deploy.ps1 script executed in the iac job. Others were from the PowerShell script run during the contract deployment.

After downloading the artifacts, the AzureStaticWebApp task deploys the frontend and Azure Function.

Next, an Azure CLI task is called to run the az staticwebapp appsettings set command. This sets an environment variable that an Azure Function will use. The function is described in Part 3 of this series: Web3 Meets DevOps: Writing Address Service.

Finally, more PowerShell extracts all the important information needed to configure MetaMask to connect to my dApp. The script collects all the variables and formats them as Markdown. The Markdown was then written to disk and attached to the pipeline Extensions tab.

With that information, I could add Ganache as a network in MetaMask, import an account, and connect to the dApp.

1*AeBpwPLB ZwQAnPQnq 9fA
Extensions tab showing information to connect MetaMask

I am a fan of deleting responses once they are no longer needed to save money and test my IaC. Before deleting the Dev environment, I want an opportunity to review the code. To do this, I use a Manual Validation job. Once I approve the validation step, the next job deletes the Dev resource group in Azure, removing all my resources. Under the dev_validation stage, I added the following:

Now that I have deployed to my Dev environment, in the next post, we will use Rinkeby as my QA environment.

Thanks for reading. Until next time!

Editor: Chelsea Brown
Technical Review: Brian Benz



News Credit

%d bloggers like this: