AdminJS与Azure集成：微软云服务部署与管理指南-优快云博客

AdminJS与Azure集成：微软云服务部署与管理指南

【免费下载链接】adminjs AdminJS is an admin panel for apps written in node.js 项目地址: https://gitcode.com/gh_mirrors/ad/adminjs

前言：AdminJS与Azure的完美结合

你是否还在为Node.js应用的后台管理界面和云部署而烦恼？AdminJS作为一款功能强大的Node.js管理面板框架，结合微软Azure云服务，能为你提供一站式的部署与管理解决方案。本文将详细介绍如何将AdminJS应用部署到Azure云平台，并利用Azure的各项服务进行高效管理，让你轻松构建企业级应用。

AdminJS简介

AdminJS是一个为Node.js应用打造的自动管理界面，开发者只需提供数据库模型，AdminJS就能生成直观的用户界面，方便你或其他授权用户管理应用内容。它的灵感来源于Django Admin、Rails Admin和Active Admin等知名管理界面框架。

AdminJS的核心功能包括：

对任何资源进行CRUD操作
自定义业务操作
基于资源模式的表单验证
功能齐全的仪表板与小部件
自定义资源装饰器

项目的主要文件结构如下：

源代码：src/
类型定义：index.d.ts
主入口文件：index.js
配置文件：tsconfig.json

Azure云服务概述

Microsoft Azure是微软提供的云计算平台，它提供了一系列云服务，包括计算、分析、存储和网络等。通过Azure，你可以快速部署应用程序，无需担心基础设施的维护。

Azure的主要服务类别包括：

计算服务：如Azure App Service、Azure Functions等
数据库服务：如Azure Cosmos DB、Azure SQL Database等
存储服务：如Azure Blob Storage、Azure File Storage等
网络服务：如Azure Virtual Network、Azure CDN等

准备工作

环境要求

在开始集成之前，请确保你的开发环境满足以下要求：

Node.js版本 >= 16.0.0（可通过package.json查看详细依赖）
npm或yarn包管理器
Azure账号（可在Azure官网注册免费账户）
Azure CLI工具

安装Azure CLI

Azure CLI是管理Azure资源的命令行工具，安装方法如下：

# Windows
winget install Microsoft.AzureCLI

# macOS
brew install azure-cli

# Linux
curl -sL https://aka.ms/InstallAzureCLIDeb | sudo bash

安装完成后，使用以下命令登录Azure：

az login

AdminJS应用部署到Azure App Service

创建Azure App Service

首先，我们需要在Azure上创建一个App Service实例：

登录Azure门户，导航到"应用服务"
点击"创建"，填写基本信息：
- 订阅：选择你的Azure订阅
- 资源组：创建或选择现有资源组
- 名称：输入唯一的应用名称
- 发布：选择"代码"
- 运行时堆栈：选择"Node.js 16 LTS"
- 操作系统：Linux
- 区域：选择离你最近的区域
点击"查看+创建"，确认无误后点击"创建"

部署AdminJS应用

有多种方式可以将AdminJS应用部署到Azure App Service，这里我们介绍两种常用方法：

方法一：使用Git部署

首先，克隆AdminJS项目仓库：

git clone https://gitcode.com/gh_mirrors/ad/adminjs.git
cd adminjs

在Azure门户中，找到你创建的App Service，进入"部署中心"
选择"本地Git"作为部署方式，点击"配置"
设置Git凭证，记录生成的Git克隆URL
在本地项目中添加Azure远程仓库：

git remote add azure <Azure Git URL>

推送代码到Azure：

git push azure main

方法二：使用Azure CLI部署

在项目根目录下，运行以下Azure CLI命令：

az webapp up --name <你的应用名称> --resource-group <你的资源组名称> --runtime "NODE|16-lts"

这个命令会自动创建必要的资源并部署应用。

配置AdminJS应用

部署完成后，我们需要对AdminJS应用进行一些配置以适应Azure环境。

创建或修改配置文件config/azure.js：

export default {
  // Azure特定配置
  azure: {
    storageAccount: process.env.AZURE_STORAGE_ACCOUNT,
    storageKey: process.env.AZURE_STORAGE_KEY,
    cosmosDb: {
      endpoint: process.env.COSMOS_DB_ENDPOINT,
      key: process.env.COSMOS_DB_KEY,
      databaseId: process.env.COSMOS_DB_DATABASE_ID,
    }
  },
  // AdminJS配置
  adminJs: {
    resources: [], // 在这里配置你的资源
    rootPath: '/admin',
  }
};

修改入口文件index.js，引入Azure配置：

import AdminJS from './src/adminjs.js';
import express from 'express';
import { buildRouter } from './src/backend/utils/router/index.js';
import azureConfig from './config/azure.js';

const app = express();

const admin = new AdminJS({
  ...azureConfig.adminJs,
  // 其他配置
});

const router = buildRouter(admin);
app.use(admin.options.rootPath, router);

app.listen(process.env.PORT || 3000, () => {
  console.log(`AdminJS is running on http://localhost:${process.env.PORT || 3000}${admin.options.rootPath}`);
});

在Azure门户中，进入App Service的"配置"页面，添加必要的应用设置：
- AZURE_STORAGE_ACCOUNT
- AZURE_STORAGE_KEY
- COSMOS_DB_ENDPOINT
- COSMOS_DB_KEY
- COSMOS_DB_DATABASE_ID

集成Azure Cosmos DB

AdminJS支持多种数据库，这里我们介绍如何将其与Azure Cosmos DB集成。

创建Cosmos DB实例

在Azure门户中，导航到"Cosmos DB"
点击"创建"，选择"Azure Cosmos DB for MongoDB API"（因为AdminJS对MongoDB有良好支持）
填写基本信息，完成创建

配置AdminJS连接Cosmos DB

安装MongoDB适配器：

npm install @adminjs/mongoose mongoose

创建数据库连接文件src/database.js：

import mongoose from 'mongoose';
import azureConfig from '../config/azure.js';

const connectDB = async () => {
  try {
    await mongoose.connect(azureConfig.azure.cosmosDb.endpoint, {
      auth: {
        user: azureConfig.azure.cosmosDb.databaseId,
        password: azureConfig.azure.cosmosDb.key
      },
      retryWrites: false
    });
    console.log('MongoDB connected to Azure Cosmos DB');
  } catch (err) {
    console.error('MongoDB connection error:', err);
    process.exit(1);
  }
};

export default connectDB;

在AdminJS中注册资源，例如创建src/resources/user.js：

import mongoose from 'mongoose';
import AdminJS from 'adminjs';
import { Resource } from '@adminjs/mongoose';

AdminJS.registerAdapter({ Resource });

const userSchema = new mongoose.Schema({
  name: { type: String, required: true },
  email: { type: String, required: true, unique: true },
  password: { type: String, required: true },
  createdAt: { type: Date, default: Date.now }
});

const User = mongoose.model('User', userSchema);

export default User;

在AdminJS配置中添加资源：

import User from './resources/user.js';

// ...

const admin = new AdminJS({
  resources: [User],
  // 其他配置
});

使用Azure Blob Storage存储文件

AdminJS支持文件上传功能，我们可以将上传的文件存储到Azure Blob Storage中。

创建Blob Storage容器

在Azure门户中，导航到你的存储账户
进入"容器"页面，点击"创建容器"
输入容器名称（如"adminjs-uploads"），选择适当的访问级别

集成Blob Storage到AdminJS

安装Azure存储SDK：

npm install @azure/storage-blob

创建文件上传服务src/services/upload.js：

import { BlobServiceClient } from '@azure/storage-blob';
import azureConfig from '../config/azure.js';

const blobServiceClient = BlobServiceClient.fromConnectionString(
  `DefaultEndpointsProtocol=https;AccountName=${azureConfig.azure.storageAccount};AccountKey=${azureConfig.azure.storageKey};EndpointSuffix=core.windows.net`
);

const containerClient = blobServiceClient.getContainerClient('adminjs-uploads');

const uploadToBlobStorage = async (file) => {
  const blockBlobClient = containerClient.getBlockBlobClient(file.originalname);
  await blockBlobClient.uploadData(file.buffer);
  return blockBlobClient.url;
};

export default uploadToBlobStorage;

在AdminJS资源中使用文件上传功能，例如修改用户资源：

// 在user.js中添加头像上传字段
userSchema.add({
  avatar: { type: String } // 存储Blob URL
});

// 在AdminJS资源配置中添加文件上传组件
export const userResourceOptions = {
  properties: {
    avatar: {
      type: 'file',
      components: {
        edit: AdminJS.bundle('./components/file-upload.jsx'),
      },
    },
  },
};

创建文件上传组件src/components/file-upload.jsx：

import React from 'react';
import { useFileUpload } from 'adminjs';
import uploadToBlobStorage from '../services/upload';

const FileUpload = (props) => {
  const { onChange, acceptedFiles, value } = props;
  
  const handleUpload = async (files) => {
    if (files.length) {
      const file = files[0];
      const url = await uploadToBlobStorage(file);
      onChange(url);
    }
  };
  
  return (
    <div>
      {value && <img src={value} alt="Avatar" style={{ maxWidth: '200px' }} />}
      <input
        type="file"
        onChange={(e) => handleUpload(e.target.files)}
        accept={acceptedFiles}
      />
    </div>
  );
};

export default FileUpload;

Azure应用监控与管理

使用Azure Application Insights

Azure Application Insights是一项扩展的应用程序性能管理(APM)服务，可帮助你监控应用程序的性能和使用情况。

在Azure门户中，为你的App Service创建Application Insights资源
安装Application Insights SDK：

npm install applicationinsights

在应用入口文件中初始化：

import appInsights from 'applicationinsights';
appInsights.setup(process.env.APPLICATIONINSIGHTS_CONNECTION_STRING)
  .setAutoCollectConsole(true, true)
  .start();

在Azure门户的Application Insights资源中，你可以查看应用的性能指标、异常情况、用户流量等数据。

设置Azure Monitor警报

为了及时了解应用的异常情况，我们可以设置Azure Monitor警报：

在Azure门户中，导航到"Monitor" > "警报" > "创建" > "警报规则"
选择你的App Service作为资源
设置警报条件，例如"HTTP 5xx错误率超过5%"
配置警报操作，如发送电子邮件通知或触发Azure Function

高级配置与优化

配置Azure CDN加速静态资源

为了提高AdminJS应用的加载速度，我们可以使用Azure CDN加速静态资源：

在Azure门户中创建CDN配置文件
添加CDN终结点，将源设置为你的App Service
修改AdminJS的静态资源路径，使用CDN URL：

// 在AdminJS配置中设置资产路径
const admin = new AdminJS({
  assets: {
    styles: ['https://your-cdn.azureedge.net/styles.css'],
    scripts: ['https://your-cdn.azureedge.net/scripts.js'],
  },
  // 其他配置
});

使用Azure Key Vault管理密钥

对于生产环境，建议使用Azure Key Vault来安全管理敏感信息：

创建Azure Key Vault资源
将应用所需的密钥和机密存储在Key Vault中
在App Service中启用托管标识
授予App Service访问Key Vault的权限
修改配置文件以从Key Vault获取密钥：

// 使用Azure SDK获取Key Vault机密
import { SecretClient } from '@azure/keyvault-secrets';
import { DefaultAzureCredential } from '@azure/identity';

const credential = new DefaultAzureCredential();
const secretClient = new SecretClient('https://your-keyvault.vault.azure.net', credential);

const getSecret = async (name) => {
  const secret = await secretClient.getSecret(name);
  return secret.value;
};

// 在配置中使用
export default {
  azure: {
    storageAccount: await getSecret('storageAccount'),
    storageKey: await getSecret('storageKey'),
    // 其他密钥
  },
};

总结与展望

通过本文的介绍，你已经了解了如何将AdminJS应用部署到Azure云平台，并集成了Azure的各项服务，包括App Service、Cosmos DB、Blob Storage等。这种集成方案不仅简化了应用的部署流程，还提供了强大的扩展能力和可靠的性能。

未来，你可以进一步探索以下方向：

利用Azure Functions扩展AdminJS的后端功能
集成Azure Active Directory实现高级身份验证
使用Azure DevOps建立CI/CD流水线，自动化部署流程

AdminJS与Azure的结合为Node.js应用开发提供了强大的支持，希望本文能帮助你构建更高效、更可靠的企业级应用。

参考资源

AdminJS官方文档：docs/adminjs.co
Azure官方文档：docs.microsoft.com/azure
AdminJS源代码：src/
项目配置文件：package.json
部署脚本示例：cli.js

【免费下载链接】adminjs AdminJS is an admin panel for apps written in node.js 项目地址: https://gitcode.com/gh_mirrors/ad/adminjs

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考