leadwire/apm-leadwire-portail-ui

leadwire-portail-reactjs 镜像说明

镜像概述

本镜像对应leadwire-portail-reactjs项目，是Leadwire APM前端门户的原型验证（POC）实现，基于Create React App构建，提供完整的前端开发、调试及部署指南，支持本地开发环境搭建与Nginx反向代理配置。

核心功能

1. 基于ReactJS的前端项目架构，包含资产管理、布局组件、页面模块等基础结构
2. 完整开发工作流：项目克隆、依赖安装、本地启动、测试与生产构建
3. Nginx反向代理配置支持，实现前端服务的访问路由
4. 支持ES6+语法、JSX、Flow等特性，集成Autoprefixer进行CSS后处理
5. 提供环境变量配置、VS Code Chrome调试工具集成等功能

使用场景

• Leadwire APM门户前端的开发与原型验证
• 本地开发环境快速搭建与测试
• 前端部署流程的学习与参考

配置说明

开发环境要求

• 安装git：yum install git
• 安装Node.js 10.x：curl -sL https://rpm.nodesource.com/setup_10.x | sudo bash - && yum install nodejs

项目克隆与初始化

bash
cd /usr/share/
git clone https://github.com/leadwire-apm/leadwire-portail-reactjs.git
cd leadwire-portail-reactjs/
npm install
npm start

Nginx配置

编辑Nginx配置文件/etc/nginx/conf.d/apm-nginx.conf，添加以下内容：

nginx
location /react {
    proxy_pass http://localhost:3000;
}

location /static {
    proxy_pass http://localhost:3000;
}

重启Nginx生效：nginx -s reload

常用脚本

• npm start：启动开发服务器（默认地址：http://localhost:3000%EF%BC%89
• npm test：启动交互式测试运行器
• npm run build：构建生产环境包（输出至build目录）
• npm run eject：暴露项目配置（不可逆操作）

Docker部署示例

以下是基于该项目的多阶段构建Dockerfile：

dockerfile
# 构建阶段
FROM node:10-alpine as build
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# 运行阶段
FROM nginx:alpine
COPY --from=build /app/build /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

对应的nginx.conf示例：

nginx
server {
    listen 80;
    server_name localhost;
    root /usr/share/nginx/html;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location /react {
        alias /usr/share/nginx/html;
        try_files $uri $uri/ /index.html;
    }

    location /static {
        alias /usr/share/nginx/html/static;
    }
}

构建并运行镜像：

bash
docker build -t leadwire/apm-leadwire-portail-ui .
docker run -d -p 8080:80 leadwire/apm-leadwire-portail-ui