Deploy flutter Web app to Azure VM

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 ofon-demand, scalable computing resourcesthat 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 

image001

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  

image003
image005

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 

image007

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. 

image009

Add Inbound Port Rules 

image011

Navigate to the VMs Networking 

Let’s add some ports for accessing the HTTP server  

Add inbound port rule using “Add inbound port rule” 

image012
image014

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. 

image016

Install Apache Server 

Install apache2 server in VM by using these commands 

$ sudo apt update 

$ sudo apt install apache2 

image017

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.  

Leave a Reply

Your email address will not be published.