本章用于讲解如何在walle下构建和运行前端应用。主要包含React,Angular应用，以Nginx+Docker运行（Vue方式不讲，大家自行研究）
新建项目
项目中心 > 项目管理 > 新建项目
以下是一份配置好的项目表
| 分组 | 项目 | 参考 | 备注 |
|---|---|---|---|
| 基本配置 | 项目名称 | dev-我的JavaDemo项目 | 随便填写，名称不要太长（不好看），最好把环境卸载最前，例如dev（开发环境） |
| 基本配置 | 环境 | 开发环境 | 提前在环境管理配置好即可 |
| 基本配置 | Git Repo | [email protected]:xxx/react-demo.git | Git仓库地址 |
| 目标集群 | 目标集群 | 192.168.0.122 | 提前配置服务器管理 |
| 目标集群 | 目标集群部署路径 | /data/walle-build/react-demo | 实际运行的环境 |
| 目标集群 | 目标集群部署仓库 | /data/walle-run | 会存放多个版本编译后的项目 |
| 目标集群 | 目标集群部署仓库版本保留数 | 5 | 可以回滚的版本数 |
配置脚本
前端生态下基本脚本区别较大，但拥有共通性，此处以Angular为例
基本脚本
任务配置 - 部署包含文件
包含方式
docker-compose.yml
nginx.conf
dist该方式用于描述从源码包到发布包中，排除/包含的内容。一般java使用target即可
任务配置 - 自定义全局变量
# 运行目录
# 运行目录
NG_PATH=/data/walle-tool/node-v10.5.0-linux-x64/lib/node_modules/@angular/cli/bin
PORT=2222
ENV=test
SERVER_NAME=ui-demo
【Angular to Docker】
部署包含文件 - 包含
docker-compose.yml
nginx.conf
dist自定义全局变量
# 运行目录
NG_PATH=/data/skong-tool/node-v10.5.0-linux-x64/lib/node_modules/@angular/cli/bin
# ln -s /data/skong-tool/node-v10.5.0-linux-x64/lib/node_modules/@angular/cli/bin/ng /usr/bin/ng
PORT=2222
ENV=test
SERVER_NAME=idp-server-ui-test
任务配置 - 高级任务-Deploy前置任务
pwd
echo "开始初始化"
npm install \@angular/cli\@6.0.8 -g || echo "安装失败"
任务配置 - 高级任务-Deploy后置任务
pwd
unzip -q node_modules.zip
echo "${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 -d
echo "服务启动完成"项目 - 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;'"【React Antdesign Pro to Docker】
部署包含文件 - 包含
docker-compose.yml
nginx.conf
dist自定义全局变量
# 运行目录
PORT=2222
ENV=test
SERVER_NAME=ui-demo
任务配置 - 高级任务-Deploy前置任务
pwd
echo "开始初始化"
npm install -g umi || echo "安装失败"
任务配置 - 高级任务-Deploy后置任务
pwd
unzip -q node_modules.zip
echo "${NG_PATH}/ng -v"
UMI_ENV=dev umi build
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 -d
echo "服务启动完成"项目 - 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...