In Deploy a Azure Web App using Gitlab – Part 1 a Gitlab server was installed and some basic settings were applied. In Deploy a Azure Web App using Gitlab – Part 2 a SSL certificate was added so that HTTPS traffic could be used. In this third and final part I will start with what I intended to do; namely deploying a simple web page from Gitlab to an Azure Web App. More specific using a private Git repository so that the “code” will be safe. In short this is what’s going to happen:
1. Create a new project in Gitlab
2. Create a new App service
3. Connecting Gitlab with Azure
4. Connecting Azure with Gitlab
5. Configuring triggers or Webhooks
So creating a new project is pretty easy. Just hit the New Project button and give your project a name. I want to use a private project so that I know nobody can access the resources.
So create the new project and then we can start uploading some basic content. I like to use Visual Studio Code for this. Gitlab is kind enough to provide you with all the necessary commands to get started. These can be found at the project starting page.
[cc lang=”bash”]git clone https://gitlab.stephanvdkruis.com/root/example-project.git
cd example-project
touch README.md
git add README.md
git commit -m “add README”
git push -u origin master[/cc]
So what did we do? First we cloned the repository to a local folder. Then we went into this folder. We created a README.md file, this file was staged for uploading, and a comment was added. Finally the file was pushed to Gitlab. When you go back to your project you should see the README.md file under files.
Next we create a simple html page named index
[cc lang=”bash”]touch index.html[/cc]
And fill it with
[cc lang=”html”]
This is a Heading
This is a paragraph.
[/cc]
Save the file and upload it to Gitlab by
[cc lang=”bash”]
git add index.html
git commit -m “add our first html file”
git push -u origin master[/cc]
App service
So when that’s done we can continue to create a new Web App. Log in to Azure and choose App Services, Web app and create.
Give the App a name. Please note that this name will be used in the URL of your App. In the example the url that will be used is example-project.azurewebsites.net. And hit the create button. It should only take a couple of seconds before the App is deployed.
KUDO
Now comes the most important part. Without Kudo this whole project wouldn’t be possible. Kudo is the key component in deploying from Gitlab to Azure. When you create a App service you automatically get Kudo with it, so that’s pretty easy. You can access Kudo by going to your Apps url and adding scm so in my case this would be https://example-project.scm.azurewebsites.net.
So now we want to connect the Gitlab to the App. For this to happen we need a deployment key. This deployment key can be found by adding /api/sshkey?ensurePublicKey=1 to your sites URL. In my case this would be https://example-project.scm.azurewebsites.net/api/sshkey?ensurePublicKey=1. This will open a web page where you find a ssh-rsa string. You have to copy this string and head over to your Gitlab project. Here you have got to go into your project Settings, Deployment Keys and Add Deployment Key
Here you give your Deployment key a name and you paste in the ssh-rsa string. Make sure you remove the quotations marks, and hit Create deploy Key. Gitlab should now be able to “talk” to Azure.
Now we have to set up the Web App so it knows where to get it configurations from. So go to the overview of your Web App and choose Deployment options.
At Choose Source select External Repository. Then for Repository URL head back to your Gitlab project. There you can find the SSH link, it should look something like git@gitlab.stephanvdkruis.com:root/example-project.git. Copy this link in the Repository URL. For Branch leave it at Master. Hit OK.
After a couple of seconds check Deployment options and the first deployment should be successful.
If you enter the URL of your site you should see the index page you created.
Webhooks
Now we have deployed a website to Azure by using Gitlab! But what you’ll notice is that when you update the HTML file on Gitlab, the website isn’t updated in Azure. For this to happen a Webhook is needed. A Webhook basically tells Kudo that there is a new push to the repository, which will then pull the new files.
Go to the overview of your Web App and click Get publish Profile. This will download a PUBLISHSETTINGS file
From this file we need to construct a new URL which looks like https://yoursite:password@yoursite.scm.azurewebsites.net/deploy. In my case this will be https://example-project:password@example-project.scm.azurewebsites.net/deploy. Now the password can be found in the file you’ve just downloaded. It is behind userPWD, This is a long password phrase. Copy this in the URL by replaying password.
Copy the entire URL and go to your Gitlab projectc choose settings and Webhooks. Copy the URL into the URL field and make sure that Enable SSL is enabled, and click Add Webhook. After you added the Webhook you can also test the Webhook. You should get a Hook successfully executed.
Now if you update your index.html and push this to Gitlab, the website should be updated automatically.
That’s it
So that’s it. We’ve done a lot of work, we first created a Gitlab server and then configured it to use HTTPS in the second part. Finally we could do some cool stuff in this third and final part. This whole setup will be the base of some more in depth projects.
I hope everything was clear for you, I certainly enjoyed creating this blog post. If you liked it or have any comments feel free to leave a message!