Azure Cosmos DB Networking options

Kazuyuki Miyake — Sun, 13 Sep 2020 13:20:01 +0000

Over the past sevral months or so, enhancements to the Networking options have become more active in the PaaS/Serverless area of Azure. Even for Azure Cosmos DB, which is called serverless DB, Private Link For Cosmos DB was generally available in spring 2020.

I would like to take this opportunity to summarize the network configuration of Cosmos DB, as we have been using this feature more and more in our real projects.

Three approaches for Cosmos DB Networking

Most Azure PaaS services, not just Cosmos DB, offer three types of network connections,

All networks
Service endpoints
Private endpoints

In fact, even with Cosmos DB provisioning, you can choose from three options (even after provisioning)

On the configuration screen, the expression is slightly different: Public endpoint is a connection via Service endpoint and Private endpoint is a connection using Private Link.

Service endpoints

Connection to Cosmos DB via Service endpoint is completed by adding a virtual network in the Firewall and virtual networks menu. When selecting a VNET, you need to specify a subnet to connect to Cosmos DB service endpoint (Public IP endpoint). The configuration may take up to 15 minutes to take effect, so you may have to wait until the Endpoint Status becomes Enable.

Configure access from virtual networks (VNet) | Microsoft Docs

One thing to keep in mind when setting up Service endpoint is that unless the client is participating in the virtual network, you won't be able to use Data Explorer or Azure Storage Explorer to manipulate the data. The easiest solution is to add the client IP address to the Firewall (also configurable in CIDR Range). In addition, you should also check the Allow access from Azure Portal if you are operating from the Azure Portal.

With the virtual network and IP firewall configured, it looks like this

Private endpoints

This is the connection via Plivate Link, where a private IP is assigned to the Cosmos DB endpoint, which is easy to use in an environment where you are using ExpressRoute to connect on-premises networks and virtual networks.

Configure Azure Private Link for an Azure Cosmos account | Microsoft Docs

For configuration, go to the Private Endpoint Connections menu and click on + Private Endpoint to configure private endpoints (create a private endpoint, specify a subnet, set a private DNS zone). When the configuration is complete, a Private endpoint resource will be created as shown below.

For client environments with Private endpoint, Cosmos DB can be used in conjunction with IP Firewalls. If you have policy constraints, you may need to connect to a virtual network using ExpressRoute or via Azure Bastion.

In this entry, I have introduced Networking options in Azure Cosmos DB. You can configure Service endpoints and Private endpoints in other Azure PaaS/Serverless services with almost similar settings.

With more network configuration options in the Azure Paas/Serverless area, not only has there been a wider range of network designs, but also enterprise projects that tend to have strict network policies have been helped by the fact that PaaS networks don't become an issue that stops discussions from moving forward.

Create scalable Vue.js application with Azure Static Web Apps

Kazuyuki Miyake — Tue, 26 May 2020 15:00:15 +0000

Have you joined Microsoft Build 2020, where Microsoft introduced various exciting news to the world? Among all of the updates, I am especially keen to introduce Azure Static Web Apps, the hosting service for static website which has been finally announced as Public Preview, and that enables us to create & deploy Vue.js Web application literally within "a few minutes".

Vue.js is made based on the concept of "Progressive Framework", hence we can start writing from very small, and gradually grow them into the enterprise
scale. In this post, I would like to introduce the first step to create scalable application using Vue.js and Azure Static Web Apps.

Creating new project with Vue CLI

In order to be ready to use Azure Static Web Apps, your application code needs to be on GitHub. First, write some basic code. A shortcut to create Vue.js project is to use Vue CLI. For example, with Vue CLI, you can configure Router, or TypeScript in the appropriate way.

Let’s get started. Using Terminal, move to directory where the application will be created to run the command like below,

npm i -g @vue/cli
vue create .

Next, create the project with frequently-used configuration with Vue CLI prompt. I choose TypeScript here because I believe TypeScript is going to be major in Vue.js project. Also, select Router, ESLint, Prettier and Jest which is majorly used in many projects. For "Use class-style component syntax?", I suggest to select "No" since it is not longer mainstream with Vue.3x.

Vue CLI v4.3.1
? Please pick a preset: Manually select features
? Check the features needed for your project: TS, Router, Linter, Unit
? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? No
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save   
? Pick a unit testing solution: Jest
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N) N

After a while, Vue.js project will be generated. Let’s check if application runs properly on local.

npm run serve

If the green Vue.js logo on the initial screen shows up, the basic configuration is all set up. You can already run not only TypeScript compile but also unit testing and formatting. The rest is just to add the code for features of the your application!

At this point, push codes to GitHub in order to get ready for the deploy to Azure.

Provisioning Azure Static Web Apps

Open Azure portal and go to "Create a resource", and search "static web apps". Fill in all the necessary information as follow. In this process, you link this resource with the GitHub Repo.

Click "Next:Build", and it takes you to the next step. In this step, type "dist" for "App artifact location". "dist" is a directory which outputs the static files for hosting , such as HTML,CSS, Javascript when we run npm run build (standard build command of Vue CLI) .

Click "Review + Create"and and wait a few minutes, deployment is complete! You don’t need to configure CI service or write the build script in YAML.

At this point, build workflow of GitHub Actions runs automatically in the background. To check the build status, you can open Actions tab in GitHub. If the Icon is green, then the build and deploy is successfully completed.

Now, let’s go back to the Azure portal and click the site URL. You will see the same page published as the application you ran locally.

At this moment, YAML file is already added to .github/workflows in GitHub repository, so do not forget to pull them to local.

Setting fallback routes

We selected "History Mode" when we set up Router with Vue CLI. In the SPA, re-loading a specific page cause 404 if we do not configure anything on the hosting environment.

To enable History Mode in a hosting environment, you need to make the appropriate setting for the environment. In case of hosting Vue.js on Azure Static Web Apps, create routes.json file under public directory like below.

{
  "routes": [
    {
      "route": "/*",
      "serve": "/index.html",
      "statusCode": 200
    }
  ]
}

So, let’s push this change to brunch and create pull request.

Here, The pull request is triggered and the deployment to Static Web Apps is executed. Once build process is completed, you can confirm the deployed change under "Environments" in Azure Portal.

Let’s check "about" page which we had problem with earlier. Now, it no longer shows 404 page after reloading.

All you have to do for the rest is just to merge pull request and wait for it being deployed to "production" environment. When pull request is closed, staging environment will be automatically deleted.

I hope you experienced how easy it is to host scalable Vue.js application with Azure. Azure Static Web Apps is currently available to Public Preview, for free! Who wouldn’t try it?

DEV Community: Kazuyuki Miyake