Vendure电商平台Admin UI部署指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00658/article/details/148487509

Vendure电商平台Admin UI部署指南

vendure A headless GraphQL commerce platform for the modern web 项目地址: https://gitcode.com/gh_mirrors/ve/vendure

前言

在Vendure电商平台的实际应用中，Admin UI作为后台管理界面扮演着至关重要的角色。本文将深入讲解如何高效部署Vendure Admin UI，包括编译优化、配置调整以及独立部署方案，帮助开发者构建稳定可靠的管理后台。

Admin UI编译最佳实践

对于经过自定义扩展的Admin UI，建议采用预编译方式部署，而非在服务器运行时编译。这样做有三大优势：

性能提升：预编译可以避免服务器在运行时进行资源密集型的编译操作
稳定性增强：编译过程在可控的开发环境中完成，减少生产环境的不确定性
部署效率：只需部署静态文件，大幅缩短部署时间

编译过程会生成一组静态文件，这些文件将由AdminUiPlugin负责提供服务。

关键配置详解

API主机与端口配置

在生产环境中，Admin UI应用与Vendure服务器通常部署在不同的主机或端口上，此时需要明确配置API访问地址：

import { VendureConfig } from '@vendure/core';
import { AdminUiPlugin } from '@vendure/admin-ui-plugin';

const config: VendureConfig = {
    plugins: [
        AdminUiPlugin.init({
            port: 3001,  // Admin UI服务端口
            route: 'admin',  // 访问路径
            adminUiConfig: {
                apiHost: 'https://api.example.com',  // API服务地址
                apiPort: 443,  // API服务端口
            },
        }),
    ],
};

独立部署方案

虽然Admin UI通常由Vendure服务器提供服务，但在某些场景下，开发者可能希望将其部署到独立的静态托管服务（如Vercel、Netlify等）。以下是关键注意事项：

指标数据支持

独立部署时若需保留仪表盘中的订单指标显示，必须在服务器配置中包含AdminUiPlugin（但不初始化）：

import { AdminUiPlugin } from '@vendure/admin-ui-plugin';

const config: VendureConfig = {
    plugins: [
        AdminUiPlugin,  // 仅包含插件，不调用init()
    ],
};

独立部署构建脚本示例

以下是一个完整的构建脚本示例，适用于Vercel等静态托管平台：

import { compileUiExtensions } from '@vendure/ui-devkit/compiler';
import { DEFAULT_BASE_HREF } from '@vendure/ui-devkit/compiler/constants';
import path from 'path';
import { promises as fs } from 'fs';

compileUiExtensions({
    outputPath: path.join(__dirname, 'build'),
    baseHref: process.env.BASE_HREF ?? DEFAULT_BASE_HREF,
    extensions: [],  // 可在此处添加UI扩展
})
    .compile?.()
    .then(() => {
        if (process.env.VERCEL) {
            return fs.writeFile(
                path.join(__dirname, 'build', 'dist', 'vendure-ui-config.json'),
                JSON.stringify({
                    apiHost: 'https://api.example.com',
                    apiPort: '443',
                    adminApiPath: 'admin-api',
                    tokenMethod: 'cookie',
                    defaultLanguage: 'en',
                    availableLanguages: ['en', 'de'],
                    hideVendureBranding: false,
                    hideVersion: false,
                })
            );
        }
    });

配套配置说明

独立部署需要配套的package.json配置：

{
  "name": "standalone-admin-ui",
  "scripts": {
    "build": "ts-node compile.ts"
  },
  "devDependencies": {
    "@vendure/ui-devkit": "^1.4.5",
    "ts-node": "^10.2.1",
    "typescript": "~4.3.5"
  }
}