addons/addons-frontend

Addons-frontend 镜像

镜像概述

Addons-frontend镜像为Mozilla addons-server提供前端基础设施和代码，支持AMO（火狐附加组件网站）及Discovery Pane等前端应用的开发、构建与部署。该项目基于Redux + React技术栈，采用ES2015+编写，支持服务端渲染，注重代码质量与测试覆盖率。

核心功能

• 提供AMO和Discovery Pane等前端应用的运行环境
• 支持本地开发、测试与生产环境部署
• 集成代码检查（ESLint、Stylelint）、类型检查（Flow）、自动格式化（Prettier）等开发工具
• 包含Storybook用于组件可视化开发
• 支持代码覆盖率报告与安全漏洞扫描（Snyk）

使用场景

• 火狐附加组件网站（AMO）前端功能开发与测试
• Discovery Pane（火狐发现面板）前端功能迭代
• 前端组件库的可视化展示与测试
• 生产环境中AMO前端服务的部署

配置说明

关键环境变量

• NODE_APP_INSTANCE: 指定应用实例（如amo或disco）
• NODE_ENV: 节点环境（production/development）
• NODE_CONFIG_ENV: 配置环境（dev/stage/prod）

Docker部署示例

生产环境运行AMO应用

bash
docker run -d \
  -p 4000:4000 \
  -e NODE_APP_INSTANCE=amo \
  -e NODE_ENV=production \
  -e NODE_CONFIG_ENV=prod \
  addons/addons-frontend

访问地址：http://localhost:4000

开发环境运行AMO应用（连接开发API）

bash
docker run -d \
  -p 3000:3000 \
  -e NODE_APP_INSTANCE=amo \
  -e NODE_ENV=development \
  -e NODE_CONFIG_ENV=dev \
  addons/addons-frontend

访问地址：http://localhost:3000

本地配置覆盖

可通过创建config/local-development-amo.js等文件覆盖默认配置，例如：

javascript
module.exports = {
  trackingEnabled: true,
  CSP: false // 禁用CSP以减少开发环境日志干扰
};