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 “projectbuild” and paste it on the desktop or your suitable location.

Create Azure Virtual Machine

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 a 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.

Technology Offerings