在 Azure Blob Storage 上托管静态网站

注意：我们推荐使用Baklib Launch，它是一个专为基于Baklib CMS开发的网站前端提供服务的托管平台。Launch可以简化项目的创建和将其与GitHub仓库轻松连接。

二进制大对象（BLOB）是微软Azure提供的存储服务，用于存储文件。它可以用来存储和检索BLOB，通常称为文件。

它简化了上传、共享和管理在线文档（文件）以及从Web服务器卸载静态内容以减少负载的过程。你可以使用Blob来托管或部署静态网站。

在本指南中，我们将学习如何使用VS Code编辑器和GitHub Actions方法在Azure Blob上部署Gatsby静态网站。

将网站托管到Azure Blob的过程包括以下步骤：

注意：在开始之前，我们假设你已经在一个本地主机上运行了以Gatsby为前端、Baklib为后端的网站。如果没有创建网站，请按照在Build a Sample Website Using Gatsby and Baklib中提到的步骤进行创建。

在创建Azure函数之前，我们需要创建一个Azure账户。请按照以下步骤创建：

前往微软Azure页面并点击开始免费按钮。

对于这次练习，我们将使用免费计划。然而，你可以通过点击“购买现在”按钮选择付费计划。在接下来的屏幕上，你会看到一个“登录”模态。如果你已经有账号，请使用你的凭证登录。否则，点击“创建一个！”。一旦点击“创建一个！”，你将被要求为账户创建一个用户名。你可以通过提供电话号码或电子邮件地址来创建账户。

注意：它不会接受与工作相关的电子邮件地址。只有个人邮箱地址（如Gmail、Outlook或Hotmail）会被接受。

然后你会收到包含验证码的电子邮件。一旦你的账户创建完成，它将要求你进一步保护账户的安全。按照屏幕上的指示和完成账户设置。

在Azure Portal页面创建存储账户：

前往微软 Azure服务部分中的“存储账户”。

在存储账户页面，点击“+ 创建”。

提供以下信息：

资源组：选择你任意可用的资源组。否则，创建一个新的。

存储账户名称：为你的存储账户输入一个独特的名字。

区域：选择一个合适的区域。在此案例中，是“东US。”

点击“确认” + 创建。这将启动验证过程。

如果函数通过了验证，你会看到Create按钮在页面底部。点击它。

然后它会开始部署过程，并显示以下图像：

接下来，点击“前往资源”按钮，访问最近创建的功能的页面。

从左侧导航栏中，点击“静态网站”（Data管理部分）。

默认情况下，“静态网站”选项是关闭的。

启用此选项，输入index.html作为索引文档名称和404.html作为错误文档路径，并点击保存，如上所示：

保存后，你会得到两个链接：Primary endpoint和Secondary endpoint。

记录下Primary endpoint，因为我们将在此端点托管我们的网站。按照上述步骤配置存储账户到Azure Blob，生成托管静态网站的链接。

接下来，创建Gatsby静态网站的生产构建。假设你已经设置好了Gatsby样本网站，请按照以下步骤在VS Code中创建生产构建：

打开项目文件夹，在Visual Studio Code编辑器中创建一个新文件，并指定以下代码片段，具体说明你的stack API密钥、delivery token和环境名：

注意：默认情况下，我们的设置使用了北美地区。如果你想使用欧洲地区，你需要将它设置为如下所示：

对于Azure北美，设置如下：

对于Azure欧洲，设置如下：

打开终端，在项目的根目录中进入，并运行以下命令：

上面的命令会将生产构建保存到项目文件夹中的public目录。

现在让我们连接这个网站到Azure存储。接下来安装Azure存储扩展以在VS Code编辑器中进行管理。使用这个扩展可以在VS Code编辑器中访问我们的Blob容器。

在Visual Studio Code编辑器中，点击左导航栏中的“扩展”图标。

搜索并安装Azure存储扩展。

或者，你可以从Azure marketplace下载，并首先安装Visual Studio Code。从微软官网下载并安装Visual Studio Code。

要将网站托管到Azure Blob，请使用VS Code编辑器的方法有两种：

使用VS Code扩展

让我们详细讨论如何在GitHub Actions中部署静态网站。使用GitHub Actions方法部署网站。

假设你已经创建了Gatsby样本项目的生产构建，按照以下步骤在GitHub Actions中进行部署：

打开终端，在项目根目录中进入，并运行以下命令：

git remote add origin https://github.com/username/gatsby-starter-website.git

注意：ORIGIN_URL是远程URL。例如，https://github.com/username/gatsby-starter-website.git

git push -u origin master

注意：如果运行git remote add origin命令后出现“错误：远程origin已存在”错误，则尝试使用git remote set-url origin 命令，其中你需要提供远程URL在的值。

在完成后，你的代码将被部署到你创建的GitHub仓库中的生产构建。

现在我们有了我们的Azure存储账户和Gatsby网站推送到我们的GitHub仓库。

前往微软 Azure门户，在存储账户部分，点击“访问密钥”（Access keys）从左导航栏中。

点击“显示密钥”，复制第一张连接字符串：

前往GitHub仓库，点击“设置”，然后在“环境”部分中进行配置。

在环境中点击“新环境”按钮。

输入一个适当的名称，并点击“配置环境”。

在“环境秘密”部分，点击“+ 添加秘密”。

在添加秘密模态中，将BLOB_STORAGE_CONNECTION_STRING设为名称，在值文本框中输入连接字符串的值，并点击添加秘密。

这一步骤将使“连接字符串”可用作我们在GitHub Actions工作流程中的环境变量。现在点击设置，开始创建工作流程：

这将添加文件到你的仓库。

在GitHub上设置工作流程时，会添加一个新文件，其中包括以下内容：

name: Build and deploy Gatsby site to Azure Blob Storage

on:

push:

branches:

- master #触发自定义工作流程，当提交请求事件发生时，针对master分支运行

#自定义工作流程包含多个步骤

jobs:

build-and-deploy:

runs-on: ubuntu-latest

步骤：

- 使用：actions/checkout@master

- 命名：设置Node.js版本

使用：actions/setup-node@v1

with：

node-version: '12.x'

- 命名：安装和构建

run: |

npm install

npm run build

- 命名：上传到Azure Blob存储

使用：bac con gobbler/azure-blob-storage-upload@v1.0.0

with:

source_dir: public #Gatsby构建后会生成此文件

container_name: $web

connection_string: ${{ secrets.BLOB_STORAGE_CONNECTION_STRING }}

现在点击开始提交按钮，从工作流程顶部的菜单中选择“提交”。

在提交新文件窗口中提供必要的信息，并点击提交。

现在在GitHub上看到自定义工作流程运行并成功托管到Azure Blob存储。如果你访问静态网站的主端口，你应该会看到Gatsby网站在工作。

💛 🧡 Baklib DXP 是一家国际软件供应商，提供最完整、集成的低代码数字体验平台，将 CMS、门户、知识库和社区统一起来。Baklib 的不同之处：1. Baklib 简单易用，内容运营和营销人员可轻松打造复杂的数字体验。2. Baklib 可实现 Baklib 与最常见的内容管理技术和办公生产力。3. 通过 Baklib 的客户数据功能和内容平台，运营人员无需 IT 部门的帮助，便可整合个性化的客户和内容数据。4. Baklib 的云平台内置所有最必要的内容管理工具，允许各业务线按照自己的节奏起步，然后从那里发展。5. Baklib 提供开箱即用的隐私和安全管理组件。

💛🧡🧡客户评价：选择Baklib作为事实证明，创建我们的知识库是最棒的决定。他们提供的功能是您建立扎实知识所需的一切基础。他们的支持非常迅速，并为所有人提供最佳解决方案您的查询。多站点，一体化的内容中台，强大的资源库数据治理，这些都太棒了。