yylm-csh-web v3.2.1

cloud-mix-web

安装

 $ git clone git@gitlab.idcos.com:CloudJ/cloud-mix-web.git 
 $ cd cloud-mix-web
 $ npm install 
 $ npm run build:dll

开发

第一次运行需要配置 proxy.json，可以直接通过命令生成

 $ npm run proxy

proxy.json 样例，endpoint 代表需要代理的 path

{
  "default": {
    "api": "http://10.0.0.114:8080",
    "endpoints": [
      "/res/*",
      "/api/*",
      "/user",
      "/user/*",
      "/auth",
      "/auth/*",
      "/login.html",
      "/static/*",
      "/report/*"
    ]
  }
}

运行

 $ npm run start

打开 http://localhost:3000 即可运行

技术架构

改造项目 react-boilerplate，大部分结构沿用原项目，只修改了部分 webpack build 脚本

1. 支持 less
2. 资源放置在 assets 目录
3. 同样支持 redux-thunk ，可以 dispatch function
4. 解决部分打包编译问题

基础库使用 ant-design 1.x 版本，2.x 版本有编译问题，暂时未升级

编译发布

 $ npm run build 

编译过后的文件放置在 build 目录，为了测试编译后的结果（考虑到 proxy 的问题，否则直接启动一个静态文件服务器就能测试），可单独启动一个 node-server 来运行，也可以配置 Nginx ，将 api 访问转发给后端测试服务器。

一个 简单的 conf 为

 $ vim /usr/local/etc/nginx/servers/your-project-nginx-conf.conf

输入 your-project-nginx-conf.conf

server {
    set $api_server http://10.0.0.114:8080;
    set $build_path /Users/admin/www/idcos/react-boilerplate-master/build;
    listen       80;
    server_name  localhost;

    #charset koi8-r;

    #access_log  logs/host.access.log  main;

    location = / {
        root   html;
        index  index.html index.htm;
    }

    location / {

        root   $build_path; #config html dir

        if ( $content_type = "application/json" ) {
            proxy_pass $api_server;
        }

        if ( $uri ~ /login.html ) {
            proxy_pass $api_server;
        }

        if ( $uri ~ /res ) {
            proxy_pass $api_server;
        }

        if ( $uri ~ /user ) {
            proxy_pass $api_server;
        }

        if ( $uri ~ /api ) {
            proxy_pass $api_server;
        }

        if ( $uri ~ /auth ) {
            proxy_pass $api_server;
        }

        if ( $uri ~ /report ) {
            proxy_pass $api_server;
        }

        if ( $uri ~ /static ) {
            proxy_pass $api_server;
        }

        index  index.html index.htm;
        client_max_body_size 1000m;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }

    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
    #
    #location ~ \.php$ {
    #    proxy_pass   http://127.0.0.1;
    #}

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
    #location ~ \.php$ {
    #    root           html;
    #    fastcgi_pass   127.0.0.1:9000;
    #    fastcgi_index  index.php;
    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
    #    include        fastcgi_params;
    #}

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /\.ht {
    #    deny  all;
    #}
}

然后修改 root 为项目 build 目录地址。

执行

 $ sudo nginx -s stop && sudo nginx

这时候可直接访问: http://localhost

测试没问题过后可提交 build 目录到代码仓库

工作流

使用 git-scrum 工具来组织开发协作流程

概念

git-scrum 将 scrum 流程整合到 git 仓库分支中，类似 git-flow , 但是 flow 是以 feature 为基础 ，scrum 是以 task 为基础（更符合实际任务分配的视觉）

develop 分支：最新的开发分支，所有分支代码会合并到 develop 分支并测试 sprint 分支：一个 sprint 周期对应一个 sprint 分支（通常是一周时间，以时间为 deadline） task 分支： 一个 sprint 任务对应一个 task 分支，task 完成过后会合并到 sprint 分支

安装配置

 $ git clone git@gitlab.idcos.com:timothy/git-scrum.git
 $ cd git-scrum 
 $ make install 

使用

 $ cd your-project-folder 
 $ git scrum // 查看 git-scrum 文档 
 $ git scrum init // 初始化 scrum， 确保有 master、develop 分支
 $ git scrum sprint start 20161105 // 开始一个 sprint 
 $ git scrum task start some-task  // 开始一个任务
 $ git scrum task finish           // 结束一个任务 
 $ git scrum sprint finish         // 结束一个 sprint

1. 每周定义需求任务，然后开启 sprint 分支
2. 将需求任务转化为 task 分支，完整任务代码，执行 task finish
3. task finish 会将任务代码合并到 sprint 分支
4. 提交 sprint 分支，sprint 都完成过后执行 sprint finish
5. sprint finish 会将 sprint 代码合并到 develop 分支