Introduction
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.
Unlock the Full Potential of Azure
Azure Virtual Machines offer immense power and flexibility. If you're ready to harness the full potential of Azure and take your web apps to new heights, we're here to guide you. From deployment strategies to optimizing Azure resources, we have the expertise you need.
Request a DemoCreate 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.
Read more about Automate Azure VM Start/Stop Using Azure Automation
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.
Disable default configuration.
Restart the apache2 server to reflect the changes.
Partner with Us for Web Development Excellence
Ready to elevate your web development game? AlphaBOLD is your trusted partner for achieving excellence in web development. Whether it's deploying web apps, optimizing performance, or implementing cutting-edge solutions, we're here to empower your projects.
Request a DemoConclusion
Explore Recent Blog Posts
