xmonline/xm-webapp

XM^online 2 镜像文档

镜像概述

XM^online 2 镜像是一个基于Angular 2框架构建的通用单页应用(Single Page Application, SPA) Docker镜像。该镜像预先配置了Angular 2运行环境及相关依赖，旨在提供一个便捷、高效的方式部署和运行使用Angular 2开发的前端单页应用程序，减少环境配置复杂度，实现"一键部署"的前端应用交付。

核心功能和特性

1. Angular 2 环境支持

• 内置完整的Angular 2运行时环境，无需手动安装Node.js、npm及Angular CLI依赖
• 支持Angular 2应用的编译产物（如dist目录）直接运行，兼容Angular 2标准构建流程

2. 单页应用(SPA)特性支持

• 内置轻量级Web服务器（如Nginx或Node.js http-server），优化SPA路由处理
• 支持HTML5 History API，解决SPA路由刷新404问题
• 静态资源（JS/CSS/图片）高效加载，支持浏览器缓存策略

3. 部署便捷性

• 镜像体积优化，减少部署带宽和存储占用
• 支持通过环境变量灵活配置应用参数（如API基础路径、日志级别等）
• 兼容Docker Compose、Kubernetes等容器编排工具，便于集成到自动化部署流程

使用场景和适用范围

1. 开发与测试环境

• 前端开发人员快速验证Angular 2应用的部署效果，无需本地配置复杂的Web服务器环境
• 团队协作中统一前端应用运行环境，避免"本地可运行，部署后异常"的环境差异问题

2. 生产环境部署

• 作为前端单页应用的生产环境运行载体，配合反向代理服务器（如Nginx、Apache）实现高可用部署
• 适用于中小型前端项目，或作为微前端架构中的独立前端应用服务

3. 演示与展示场景

• 快速部署Angular 2应用用于产品演示、技术分享或客户展示，减少环境准备时间

使用方法和配置说明

基本使用（docker run 命令）

通过以下命令快速启动XM^online 2镜像：

docker
docker run -d -p 80:80 --name xm-online2-app xm-online2:latest

参数说明：

• -d: 后台运行容器
• -p 80:80: 将容器内80端口映射到主机80端口（默认Web服务端口）
• --name xm-online2-app: 为容器指定名称，便于管理
• xm-online2:latest: 镜像名称及标签（请替换为实际使用的镜像标签）

自定义配置

1. 环境变量配置

可通过-e参数传递环境变量，自定义应用运行参数：

示例：指定运行端口为8080，API基础路径为https://api.example.com

docker
docker run -d -p 8080:8080 -e PORT=8080 -e API_BASE_URL=https://api.example.com --name xm-online2-app xm-online2:latest

2. 挂载自定义应用代码（开发场景）

如需运行本地开发的Angular 2应用，可通过目录挂载替换容器内默认应用：

docker
docker run -d -p 80:80 -v /本地/Angular2应用/dist目录:/usr/share/nginx/html --name xm-online2-dev xm-online2:latest

说明：假设容器内Web服务根目录为/usr/share/nginx/html，通过挂载本地编译后的dist目录，实现应用代码实时更新

访问应用

容器启动后，通过以下方式访问应用：

• 本地访问：http://localhost:[主机映射端口]（如上述示例中http://localhost:80）
• 外部访问：http://[主机IP]:[主机映射端口]

停止与删除容器

docker
# 停止容器
docker stop xm-online2-app

# 删除容器
docker rm xm-online2-app

注意事项

• 生产环境部署时，建议配合HTTPS反向代理使用，确保数据传输安全
• 如应用需要持久化存储静态资源，可通过Docker数据卷（Volume）挂载实现
• 镜像默认包含生产环境优化配置，开发环境使用时建议调整NODE_ENV=development以启用热重载等开发特性