Deploy DB driven Laravel web app to Azure App Service running on Linux NGINX web server through GitHub Actions

Laravel is an open-source PHP framework designed to make developing web apps mush easier and faster through built-in features. It is based on the MVC design pattern.

In this article, I will show you how to deploy a Laravel application to Azure App Services. The Azure web server is NGINX running on Linux version "Debian GNU/Linux 10 (buster)".

Assumptions

The following is assumed:

• You have Git, PHP and Composer installed on your computer.
• You have an Azure subscription
• You have a GitHub account

Getting Started

We will start our journey with a very simple Laravel application that lists some data from a SQLite database. Go into a working directory on your computer and run the following command from a terminal window to clone a GitHub repo:

git clone https://github.com/medhatelmasry/laravel-azure.git

It is a good idea to delete the .git folder on your computer.

Once the application is cloned, change directory to the cloned app and start your app as shown below:

cd laravel-azure

composer install

php artisan serve --port=8888

The web server will start on your computer listening on port 8888.

Starting Laravel development server: http://127.0.0.1:8888

[Sat Mar 26 15:36:29 2022] PHP 8.1.2 Development Server (http://127.0.0.1:8888) started

Point your browser to http://localhost:8888/ and you will see the following page:

For demo purposes, data is pulled from a SQLite database file at database/autos.db. 

Disclaimer: It is normal practice that the .env file is excluded from being pushed to source control. If you look at the .gitignore file, the line pertaining to .env is commented out because there is really no confidential information in this file.

Create a repository in your GitHub account and push the source code to it.

Create Azure App Service

Login to your Azure account by visiting https://portal.azure.com. Enter "app services" in the filter field, then click on "App Services".

Click on "+ Create" on the top left-side.

On the "Create Web App Page", choose. your subscription then create new resource group.

Give your app a suitable host name that is unique.

Next, ensure these settings for Publish, Runtime stack and Operating System:

Choose suitable values for the remaining settings based on your individual preference then click on the blue "Review + create" button:

Click on Create button after you have reviewed your. choices.

Once your app service is successfully provisioned, you can click on the "Go to resource" button.

You can see a default web page to your web app be clicking on the URL link on the top right-side.

The default page looks like this.

\

CI/CD pipeline

Of course, we want to deploy our Laravel PHP site from our GitHub repo. An easy way to achieve this is to use Azure's "Deployment Center". Click on "Deployment Center" in the left-side navigation.

In the "Deployment Center" blade, select GitHub.

If this is your first time to connect Azure to your GitHub account, you will be asked to go through the GitHub authentication process. Thereafter, select the appropriate GitHub Organization, Repository and Branch. My experience was:

Once you click on Save, the deployment process commences.

To go to your GitHub repo, click on the main link under Branch.

To see the deployment in action, click on Actions in your GitHub repository.

Click on the workflow in progress.

The workflow will be going through a build and deploy process. 

Be patient as it takes about 15 minutes to complete. This is because during build the command "composer install" is executed. This produces a multitude of files under the vendors folder, which are thereafter sent to Azure. Once the workflow is completed, your GitHub workflow page will look like this:

The workflow files were automatically generated and placed a .yml file in the .github/workflows folder with your source code.

You can click on the .yml file to see what the file looks like.

At this point, it is worth going back to the code on your computer and doing a pull of your code so that you get a copy of the .yml file that was added to your source code.

Configuring app on Azure

Back on the Azure portal, if you refresh the default page of our web app, you will experience a "403 Forbidden" message, which typically means that the root directory has no welcome page.

This is understandable because the main index.php page in Laravel resides in the /public folder. THis means that we need to do some configuration work on Azure. 

In Azure, enter the term advanced in the search input field then click on "Advanced Tools".

Click "Go -->".

A page opens up in a new browser tab. Click on SSH on the top menu.

A Linux terminal window is open.

If you are interested to know what version of Linux this is, enter the following terminal command:

cat /etc/os-release

The value beside PRETTY_NAME is the Linux distribution and version.

PRETTY_NAME="Debian GNU/Linux 10 (buster)"

NAME="Debian GNU/Linux"

VERSION_ID="10"

VERSION="10 (buster)"

VERSION_CODENAME=buster

ID=debian

HOME_URL="https://www.debian.org/"

SUPPORT_URL="https://www.debian.org/support"

BUG_REPORT_URL="https://bugs.debian.org/"

We will make a copy of the existing nginx configuration and place the file inside the /home/site directory with the following command:

cp /etc/nginx/sites-available/default /home/site/default

Once copied, edit the /home/site/default file with nano or vi. I will use nano.

nano /home/site/default

Make the following changes:

From	To	Around Line #
root /home/site/wwwroot	root /home/site/wwwroot/public	6
location / { index index.php index.html index.htm hostingstart.html; }	location / { index index.php index.html index.htm hostingstart.html; try_files $uri $uri/ /index.php?$query_string; }	10

In nano, hit CTRL X to save, enter Y then hit return.

We need to create a bash script file that overrides the existing default file with our customized version, then restart the server. Change directory to the site folder.

cd site

Inside the site directory, using vi or nano, create a file named startup.sh. To create a file with nano, type "nano startup.sh". Otherwise,  to create a file with vi, type "vi startup.sh". Add the following content to startup.sh:

#!/bin/bash

cp /home/site/default /etc/nginx/sites-available/default

service nginx reload

We will make our bash script file executable with:

chmod u+x startup.sh

While in the terminal window on Azure, let's visit the folder that contains our Laravel application. Do this by going to the wwwroot folder.

cd wwwroot

ls -a

This reveals the existence of all the files that we had on GitHub plus files in the vendor folder.

Navigate back to your App Service via the Azure Portal. Select Configuration in the Settings section.

Click on the "General Settings" tab, enter "/home/site/startup.sh" for the "Startup Command", then click on Save.

Click on blue Continue button the the "Save changes" prompt.

Now, when you refresh the website, you should see that our web app is working as expected.

Conclusion

We have successfully deployed a database driven Laravel PHP application to Azure App Services through GitHub. I hope you use the principles you learned in this tutorial to deploy much more interesting Laravel applications.

Build & publish Azure Functions app that uses a budget SQLite database & .NET 6.0

In this tutorial I will build a Web API application using Azure Functions & SQLite. Although it is not typical to use SQLite with Azure Functions, this is a decent option if you want to have a cheap storage solution. I will later deploy the SQLite enabled Azure Function. This tutorial was done on a Windows 11 computer with VS Code.

Source code: https://github.com/medhatelmasry/SQLiteFunction.git

Prerequisites

• You need an Azure account
• VS Code
• .NET Core 6.0
• Install dotnet-ef tool
• Install Azure Functions Core Tools
• Azure Functions Extension for VS Code

Create a folder named SQLiteFunction on your hard drive at the location where your project will reside. 

Under the Functions tab in VS Code, create a new Azure Functions project.

Navigate to the location on your hard drive that you have designated as your workspace folder for this project. You will next be asked to select a programming language. Choose C#.

You will then be asked to choose the .NET runtime, choose .NET 6:

You will be asked to choose a template for your project's first function. Note that you can have more than one function in your project. Choose HttpTrigger.

Give your function a name. I named my function HttpApi.

Hit Enter after you give your function a name. Give your class a namespace. The namespace I used is SQLiteFunction. I then hit Enter.

Choose Anonymous for AccessRights.

When asked about how you would like to open your project, choose "Open in current window".

If a popup window appears asking if you wish to restore unresolved dependencies, click the Restore button.

Let us see what the app does. Hit CTRL F5 on the keyboard. The built-in VS Code terminal window will eventually display a URL that uses port number 7071:

NOTE: You can start your function app with the terminal command: func start

Copy and paste the URL into a browser or hit CTRL Click on the link. You will see the following output in your browser:

The message in your browser suggests that you should pass a name query string. I appended the following to the URL: ?name=Superman and got the following result:

We will need to add some NuGet packages. Execute the following dotnet commands from a terminal window in the root directory of your project:

dotnet add package Microsoft.Azure.Functions.Extensions

dotnet add package Microsoft.EntityFrameworkCore.SQLite

dotnet add package Microsoft.EntityFrameworkCore.SQLite.Design

dotnet add package Microsoft.EntityFrameworkCore.Tools

Let us make a few minor enhancements to our application.

1) Our SQLite database will be named school.db. Add the following to the project's .csproj file so that the SQLite database is copied to the output directory when the app gets built:

<ItemGroup>

 <None Update="school.db">

   <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>

 </None>  

</ItemGroup>

2) Change the signature of the HttpAPI class so that it does not have the static keyword. Therefore, the signature of the class will look like this:

public class HttpApi

3) Create a Models folder and add to it a simple Student.cs class file with the following content:

using System.ComponentModel.DataAnnotations;

namespace SQLiteFunction.Models;

public class Student {

    public int StudentId { get; set; }

    [Required]

    public string FirstName { get; set; }

    [Required]

    public string LastName { get; set; }

    [Required]

    public string School { get; set; }

}

4) We will deploy our Azure Functions app to a Windows server on Azure. When the school.db SQLite database file is published to Azure, it will reside in directory d:\home\site\wwwroot. Therefore, we shall create a helper class that will locate for us the SQLite database file in both development and deployment environments. Create a file named Utils.cs in the Models folder and add to it the following code:

using System;

namespace SQLiteFunction.Models;

public class Utils

{

    public static string GetSQLiteConnectionString()

    {

        var home = Environment.GetEnvironmentVariable("HOME") ?? "";

        Console.WriteLine($"home: {home}");

        if (!string.IsNullOrEmpty(home))

        {

            home = System.IO.Path.Combine(home, "site", "wwwroot");

        }

        var databasePath = System.IO.Path.Combine(home, "school.db");

        var connStr = $"Data Source={databasePath}";

        return connStr;

    }

}

The above helper class provides us with a static method Utils.GetSQLiteConnectionString() that returns the fully qualified location of the SQLite database file named school.db.

5) Add an Entity Framework DbContext class to the Models folder. In our case, we will add a class file named ApplicationDbContext.cs with the following content:

using Microsoft.EntityFrameworkCore;

using System;

namespace SQLiteFunction.Models;

public class ApplicationDbContext : DbContext

{

    public ApplicationDbContext() { }

    public ApplicationDbContext(DbContextOptions<ApplicationDbContext> options) : base(options) { }

    public DbSet<Student> Students { get; set; }

    protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)

    {

        if (!optionsBuilder.IsConfigured)

        {

             optionsBuilder.UseSqlite(Utils.GetSQLiteConnectionString());

        }

    }

    protected override void OnModelCreating(ModelBuilder builder)

    {

        base.OnModelCreating(builder);

        builder.Entity<Student>().HasData(

          new

          {

              StudentId = 1,

              FirstName = "Jane",

              LastName = "Smith",

              School = "Medicine"

          }, new

          {

              StudentId = 2,

              FirstName = "John",

              LastName = "Fisher",

              School = "Engineering"

          }, new

          {

              StudentId = 3,

              FirstName = "Pamela",

              LastName = "Baker",

              School = "Food Science"

          }, new

          {

              StudentId = 4,

              FirstName = "Peter",

              LastName = "Taylor",

              School = "Mining"

          }

        );

    }

}

The above context class seeds some sample data pertaining to four students.

6) To register a service like ApplicationDbContext, create a class file named Startup.cs in the root of your application. The Startup class implements FunctionStartup. This class will look like this:

using Microsoft.EntityFrameworkCore;

using Microsoft.Extensions.DependencyInjection;

using Microsoft.Azure.Functions.Extensions.DependencyInjection;

using SQLiteFunction.Models;

[assembly: FunctionsStartup(typeof(SQLiteFunction.StartUp))]

namespace SQLiteFunction

{

    public class StartUp : FunctionsStartup

    {

        public override void Configure(IFunctionsHostBuilder builder)

        {

            builder.Services.AddDbContext<ApplicationDbContext>(options =>

            {

                options.UseSqlite(Utils.GetSQLiteConnectionString());

            });

        }

        public override void ConfigureAppConfiguration(IFunctionsConfigurationBuilder builder)

        {

            base.ConfigureAppConfiguration(builder);

        }

    }

}

7) Inject the ApplicationDbContext class that is needed by your function class. Open HttpApi.cs in the editor and add the following instance variables and constructor at the top of the class:

private readonly ApplicationDbContext _context;

 

public HttpApi(ApplicationDbContext context) {

   _context = context;

}

8) The next step is to apply Entity Framework migrations. Open a terminal window in the root of your application and execute the following EF migration command inside the same terminal window:

dotnet-ef migrations add m1 -o Data/Migrations

This produces a Data/Migrations folder in your project.

9) The next step is to create the database and tables. Execute the following command in the same terminal window as above:

dotnet-ef database update

If all goes well, you will receive a message that looks like this:

Applying migration '20220314204919_m1'.

Done.

10) Let us now create an endpoint in our Azure function that returns all the students as an API. Add the following method to the Azure functions file named HttpApi.cs:

[FunctionName("students")]

public IActionResult GetStudents(

   [HttpTrigger(AuthorizationLevel.Anonymous, "get", Route = "students")] HttpRequest req,

   ILogger log) {

   

   log.LogInformation("C# HTTP GET trigger function processed api/students request.");

   var studentsArray = _context.Students.ToArray();

   return new OkObjectResult(studentsArray);

}

All that is left for us to do is test out our application and make sure it returns our students data. Run the application by hitting CTRL F5 on the keyboard. You will see the following output in a VS Code terminal window:

Copy and paste the /api/students endpoint into a browser. Alternatively, you can simply hit CTRL Click on the link. The result will look like this:

Deployment to Azure

Click on the "Deploy to Function App ..." icon.

Select your subscription.

Choose "+ Create new Function App in Azure ...".

Enter a globally unique name for your function app then hit Enter.

Select .NET 6 for runtime stack:

Choose a preferred data center.

The deployment process starts. Be patient as it could take 3-4 minutes. When deployment is complete you will see the following message:

If you click on the "View output" you will see the two endpoints. 

Although the first endpoint works, the second does not. To fix this problem, login into the azure portal https://portal.azure.com. In the filter field, enter func then choose "Function App".

Click on the function that was created.

Select Configuration on the left navigation.

Click on WEBSITE_RUN_FROM_PACKAGE.

Change the value from 1 to 0 then click on OK.

Remember to Save at the top.

Back in VS Code, publish your functions app again.

Click on Deploy to confirm.

This time, deployment will not take as long as the last time. Once deployment is completed, try the /api/students on the deployed endpoint and you should find it working to your satisfaction.

Conclusion

It is easy to create Azure Functions with the SQLite. Also, creating an API with Azure Functions is much more cheaper than doing it with an ASP.NET Core Web API application because you pay a fraction of a cent for every request and the app does not need to be constantly running. It is also worth mentioning that using SQLite makes it even cheaper as you do not need to pay extra for hosting your relational database.