Hello everyone, when you are developing production applications, you might need your app to run on multiple environments. For example, if you have a development team, you need a development environment. And if you have a QA or QA team, then you need another environment to test the application. So they can run your manual test, automation test tools and all that. And finally, you will need a production environment. And sometimes you may also need a staging environment before releasing to production. And in this blog, I will show you how you can create this environment and do continuous deployment. So, without further ado, let's get into the blog.
So in the previous blog, we created this application and attach a custom domain to it, cofieldout.tj. So here's the domain and we bought it for free. And we attach it to this sample application. And we also added some redirection as well. So now let's create three environments for this application. So we are going to create three branches in our repository. So right now we only have the master branch and the master branch is at the moment pointing to our, let's say, the production environment. So that is www.cofieldout.tj.
So let's create two more branches. So one for the development and one for the QA. And then let's point those branches to separate environments. The development environment could be www.cofieldout.tj likewise. So this is my GitHub repository and I'm going to create a new branch right here. I'll click master and it'll open up this particular window.
So let's create the development branch and I'll create that branch from the master. Click here. So if I click on this drop-down again, you can see that's both the master and dev branch and I'm going to create another branch for testing. So this is our QA branch. So I'll click again, that is a branch from dev. All right. We have these three branches and currently, the master branch is pointing to the application that we have right here on www.cofieldout.tj.
How can we verify that?
So let's go to the AWS Amplify console. So I'll log into my AWS account and I go to AWS Amplify. So this is the application we created last time. If I click on it, the master branch is connected with coffee, love.tj. So do you see it is the master branch that is connected we can further verify that if I go to the domain management on the left sidebar and here HTTP is coffee, love.tj is currently pointing to the master and also the www coffee, love.tj is currently pointing to the master branch. So now let's go back to our coffee, love application and then I'll click connect branch. It will pull down all the branches from my GitHub repository. If I click on the stroke down, I should see both the dev and test branch. So I'll click dev here and click next, click save and deploy. So it's going to create another application based on that dev branch.
Do you see?
So it starts provisioning the resources. So until our dev environment gets provisioned, I'll go ahead and connect our other branch as well. So let me click connect branch and this time I'm going to select the test. So it's only showing the test branch here because we have already connected the other two branches. So let me click test here and then click next, I'll click save and deploy. Alright, so our test application is also started provisioning and meantime the dev is already created. So if I click here and do you see the dev environment loads but we don't see our custom domain here. So it is dev dot the default amplify apps.com domain. So let's quickly fix that. I will go to domain management on the left sidebar and I will click manage subdomains because that is what we are going to do. So right now our main domain and the www dot subdomain are pointing to the master branch. So let's click add and this time I'm going to create a subdomain called dev dot coffee loud dot tk and that get pointed to the dev environment and I'll click update. Okay, it's updated. So let me copy the dev domain and paste that in dev dot coffee loud dot tk and the tent. I should see my application loaded. So let's go back to the application and make sure our test environments are also loaded. It looks like it has. So let me click this link and here you go test it coffee loud or tk.
We have the test environment. So we go test dot coffee loud and dev dot coffee loud and the coffee loud or tk. Production, dev and test. So let's make sure these environments are isolated by adding some changes to these three environments. So now let's try to simulate a new feature-releasing process. So let's say I'm a developer and I'm getting a new feature from my customer. He says, Hey, instead of I love coffee, it has to be I love tea because he loves tea more than coffee.
How ridiculous is that?
So anyway, he's my customer. So I decided to change th
e improvement. So what I will first do is I will create a new branch to develop this feature or the improvement. So let's create a new branch. JIT. Check out dash B. T. So I'll create a branch called T and then I'll do the necessary changes. So instead of coffee and I'll put T here and then I will commit my changes. JIT commit dash M. Or rather I'll add my changes first dash A. Then JIT commits dash M. Then I will run it locally to make sure everything works fine. NPM run start. Then here you go, my local server has been started and I have I love tea message. So this works locally. So what I will do is I will then commit it to the development branch. So so I'll check out my development branch JIT. Check out. Tev. And then I will merge my tea branch into the development.
JIT merge tea. And here you go, so it is merged. And now what I will do is I will push this commit to the development branch on the remote repository. JIT push origin Tev. Okay.
So the code is committed. So as and when the code is committed to the development branch, the build should start. So let me quickly show you. So I will go to amplify console. And if I scroll it, it will be top as you can see on the dev environment, the build has already started provisioning. So after this is done in about a couple of minutes, we should see the change in the development environment. So let's wait for a while. So it's now verifying, but let's go now dev branch and do a refresh. And here we go. I love tea message appears here. But the test branch or the test environment still I love coffee and the production environment, it is still I love coffee.
So now let's update our test environment so that our QA skin checks this change. So I will go to my repository. Let's make a pull request from our dev branch to the test branch or the QA branch. So let me go to the pull request. And then I'll click new pull request. So I'm sending the pull request from the dev branch to the test branch. And here we go. And it shows the change. So the coffee will be replaced with tea. And then I'll click Create a pull request. Change coffee to tea. And I'll click Create a pull request. So this time I will merge it by myself or this could be someone from your team. So once I merge it to the test branch. So if I look at the test environment, you can see the build has already started provisioning. Okay, the deployment is now completed. So let's go to the test.coffil.tk and refresh it. And here we go. We have tea here in the test as well. But still, again, the production is coffee.
So once the QAs have tested this, let's make another PR from the test branch to the production branch. So let me go to the main repository, coffee love. I'll click pull request again. New pull request. From test to master. And here's the change. Make a pull request. And our review will merge this. So let's merge it by myself right now. So as soon as it's merged to the master branch, you should see there's a build happening in the master branch.
Okay, so it's completed. Let me go to the production and refresh it. And here we go. Our change is now in production. So this is what I want to show you today.
How easily you can configure a continuous deployment process for multiple environments for your application?