This blog introduces you to the concept of VMs and publishing a flutter web app on Azure virtual machines using a Linux environment. Virtual machines are one of the most popular places to publish apps. A Virtual Machine gives you the flexibility of virtualization without having to buy and maintain expensive hardware. Typically, you choose a VM when you need complete control over the computing environment. Azure VMs gives you more features for monitoring your VMs usage and several types of on-demand, scalable computing resources that Azure offers. Azure Virtual Machines gives you the flexibility of virtualization for a wide range of solutions with compatibility of Linux, Windows Server, SQL Server, Oracle, IBM, SAP, and many more.
Build Flutter Web App
Let’s dive into the deployment of the app. We can build the flutter app by putting this command in the terminal. This command will generate a web version of your flutter app.
$ flutter build web
Copy the “web” folder from “project\build” and paste it on the desktop or your suitable location.
Create Azure Virtual Machine
Login into the azure portal https://portal.azure.com/
Search “Virtual Machine” or you can select the virtual machine from suggested services.
Create a new virtual machine using the “create” button
Fill in the relevant fields as shown in the figure
The password and username given here will be used to access VM in the future.
Review and then create
Wait for the VM deployment progress
You can also see all available VM’s in Virtual Machines Tab
Click on specific VM for more details if you can’t see the VM public IP then you need to start or restart your VM.
Add Inbound Port Rules
Navigate to the VMs Networking
Let’s add some ports for accessing the HTTP server
Add inbound port rule using “Add inbound port rule”
Create a new port rule on any protocol
Add port-80 for HTTP requests
Login Virtual Machine
Open the terminal and access the VM using the username and password
command
username public-IP
$ ssh [email protected]
After the correct password, you can access the VM through the terminal.
You will then see the elcome screen of ubuntu VM.
Install Apache Server
Install apache2 server in VM by using these commands
$ sudo apt update
$ sudo apt install apache2
Now paste your machine IP address in the browser search bar and you can see the apache2 server default page which means your apache server working perfectly. In case of any problem review all the above steps.
Permissions Access
For granting permissions run these commands in the Virtual Machine terminal
$ sudo chown -R username /var/www/
$ sudo chmod -R 755 /var/www
Upload Files to Virtual Machine
In your local computer or local machine run the “scp” command. The “scp” commandis responsible for copying files or directories between a local and a remote system or between two remote systems.
Local machine folder = desktop/flutter-web
-r = selecting a folder
Machine username = tutorials
Machine Public IP address = 20.127.131.142
Machine directory = /var/www
$ scp -r desktop/flutter-web [email protected]:/var/wwww
Create New Host File
Create new host files for your app and new document root in configuration.
#copy default config file
$ sudo cp /etc/apache2/sites-available/000-default.conf /etc/apache2/sites-available/tutorials.conf
#edit conf file using nano
$sudo nano /etc/apache2/sites-available/tutorials.conf
#//Add Virtual Host document root location in config file
<VirtualHost *:80>
DocumentRoot /var/www/flutter-web #// VM application folder
ErrorLog ${APACHE_LOG_DIR}/error.log #// VM error logs
CustomLog ${APACHE_LOG_DIR}/access.log combined #// VM logs
</VirtualHost>
Enable created Host files
Enable tutorials conf file
$ sudo a2ensite tutorials.conf
Disable default configuration
$ sudo a2dissite 000-default.conf
Restart the apache2 server to reflect the changes.
$ sudo systemctl restart apache2
Conclusion
In this blog, you learned the basics of Virtual machines and the advantages of azure Virtual Machines. You also learned how to upload files and configure flutter web app in the Virtual Machine. In the next blog, we will learn about the deployment of flutter web with node.js and mongo in a single virtual machine.