Take advantage of fully managed file shares in the cloud that are accessible via the industry-standard Server Message Block (SMB) protocol. Mount file shares concurrently in the cloud or on-premises on Windows, Linux, and macOS. Plus, cache Azure file shares on Windows Servers with Azure File Sync for local access performance. Folder in file share needed after url and mountfolder must exist. But the main reason for 'No route to host' was because the access key had forward slash in it! By using SMB, you can mount an Azure file share directly on Windows, Linux, or macOS, either on-premises or in cloud VMs, without writing any code or attaching any special drivers to the file system. You also can cache Azure file shares on on-premises file servers by using Azure File Sync for quick access, close to where the data is used.
Introduction
In this article, we will learn how to implement Azure serverless with Blazor web assembly. And to do that, we will create an app that lists out some Frequently Asked Questions (FAQ) on Covid-19.
Here's what we will cover:
The FAQs will be displayed in a card layout with the help of Bootstrap.
The Covid-19 FAQ app is deployed on Azure. See it in action at https://covid19-faq.azurewebsites.net/
What is a serverless architecture?
In traditional applications such as a 3-tier app, a client requests resources from the server, and the server processes the request and responds with the appropriate data.
However, there are some issues with this architecture. We need a server running continuously. Even if there are no requests, the server is present 24X7, ready to process the request. Maintaining server availability is cost-intensive.
Another problem is scaling. If the traffic is huge, we need to scale out all the servers which can be a cumbersome process.
An effective solution to this problem is serverless web architecture. The client makes a request to a file storage account instead of a server. The storage account returns the
index.html page along with some code that needs to be rendered on the browser.
Since there is no server to render the page, we are relying on the browser to render the page. All the logic to draw the element or update the element will run in the browser. We do not have any server on backend – we just have a storage account with a static asset.
This is a cost-effective solution as we do not have any server, just some static files in a storage account. It is also very easy to scale out for heavy load websites.
What is an Azure function?
Making the browser run all the logic to render the page seems exciting, but it has some limitations.
We do not want the browser to make database calls. We need some part of our code to run on the server-side such as connecting to a database.
This is where Azure functions come in handy. In a serverless architecture, if we want some code to run the server-side, then we use an Azure function.
Azure functions are an event-driven serverless compute platform. You need to pay only when execution happens. They are also easy to scale. Hence, we get both the scaling and the cost benefits with Azure functions.
To learn more you can refer to the Azure function official docs.
Why should you use Azure serverless?
An Azure serverless solution can add value to your product by minimizing the time and resources you spend on infrastructure-related requirements.
You can increase developer productivity, optimize resources and accelerate the time to market with the help of a fully managed, end-to-end Azure serverless solution.
To learn more, see the Azure serverless official doc.
What is Blazor?
Blazor is a .NET web framework for creating client-side applications using C#/Razor and HTML.
Blazor runs in the browser with the help of WebAssembly. It can simplify the process of creating a single page application (SPA). It also provides a full-stack web development experience using .NET.
Using .NET for developing Client-side application has multiple advantages:
Why should you use Blazor?
Blazor supports a wide array of features to make web development easier for us. Some of the prominent features of Blazor are:
To learn more about Blazor, please refer to the official Blazor docs.
Prerequisites
To get started with the application, we need to fulfill these prerequisites:
While installing the VS 2019, please make sure you select the Azure development and ASP.NET and web development workload. Format for hyperlinks macos.
Source Code
You can get the source code from GitHub here.
Create Azure Cosmos DB account
Log in to the Azure portal and search for the “Azure Cosmos DB” in the search bar and click on the result. On the next screen, click on the Add button.
This will open a “Create Azure Cosmos DB Account” page. You need to fill in the required information to create your database. Refer to the image shown below:
You can fill in the details like this:
Keep the other fields to its default value and click on the “Review+ Create” button. In the next screen, review all your configurations and click on the “Create” button. After a few minutes, the Azure Cosmos DB account will be created. Click on “Go to resource” to navigate to the Azure Cosmos DB account page.
Set up the Database
On the Azure Cosmos DB account page, click on “Data Explorer” on the left navigation, and then select “New Container”. Refer to the image shown below:
An “Add Container” pane will open. You need to fill in the details to create a new container for your Azure Cosmos DB. Refer to the image shown below:
You can fill in the details as indicated below.
Click on the “OK” button to create the database.
Add Sample data to the Cosmos DB
In the Data Explorer, expand the FAQDB database then expand the FAQContainer. Select Items, and then click on New Item on the top. An editor will open on the right side of the page. Refer to the image shown below:
Put the following JSON data in the editor and click on the Save button at the top.
We have added a set of questions and answer along with a unique id.
Follow the process described above to insert five more sets of data.
Get the connection string
Click on “keys”on the left navigation, navigate to the “Read-write Keys” tab. The value under
PRIMARY CONNECTION STRING is our required connection string. Refer to the image shown below:
Make a note of the
PRIMARY CONNECTION STRING value. We will use it in the latter part of this article, when we will access the Azure Cosmos DB from an Azure function.
Create an Azure function app
Open Visual Studio 2019, click on “Create a new project”. Search “Functions” in the search box. Select the Azure Functions template and click on Next. Refer to the image shown below:
In “Configure your new project” window, enter a Project name as
FAQFunctionApp . Click on the Create button. Refer to the image below:
A new “Create a new Azure Function Application settings” window will open. Select “Azure Functions v3 (.NET Core)”from the dropdown at the top. Select the function template as “HTTP trigger”. Set the authorization level to “Anonymous” from the drop-down on the right. Click on the Create button to create the function project and HTTP trigger function.
Refer to the image shown below:
Install package for Azure Cosmos DB
To enable the Azure function App to bind to the Azure Cosmos DB, we need to install the
Microsoft.Azure.WebJobs.Extensions.CosmosDB package. Navigate to Tools >> NuGet Package Manager >> Package Manager Console and run the following command:
Refer to the image shown below.
You can learn more about this package at the NuGet gallery.
Configure the Azure Function App
The Azure function project contains a default file called
Function1.cs . You can safely delete this file as we won’t be using this for our project.
Right-click on the
FAQFunctionApp project and select Add >> New Folder. Name the folder as Models. Again, right-click on the Models folder and select Add >> Class to add a new class file. Put the name of your class as FAQ.cs and click Add.
Open
FAQ.cs and put the following code inside it.
The class has the same structure as the JSON data we have inserted in the cosmos DB.
Right-click on the
FAQFunctionApp project and select Add >> Class. Name your class as CovidFAQ.cs . Put the following code inside it.
We have created a class
CovidFAQ and added an Azure function to it. The attribute FunctionName is used to specify the name of the function. We have used the HttpTrigger attribute which allows the function to be triggered via an HTTP call. The attribute CosmosDB is used to connect to the Azure Cosmos DB. We have defined three parameters for this attribute as described below:
We have decorated the parameter
questionSet , which is of type IEnumerable<FAQ> with the CosmosDB attribute. When the app is executed, the parameter questionSet will be populated with the data from Cosmos DB. The function will return the data using a new instance of OkObjectResult .
Add the connection string to the Azure Function
Remember the Azure cosmos DB connection string you noted earlier? Now we will configure it for our app. Open the
local.settings.json file and add your connection string as shown below:
The local.settings.json will not be published to Azure when we publish the Azure Function app. Therefore, we need to configure the connections string separately while publishing the app to Azure. We will see this in action in the latter part of this article. Test the Azure Function locally
Press F5 to execute the function. Copy the URL of your function from the Azure Functions runtime output. Refer to the image shown below:
Macos Prerequisites For Azure File Share Fslogix
Open the browser and paste the URL in the browser’s address bar. You can see the output as shown below:
Here you can see the data we have inserted into our Azure Cosmos DB.
Publish the Function app to Azure
We have successfully created the Function app, but it is still running in the localhost. Let’s publish the app to make it available globally.
Right-click on the
FAQFunctionApp project and select Publish. Select the Publish target as Azure.
Select the specific target as “Azure Function App (windows)”.
In the next window, click on the “Create a new Azure Function…” button. A new Function App window will open. Refer to the image as shown below:
You can fill in the details as indicated below:
Click on the “Create” button to create the Function App and return to the previous window. Make sure the option “Run from package file” is checked. Click on the Finish button.
Macos Prerequisites For Azure File Share Download
Now you are at the Publish page. Click on the “Manage Azure App Service Settings” button.
You will see a “Application Settings” window as shown below:
At this point, we will configure the Remote value for the “DBConnectionString” key. This value is used when the app is deployed on Azure. Since the key for Local and Remote environment is the same in our case, click on the “Insert value from Local” button to copy the value from the Local field to the Remote field. Click on the OK button.
Macos Prerequisites For Azure File Share Windows 7
You are navigated back to the Publish page. We are done with all the configurations. Click on the Publish button to publish your Azure function app. After the app is published, get the site URL value, append
/api/covidFAQ to it and open it in the browser. You can see the output as shown below.
This is the same dataset that we got while running the app locally. This proves that our serverless Azure function is deployed and able to access the Azure Cosmos DB successfully.
Enable CORS for the Azure app service
We will use the Function app in a Blazor UI project. To allow the Blazor app to access the Azure Function, we need to enable CORS for the Azure app service.
Open the Azure portal. Navigate to “All resources”. Here, you can see the App service which we have created while Publishing the app the in previous section. Click on the resource to navigate to the resource page. Click on CORS on the left navigation. A CORS details pane will open.
Now we have two options here:
We will use the second option for our app. Remove all the previously listed URL and enter a single entry as “*” wildcard. Click on the Save button at the top. Refer to the image shown below:
Create the Blazor Web assembly project
Open Visual Studio 2019, click on “Create a new project”. Select “Blazor App” and click on the “Next” button. Refer to the image shown below:
On the “Configure your new project” window, put the project name as
FAQUIApp and click on the “Create” button as shown in the image below:
On the “Create a new Blazor app” window, select the “Blazor WebAssmebly App” template. Click on the Create button to create the project. Refer to the image shown below:
To create a new razor component, right-click on the Pages folder, select Add >>Razor Component.An “Add New Item” dialog box will open, put the name of your component as
CovidFAQ.razor and click on the Add button. Refer to the image shown below:
Open
CovidFAQ.razor and put the following code into it.
In the
@code section, we have created a class called FAQ. The structure of this class is the same as that of the FAQ class we created earlier in the Azure function app. Inside the OnInitializedAsync method, we are hitting the API endpoint of our function app. The data returned from the API will be stored in a variable called questionList which is an array of type FAQ .
In the HTML section of the page, we have set a banner image at the top of the page. The image is available in the
/wwwroot/Images folder. We will use a foreach loop to iterate over the questionList array and create a bootstrap card to display the question and answer.
Adding Link to Navigation menu
The last step is to add the link of our CovidFAQ component in the navigation menu. Open
/Shared/NavMenu.razor file and add the following code into it.
Remove the navigation links for Counter and Fetch-data components as they are not required for this application.
Execution Demo
Press F5 to launch the app. Click on the Covid FAQ button on the nav menu on the left. You can see all the questions and answers in a beautiful card layout as shown below:
You can also check the live app at https://covid19-faq.azurewebsites.net/
Summary
In this article, we learned about serverless and its advantage over the traditional 3-tier web architecture. We also learned how the Azure function fits in serverless web architecture.
Macos Prerequisites For Azure File Share Price
To demonstrate the practical implementation of these concepts, we have created a Covid-19 FAQ app using the Blazor web assembly and Azure serverless. The questions and answers are displayed in the card layout using Bootstrap.
We have used the Azure cosmos DB as the primary database to store the questions and answers for our FAQ app. An Azure function is used to fetch data from the cosmos DB. We deployed the function app on Azure to make it available globally via an API endpoint.
See Also
If you like the article, share with you friends. You can also connect with me on Twitter and LinkedIn.
Originally published at https://ankitsharmablogs.com/
-->
Azure Files is Microsoft's easy-to-use cloud file system. Azure file shares can be mounted with the industry standard SMB 3 protocol by macOS El Capitan 10.11+. This article shows two different ways to mount an Azure file share on macOS: with the Finder UI and using the Terminal.
Note
Before mounting an Azure file share over SMB, we recommend disabling SMB packet signing. Not doing so may yield poor performance when accessing the Azure file share from macOS. Your SMB connection will be encrypted, so this does not affect the security of your connection. From the terminal, the following commands will disable SMB packet signing, as described by this Apple support article on disabling SMB packet signing:
Prerequisites for mounting an Azure file share on macOS
Mount an Azure file share via Finder
Macos Prerequisites For Azure File Share FreeMount an Azure file share via TerminalMacos Prerequisites For Azure File Share Mac
Next stepsAzure Migration Prerequisites
See these links for more information about Azure Files. https://digsite712.weebly.com/blog/format-wd-elements-for-mac-yosemite.
Comments are closed.
|
AuthorWrite something about yourself. No need to be fancy, just an overview. Archives
November 2020
Categories |