There are a number of ways you can build a website with Vue.js such as Java with Vue, NodeJS with Vue, NGINX serving Vue, etc. For the single-page applications, all you need to do is to load the initial index.html. Once you load the index.html the Vue library kicks in and do the rest of the job like loading components, calling API calls, etc. What if there are no backend calls and you want to build a static website with Vue.js?

您可以通过多种方式使用Vue.js构建网站，例如Java与Vue，NodeJS与Vue，NGINX服务Vue等。对于单页应用程序，您要做的就是加载初始索引。 html。 加载index.html之后，Vue库就会启动，并完成其余工作，如加载组件，调用API调用等。如果没有后端调用，并且您想使用Vue.js构建静态网站怎么办？

Azure CDN with blob storage is one of the options which provides a low cost and highly reliable static website hosting solution. These static sites have only CCS, HTML, JS files, fonts, etc. In this post, we can see how we can build a static website with Vue and host that on Azure.

具有blob存储的Azure CDN是提供低成本和高度可靠的静态网站托管解决方案的选项之一。 这些静态网站只有CCS，HTML，JS文件，字体等。在本文中，我们可以看到如何使用Vue构建静态网站并将其托管在Azure上。

• Example Project

  示例项目

• Prerequisites

  先决条件

• Host Static Website With Azure Blob Storage

  使用Azure Blob存储托管静态网站

• Deliver With Azure CDN

  随Azure CDN一起交付

• Uploading With Azure CLI

  使用Azure CLI上传

• Summary

  概要

• Conclusion

  结论

示例项目(Example Project)

Here is an example project which we can put in the Azure blob storage for static website hosting. This is a simple profile page with a header and some sections.

这是一个示例项目，我们可以将其放入Azure Blob存储中以进行静态网站托管。 这是一个简单的配置文件页面，其中包含标题和一些部分。

// clone the project
git clone https://github.com/bbachi/my-profile-vuejs.git// install dependencies and start the project
npm install
npm run serve

先决条件(Prerequisites)

You should be familiar with Vue and how Vue CLI Service builds stuff. If you are not familiar with Vue check out this link or go to their official website here.

您应该熟悉Vue以及Vue CLI服务如何构建东西。 如果您不熟悉Vue，请查看此链接或在此处访问其官方网站。

• Vue

  Vue

• Install Vue CLI Service

  安装Vue CLI服务

• Sample Project Github link

  示例项目Github链接

Once you install the necessary components and run the above project on your local machine. It’s time to create Microsoft Azure Account checkout this link

安装必要的组件并在本地计算机上运行以上项目后。 是时候创建Microsoft Azure帐户签出此链接了

• Microsoft Azure Account

  Microsoft Azure帐户

• Create a subscription
  创建订阅
• Create a Storage Account
  创建一个存储帐户

You can see the below dashboard once you create your account.

创建帐户后，您可以看到以下信息中心。

创建订阅(Create a subscription)

You need to create a subscription that’s how It serves as a single billing unit for Azure resources in that services used in Azure are billed to a subscription

您需要创建是如何它作为Azure的资源的单一计费单位，在Azure中使用的服务被宣传为订阅订阅

创建一个存储帐户(Create a Storage Account)

An Azure storage account contains all of your Azure Storage data objects: blobs, files, queues, tables, and disks. The storage account provides a unique namespace for your Azure Storage data that is accessible from anywhere in the world over HTTP or HTTPS. Let’s create a storage account under this subscription.

一个Azure存储帐户包含您所有的Azure存储数据对象：blob，文件，队列，表和磁盘。 该存储帐户为您的Azure存储数据提供了唯一的命名空间，可通过HTTP或HTTPS从世界上的任何地方访问该存储空间。 让我们在此订阅下创建一个存储帐户。

If you don’t have resource groups under subscription you need to create one. Resource groups are the ones that groups all your resources under the subscription. You can create multiple resource groups.

如果订阅中没有资源组，则需要创建一个。 资源组是将预订下的所有资源分组的组。 您可以创建多个资源组。

Once you review and create you can see the following screens.

审核和创建后，您将看到以下屏幕。

使用Azure Blob存储托管静态网站(Host Static Website With Azure Blob Storage)

Now we have a subscription, resource groups, and storage accounts created on our Azure account. It’s time to build our app with this command npm run build. When you do that all the built assets can be found in the dist folder.

现在，我们在Azure帐户上创建了一个订阅，资源组和存储帐户。 现在是时候使用此命令npm run build.来构建我们的应用程序了npm run build. 执行此操作后，可以在dist文件夹中找到所有构建的资产。

Now, go to your storage account on Azure and click on the static website on the left navigation and give the required index and error pages.

现在，转到您在Azure上的存储帐户，然后单击左侧导航栏中的静态网站，并提供所需的索引和错误页面。

Once you enabled Azure creates we container called $web in which you can upload all your build files as below and it creates the primary endpoint as well.

启用后，Azure会创建一个名为$ web的容器，您可以在其中上载所有构建文件，如下所示，它还会创建主要端点。

Copy the primary endpoint and hit it in the browser once the upload is complete.

复制主要端点，并在上传完成后在浏览器中将其命中。

If you want to create a folder and upload it into that folder you can do that by selecting advanced and name the folder. I named it my-profile here.

如果要创建一个文件夹并将其上传到该文件夹​​，可以通过选择高级并命名该文件夹来完成。 我在这里将其命名为我的个人资料。

In this case, you have to change the context path on the Vue app as well to my-profile

在这种情况下，您必须将Vue应用程序上的上下文路径也更改为“我的个人资料”

随Azure CDN一起交付 (Deliver With Azure CDN)

You can enable Azure Content Delivery Network (CDN) to cache content from a static website that is hosted in an Azure storage account that provides consistent low latencies to your website from anywhere in the world.

您可以启用Azure内容交付网络(CDN)来缓存来自Azure网站中托管的静态网站的内容，该静态网站可以在世界各地为您的网站提供一致的低延迟。

Let’s select an Azure CDN under blob service and give CDN endpoint name and you need to select your Azure blob storage URL as the origin hostname. Make sure you remove protocol identifier https and trailing slash at the end.

让我们在blob服务下选择一个Azure CDN并指定CDN终结点名称，然后需要选择Azure blob存储URL作为原始主机名。 确保删除协议标识符https和末尾的斜杠。

If it’s successful you can see newly created endpoints under the Endpoints section.

如果成功，您可以在“端点”部分下看到新创建的端点。

You can see all the details about this endpoint when you click on it such as the resource group, location, subscription, endpoint, origin, etc.

单击此端点后，您可以查看有关该端点的所有详细信息，例如资源组，位置，订阅，端点，来源等。

After creating a CDN endpoint, it will not immediately be available for use, as it takes time for the registration to propagate through the CDN. You might get this following error page.

创建CDN终结点之后，它将无法立即使用，因为注册需要花费一些时间才能通过CDN传播。 您可能会收到以下错误页面。

Make sure you go through this troubleshooting page. If you set up everything correct wait for 10 minutes or so, it will start working.

确保您通过此故障排除页面。 如果一切正确，请等待10分钟左右，它将开始工作。

使用Azure CLI上传(Uploading With Azure CLI)

We have done everything manually. We can actually do the same thing with Azure CLI commands Let’s see how we can do that.

我们已手动完成所有操作。 实际上，我们可以使用Azure CLI命令执行相同的操作。让我们看看如何做到这一点。

Step1: The first step would be logging in with Azure CLI. This configures the CLI with the user account. It will open the browser and takes your credentials and gives you a JSON response.

步骤1：第一步是使用Azure CLI登录。 这将使用用户帐户配置CLI。 它将打开浏览器并获取您的凭据，并为您提供JSON响应。

az login

Step2: Let’s create a subscription or set the subscription that you are using for the next commands.

步骤2：让我们创建一个订阅或设置您要用于下一个命令的订阅。

// list subscriptions
az account list --output table// ses the subscription
az account set --subscription bc5fbeca-2e67-4bfb-85bb-58480ab3bb30

Step3: Create a resource group

第三步：创建资源组

az group create --name staticwebhosting --location westcentralus

Step4: Let’s create a storage account with resource group name staticwebhosting and location eastus

步骤4：让我们创建一个资源组名称为staticwebhosting和位置eastus的存储帐户

az storage account create \
--name staticvueweb \
--resource-group staticwebhosting \
--location eastus \
--sku Standard_ZRS \
--encryption-services blob

Step5: Enable static web hosting on that storage account

步骤5：在该存储帐户上启用静态网络托管

az storage blob service-properties update \
--account-name staticvueweb \
--static-website \
--404-document error.html \
--index-document index.html

Step6: Upload all the documents to the blob storage

步骤6：将所有文件上传到Blob储存空间

az storage blob upload-batch -s ./dist/ -d \$web \
--account-name staticvueweb

Step7: Create a CDN endpoint with the following command

步骤7：使用以下命令创建CDN端点

az cdn endpoint create -g staticwebhosting \
-n endpointName \
--profile-name profileName \
--origin <endpoint of your blob service>

概要 (Summary)

• Azure CDN with blob storage is one of the options which provides a low cost and highly reliable static website hosting solution.
  具有blob存储的Azure CDN是提供低成本和高度可靠的静态网站托管解决方案的选项之一。
• You need to create an Azure account, subscription, resource groups, and storage account before you create static website hosting.
  在创建静态网站托管之前，您需要创建一个Azure帐户，订阅，资源组和存储帐户。

• You need to create a subscription that’s how It serves as a single billing unit for Azure resources.

  您需要创建一个订阅，以此作为Azure资源的单个计费单位。

• An Azure storage account contains all of your Azure Storage data objects: blobs, files, queues, tables, and disks.
  一个Azure存储帐户包含您所有的Azure存储数据对象：blob，文件，队列，表和磁盘。
• Resource groups are the ones that groups all your resources under the subscription.
  资源组是将预订下的所有资源分组的组。
• You can just upload all the built files to the $web container that the storage account created for you when you enable a static website.
  您可以将所有构建的文件上载到启用静态网站时存储帐户为您创建的$ web容器中。
• You can upload all the files into a folder as well. In that case, you have to build the app with that particular context path.
  您也可以将所有文件上传到文件夹中。 在这种情况下，您必须使用特定的上下文路径来构建应用程序。
• You can set up an Azure CDN endpoint for your static website on the Azure blob storage.
  您可以在Azure blob存储上为静态网站设置Azure CDN终结点。
• After creating a CDN endpoint, it will not immediately be available for use, as it takes time for the registration to propagate through the CDN.
  创建CDN终结点之后，它将无法立即使用，因为注册需要花费一些时间才能通过CDN传播。

• Here is the troubleshooting page if something goes wrong.

  如果出现问题，这是故障排除页面。

• You can map to a custom domain as well if you have one.
  您也可以映射到自定义域。

结论 (Conclusion)

Static website hosting on the Azure is pretty straight forward. Try this if you are building static web apps.

在Azure上托管静态网站非常简单。 如果要构建静态Web应用程序，请尝试此操作。