J
JohnAziz
Introduction
In this blog, you will go through a step-by-step guide, from preparing your Full-stack web application to be deployed to Azure and exporting your data from Google Cloud SQL to deploying your application to Azure App Service, migrating your PostgreSQL database to Azure Databases for PostgreSQL and connecting it to your application.
We have got you covered whether you already have a full-stack application working on Google or looking to bring your first full-stack application to the Internet. You'll learn everything you need to do in order to deploy your website to Microsoft Azure.
Technical Architecture
Prerequisites
An Azure subscription.
Web Application Source Code from GitHub.
Summary of the steps:
Step 1: Export your Data from Google Cloud SQL.
Step 2: Create an Azure Web App + Database.
Step 3: Fork the Code and Configure Azure App Service Deployment.
Step 4: Configure your Relational Database.
Step 5: Import your Data into Azure PostgreSQL.
Step 1: Export your Data from Google Cloud SQL
In order to migrate your application to a different place whether it's Microsoft Azure or anywhere else you will need to take your existing data with you.
Google Cloud SQL provides you with the ability to export your database as a SQL dump file which can be used to recreate the whole database with all its tables and data anywhere you want.
1. Visit the Google Cloud Platform console.cloud.google.com in your browser and sign in.
2. Type cloud sql in the search bar at the top of the portal page and select SQL from the options that appear.
3. Select the Instance ID of the Cloud SQL instances that you want to export.
4. Select Export from the top navigation menu to export your database.
5. Perform the following tasks:
6. Select the + icon to create a new bucket.
7. Enter a globally unique name for your bucket followed by selecting CREATE. Leave all the other options to the default values as you will delete this bucket later.
8. Select CONFIRM to proceed with the creation process. This prompt asks if you want to make the bucket open for public access or private, private will work for you.
9. Select the SELECT button to select the newly created bucket to save your data inside.
10. Select EXPORT to confirm your selection and initiate the data export process.
11. Select the name of the file from the notification pane at the bottom right of the screen to redirect you to the storage bucket that has the exported file.
12. Select the DOWNLOAD button to download the data locally to your device.
13. Select DELETE to delete the bucket after the download finishes as you no longer need it.
Now, you have successfully exported your database from Google Cloud SQL. You already have the application source code so, no need to do anything from the Application side.
If you don't have a database on Google Cloud and want to follow along you can use my data export file Cloud_SQL_Export_2023-10-15 (22_09_32).sql from john0isaac/flask-webapp-postgresql-db . (github.com).
Step 2: Create an Azure Web App + Database
Azure App Service is an HTTP-based service for hosting web applications, REST APIs, and mobile back ends. You can develop in your favorite language, be it .NET, .NET Core, Java, Node.js, PHP, and Python. Applications run and scale with ease on both Windows and Linux-based environments. (Learn more: here)
1. Visit the Azure Portal https://portal.azure.com in your browser and sign in.
2. Type app services in the search bar at the top of the portal page and select App Service from the options that appear.
3. Select Create from the navigation menu followed by selecting Web App + Database.
4. Perform the following tasks:
In the Project Details section,
In the Web App Details section,
In the Database section,
5. Store the Database details in a safe place as you will need them in a later step followed by selecting Create to initiate the deployment process. Note that this is the only time that you will have access to the database password.
6. Wait for the deployment to finish. Select Go to resource.
Now you have successfully created a web application and a database with a single button this will enable you to ...
The website and database are empty
Step 3: Fork the Code and Configure Azure App Service Deployment
The sample code you will be using is an Artists Booking Venues Web Application powered by Python (Flask) and PostgreSQL Database.
1. Visit the following GitHub repository john0isaac/flask-webapp-postgresql-db . (github.com).
2. Select Fork to create a copy from the source code on your own GitHub account.
3. Navigate back to your newly created deployment on Microsoft Azure. Select Deployment Center.
4. In order to link your GitHub repository with the Web App, Perform the following tasks:
5. Wait for the deployment to finish. You can view the GitHub Actions deployment logs by selecting the Build/Deploy Logs.
6. Once the deployment is successful, select the website URL from the deploy job to view the live website.
Congratulations! You have successfully deployed a website to Azure App Service and as you can see the website works as expected.
But if you try to navigate to any page that needs to make a call to the database you get the following error.
Let's go ahead and solve this error by configuring your database.
Step 4: Configure your Relational Database
This web application uses SQLAlchemy Object Relational Mapping capabilities to map Python classes defined in models.py to database tables.
It also handles the initialization of a connection to the database and uses the create_all() function to initiate the table creation process.
But how do you trigger this function to make all of that happen?
If you navigate to the beginning of the app.py you will find that in order for the application to call the setup_db() function it needs an environment variable called DEPLOYMENT_LOCATION.
You may wonder, why are we using this? The answer is quite simple, different deployment locations require different database configurations.
Feel free to check out the difference in the environment folder.
Let's go ahead and define this environment variable.
1. Navigate back to your web app on Azure and select Configuration from the left side panel under the Settings label.
2. From the Configuration window, select + New application setting to add a new environment variable.
3. In the Name input text field, type DEPLOYMENT_LOCATION and in the Value, type azure followed by selecting Ok.
4. Confirm that DEPLOYMENT_LOCATION is in the list of Application settings then, select Save followed by selecting Continue.
5. Wait a couple of minutes then, refresh the website to see the update.
Congrats! It works but wait a minute... where is the data? everything is blank because you have not imported the database yet.
Note, that because the website is connected to the database now and the tables have been created you can create new data from the website, update, and delete it but you don't have access to the old data yet.
Step 5: Import your Data into Azure PostgreSQL
In order to import the data you need a database dump or a .SQL file uploaded to your GitHub repository. If you don't have that you can use my database export from the repository that you forked or if you didn't find it here.
Note, that because this application and database are deployed to a virtual network you can't access them unless you use a virtual machine deployed to the same virtual network and that's why you are going to make use of the SSH feature in your web app to access the database through the web app and import your data.
Before you do that Let's go and get the database info again.
1. Visit your resource group and select fullstack-demo-server or the name of your Azure Database for PostgreSQL flexible server.
2. Select Connect from the left side panel under the Settings label to get the connection parameters.
3. Copy the Connection Details because you will use them to connect to the database. If you read the notes you can see that it gives you clear instructions on how to connect.
4. Navigate back to your web app and select SSH from the left side panel under the Developer Tools label followed by selecting Go ->.
5. Inside the ssh session, execute the following command apt-get update to update the installed packages then the command apt-get install postgresql-client to install psql as it doesn't come preinstalled. If prompted Do you want to continue? type y and press Enter.
6. Execute the following commands to save the database connection details you copied before to the ssh session.
7. Execute the following command to import your .SQL file data to the PostgreSQL database. Note that I was able to get the file as it was uploaded with the website data from GitHub.
psql -f 'Cloud_SQL_Export_2023-10-15 (22_09_32).sql'
Note that executing this command might give you some errors that are okay to ignore as it's just telling you that the tables you are trying to create already exist in the database but it will safely insert your exported data.
Also, note that I had to clean up the exported SQL from Google Cloud a little bit but I didn't add anything to it I just removed the unnecessary to avoid errors in the ssh session.
8. Navigate back to the website, refresh any page and you'll find all the data there.
Congratulations!!! you have come a long way taking the data and web application from Google Cloud to Microsoft Azure through all the steps in this blog.
Clean Up
You can now safely delete the Google Cloud SQL database and disable your App Engine or even delete the whole project.
Once you finish experimenting on Microsoft Azure you might want to delete the resources to not consume any more money from your subscription.
You can delete the resource group and it will delete everything inside it or delete the resources one by one it's totally up to you.
Conclusion
Congratulations, you have learned and applied all the concepts behind taking an existing Python web application and a PostgreSQL database and migrating them to Microsoft Azure.
This gives you the ability to build your own web applications on Azure and explore other databases like Azure Cosmos DB or Azure Databases for MySQL as you will find that at the end you just need a connection string to connect with a different database and a dialect to translate your code to a language that the database understands. You have also learned that you can deploy your website to Microsoft Azure by selecting your website's programming language, no extra configuration is needed or creation of any file.
You can learn more at:
Do you want to become an entrepreneur and harness the power of AI in building your startup?
Join Microsoft Founders Hub for a chance to earn up to $2,500 of OpenAI credits and $1,000 of Azure credits to build your startup!
Found this useful? Share it with others and follow me to get updates on:
Continue reading...
In this blog, you will go through a step-by-step guide, from preparing your Full-stack web application to be deployed to Azure and exporting your data from Google Cloud SQL to deploying your application to Azure App Service, migrating your PostgreSQL database to Azure Databases for PostgreSQL and connecting it to your application.
We have got you covered whether you already have a full-stack application working on Google or looking to bring your first full-stack application to the Internet. You'll learn everything you need to do in order to deploy your website to Microsoft Azure.
Technical Architecture
Prerequisites
An Azure subscription.
- If you don’t already have one, you can sign up for an Azure free account.
- For students, you can use the free Azure for Students offer which doesn’t require a credit card only your school email.
Web Application Source Code from GitHub.
Summary of the steps:
Step 1: Export your Data from Google Cloud SQL.
Step 2: Create an Azure Web App + Database.
Step 3: Fork the Code and Configure Azure App Service Deployment.
Step 4: Configure your Relational Database.
Step 5: Import your Data into Azure PostgreSQL.
Step 1: Export your Data from Google Cloud SQL
In order to migrate your application to a different place whether it's Microsoft Azure or anywhere else you will need to take your existing data with you.
Google Cloud SQL provides you with the ability to export your database as a SQL dump file which can be used to recreate the whole database with all its tables and data anywhere you want.
1. Visit the Google Cloud Platform console.cloud.google.com in your browser and sign in.
2. Type cloud sql in the search bar at the top of the portal page and select SQL from the options that appear.
3. Select the Instance ID of the Cloud SQL instances that you want to export.
4. Select Export from the top navigation menu to export your database.
5. Perform the following tasks:
- Select the File format. The SQL type will work for you.
- Select the Data to export. The name of your database that has your tables and data.
- Select the Destination. The only supported destination is Google Cloud Storage. Select Browse.
6. Select the + icon to create a new bucket.
7. Enter a globally unique name for your bucket followed by selecting CREATE. Leave all the other options to the default values as you will delete this bucket later.
8. Select CONFIRM to proceed with the creation process. This prompt asks if you want to make the bucket open for public access or private, private will work for you.
9. Select the SELECT button to select the newly created bucket to save your data inside.
10. Select EXPORT to confirm your selection and initiate the data export process.
11. Select the name of the file from the notification pane at the bottom right of the screen to redirect you to the storage bucket that has the exported file.
12. Select the DOWNLOAD button to download the data locally to your device.
13. Select DELETE to delete the bucket after the download finishes as you no longer need it.
Now, you have successfully exported your database from Google Cloud SQL. You already have the application source code so, no need to do anything from the Application side.
If you don't have a database on Google Cloud and want to follow along you can use my data export file Cloud_SQL_Export_2023-10-15 (22_09_32).sql from john0isaac/flask-webapp-postgresql-db . (github.com).
Step 2: Create an Azure Web App + Database
Azure App Service is an HTTP-based service for hosting web applications, REST APIs, and mobile back ends. You can develop in your favorite language, be it .NET, .NET Core, Java, Node.js, PHP, and Python. Applications run and scale with ease on both Windows and Linux-based environments. (Learn more: here)
1. Visit the Azure Portal https://portal.azure.com in your browser and sign in.
2. Type app services in the search bar at the top of the portal page and select App Service from the options that appear.
3. Select Create from the navigation menu followed by selecting Web App + Database.
4. Perform the following tasks:
In the Project Details section,
- Select your Subscription.
- Select the Create new under (New) Resource group to create a new resource group to store your resources. Enter a unique name for the resource group followed by selecting OK.
- Select the Region you'd like to use.
In the Web App Details section,
- Enter a unique name for your applications. Note that this is the same subdomain for your deployed website.
- Select a runtime stack. Python 3.8 will work for you.
In the Database section,
- Select the Engine that will be used to create your database. PostgreSQL Flexible Server will work for you.
- Enter a unique name for your server. Note that the server is the place that will host your different database instances.
- Enter a unique name for your database. Note that this is the instance that will store your tables and data.
- Select whether you want to Add Azure Cache for Redis or not. Note that Azure Cache for Redis is a high-performance caching service that provides in-memory data store for faster retrieval of data but will incur more charges to your account.
- Select your preferred Hosting Plan. If you don't want to experiment with the application first select the standard option but for the purpose of this demo, you will select the Basic option which can be changed later. Note that the difference between the two plans is their different capabilities and the cost per service you are receiving.
- Select Review + create.
5. Store the Database details in a safe place as you will need them in a later step followed by selecting Create to initiate the deployment process. Note that this is the only time that you will have access to the database password.
6. Wait for the deployment to finish. Select Go to resource.
Now you have successfully created a web application and a database with a single button this will enable you to ...
The website and database are empty
Step 3: Fork the Code and Configure Azure App Service Deployment
The sample code you will be using is an Artists Booking Venues Web Application powered by Python (Flask) and PostgreSQL Database.
1. Visit the following GitHub repository john0isaac/flask-webapp-postgresql-db . (github.com).
2. Select Fork to create a copy from the source code on your own GitHub account.
3. Navigate back to your newly created deployment on Microsoft Azure. Select Deployment Center.
4. In order to link your GitHub repository with the Web App, Perform the following tasks:
- Select the Source. From the drop-down menu select GitHub.
- Select your preferred Account.
- Select your Organization. This is your GitHub username if you haven't forked the repository to an organization.
- Select your newly forked repository. This should be flask-webapp-postgresql-db if you haven't changed it.
- Select your preferred Branch. The main branch will work for you.
- Verify your changes and select Save.
5. Wait for the deployment to finish. You can view the GitHub Actions deployment logs by selecting the Build/Deploy Logs.
6. Once the deployment is successful, select the website URL from the deploy job to view the live website.
Congratulations! You have successfully deployed a website to Azure App Service and as you can see the website works as expected.
But if you try to navigate to any page that needs to make a call to the database you get the following error.
Let's go ahead and solve this error by configuring your database.
Step 4: Configure your Relational Database
This web application uses SQLAlchemy Object Relational Mapping capabilities to map Python classes defined in models.py to database tables.
It also handles the initialization of a connection to the database and uses the create_all() function to initiate the table creation process.
But how do you trigger this function to make all of that happen?
If you navigate to the beginning of the app.py you will find that in order for the application to call the setup_db() function it needs an environment variable called DEPLOYMENT_LOCATION.
You may wonder, why are we using this? The answer is quite simple, different deployment locations require different database configurations.
Feel free to check out the difference in the environment folder.
Let's go ahead and define this environment variable.
1. Navigate back to your web app on Azure and select Configuration from the left side panel under the Settings label.
2. From the Configuration window, select + New application setting to add a new environment variable.
3. In the Name input text field, type DEPLOYMENT_LOCATION and in the Value, type azure followed by selecting Ok.
4. Confirm that DEPLOYMENT_LOCATION is in the list of Application settings then, select Save followed by selecting Continue.
5. Wait a couple of minutes then, refresh the website to see the update.
Congrats! It works but wait a minute... where is the data? everything is blank because you have not imported the database yet.
Note, that because the website is connected to the database now and the tables have been created you can create new data from the website, update, and delete it but you don't have access to the old data yet.
Step 5: Import your Data into Azure PostgreSQL
In order to import the data you need a database dump or a .SQL file uploaded to your GitHub repository. If you don't have that you can use my database export from the repository that you forked or if you didn't find it here.
Note, that because this application and database are deployed to a virtual network you can't access them unless you use a virtual machine deployed to the same virtual network and that's why you are going to make use of the SSH feature in your web app to access the database through the web app and import your data.
Before you do that Let's go and get the database info again.
1. Visit your resource group and select fullstack-demo-server or the name of your Azure Database for PostgreSQL flexible server.
2. Select Connect from the left side panel under the Settings label to get the connection parameters.
3. Copy the Connection Details because you will use them to connect to the database. If you read the notes you can see that it gives you clear instructions on how to connect.
4. Navigate back to your web app and select SSH from the left side panel under the Developer Tools label followed by selecting Go ->.
5. Inside the ssh session, execute the following command apt-get update to update the installed packages then the command apt-get install postgresql-client to install psql as it doesn't come preinstalled. If prompted Do you want to continue? type y and press Enter.
6. Execute the following commands to save the database connection details you copied before to the ssh session.
7. Execute the following command to import your .SQL file data to the PostgreSQL database. Note that I was able to get the file as it was uploaded with the website data from GitHub.
psql -f 'Cloud_SQL_Export_2023-10-15 (22_09_32).sql'
Note that executing this command might give you some errors that are okay to ignore as it's just telling you that the tables you are trying to create already exist in the database but it will safely insert your exported data.
Also, note that I had to clean up the exported SQL from Google Cloud a little bit but I didn't add anything to it I just removed the unnecessary to avoid errors in the ssh session.
8. Navigate back to the website, refresh any page and you'll find all the data there.
Congratulations!!! you have come a long way taking the data and web application from Google Cloud to Microsoft Azure through all the steps in this blog.
Clean Up
You can now safely delete the Google Cloud SQL database and disable your App Engine or even delete the whole project.
Once you finish experimenting on Microsoft Azure you might want to delete the resources to not consume any more money from your subscription.
You can delete the resource group and it will delete everything inside it or delete the resources one by one it's totally up to you.
Conclusion
Congratulations, you have learned and applied all the concepts behind taking an existing Python web application and a PostgreSQL database and migrating them to Microsoft Azure.
This gives you the ability to build your own web applications on Azure and explore other databases like Azure Cosmos DB or Azure Databases for MySQL as you will find that at the end you just need a connection string to connect with a different database and a dialect to translate your code to a language that the database understands. You have also learned that you can deploy your website to Microsoft Azure by selecting your website's programming language, no extra configuration is needed or creation of any file.
You can learn more at:
- Deploy a website to Azure with Azure App Service learning path - Training | Microsoft Learn
- Build real world applications with Python - Training | Microsoft Learn
- Azure Static Web Apps - Training | Microsoft Learn
Do you want to become an entrepreneur and harness the power of AI in building your startup?
Join Microsoft Founders Hub for a chance to earn up to $2,500 of OpenAI credits and $1,000 of Azure credits to build your startup!
Found this useful? Share it with others and follow me to get updates on:
- Twitter (twitter.com/john00isaac)
- LinkedIn (linkedin.com/in/john0isaac)
Continue reading...