本章用于讲解如何在walle下构建和运行前端应用。主要包含React,Angular应用，以Nginx+Docker运行（Vue方式不讲，大家自行研究）
新建项目
项目中心 > 项目管理 > 新建项目
以下是一份配置好的项目表
| 分组 | 项目 | 参考 | 备注 |
|---|---|---|---|
| 基本配置 | 项目名称 | dev-我的JavaDemo项目 | 随便填写，名称不要太长（不好看），最好把环境卸载最前，例如dev（开发环境） |
| 基本配置 | 环境 | 开发环境 | 提前在环境管理配置好即可 |
| 基本配置 | Git Repo | git@gitlab.xxx.com:xxx/react-demo.git | Git仓库地址 |
| 目标集群 | 目标集群 | 192.168.0.122 | 提前配置服务器管理 |
| 目标集群 | 目标集群部署路径 | /data/walle-build/react-demo | 实际运行的环境 |
| 目标集群 | 目标集群部署仓库 | /data/walle-run | 会存放多个版本编译后的项目 |
| 目标集群 | 目标集群部署仓库版本保留数 | 5 | 可以回滚的版本数 |
配置脚本
前端生态下基本脚本区别较大，但拥有共通性，此处以Angular为例
基本脚本
任务配置 - 部署包含文件
包含方式
docker-compose.ymlnginx.confdist该方式用于描述从源码包到发布包中，排除/包含的内容。一般java使用target即可
任务配置 - 自定义全局变量
# 运行目录# 运行目录NG_PATH=/data/walle-tool/node-v10.5.0-linux-x64/lib/node_modules/@angular/cli/binPORT=2222ENV=testSERVER_NAME=idp-server-ui-test【Angular to Docker】
任务配置 - 高级任务-Deploy前置任务
pwdecho "开始初始化"npm install \@angular/cli\@6.0.8 -g || echo "安装失败"任务配置 - 高级任务-Deploy后置任务
pwdunzip -q node_modules.zipecho "${NG_PATH}/ng -v"${NG_PATH}/ng -v || echo "环境检查失败"${NG_PATH}/ng build --prod --configuration=${ENV}sed -i 's/${container_port}/'${PORT}'/g' docker-compose.yml sed -i 's/${container_name}/'${SERVER_NAME}'/g' docker-compose.yml 任务配置 - 高级任务-Release前置任务
docker-compose -p ${SERVER_NAME} -f ${WEBROOT}/docker-compose.yml down || echo "服务不存在"docker stop ${SERVER_NAME} || echo "服务不存在"docker rm ${SERVER_NAME} || echo "服务不存在"rm -rf ${WEBROOT}任务配置 - 高级任务-Release后置任务
docker-compose -p ${SERVER_NAME} up -decho "服务启动完成"项目 - nginx.conf 配置
# gzip设置gzip on;gzip_vary on;gzip_comp_level 6;gzip_buffers 16 8k;gzip_min_length 1000;gzip_proxied any;gzip_disable "msie6";#gzip_http_version 1.0;gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/javascript;server { listen 80; server_name localhost; #charset koi8-r; #access_log /var/log/nginx/host.access.log main; location / { root /usr/share/nginx/html; index index.html index.htm; # 其作用是按顺序检查文件是否存在，返回第一个找到的文件或文件夹（结尾加斜线表示为文件夹），如果所有的文件或文件夹都找不到，会进行一个内部重定向到最后一个参数。 try_files $uri /index.html; } #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 /usr/share/nginx/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; #}}项目 - docker-compose.yml配置
version: '2'services: # 服务名称 nginx: # 镜像:版本 image: nginx:latest container_name: ${container_name} # 映射容器80端口到本地80端口 ports: - "${container_port}:80" # 数据卷 映射本地文件到容器 volumes: # 映射nginx.conf文件到容器的/etc/nginx/conf.d目录并覆盖default.conf文件 - ./nginx.conf:/etc/nginx/conf.d/default.conf # 映射build文件夹到容器的/usr/share/nginx/html文件夹 - ./dist/idp-server-ui:/usr/share/nginx/html # 覆盖容器启动后默认执行的命令。 command: /bin/bash -c "nginx -g 'daemon off;'"环境准备
参考文档： https://segmentfault.com/a/11...