摘要:本章用于讲解如何在下构建和运行前端应用。项目配置服务名称镜像版本映射容器端口到本地端口数据卷映射本地文件到容器映射文件到容器的目录并覆盖文件映射文件夹到容器的文件夹覆盖容器启动后默认执行的命令。环境准备参考文档
本章用于讲解如何在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.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;""
部署包含文件 - 包含
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...
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/27887.html
摘要:以便对整个持续集成印象加深。配置完各环境发布脚本后,则可以使用构建发起进行触发环境准备。并会在远程环境上存放多次发布的版本,用于回退和切换服务停用。进行等操作,停止原本运行的服务切换启用。 该文章用于建立一个小型的基于Walle的持续集成工具。解决java,react,angular项目的编译发布。以便对整个持续集成印象加深。官方网站:https://walle-web.io/ 适用...
摘要:当前版本针对于安装版概要整体流程贯通,基本可以达到实用级别。仍旧有很多需要提高的地方发布构建时部署上线服务器卡顿严重,基本不可以多项目发布。 该文章旨在描述从零开始搭建环境,中间遇到的问题以及最终的经验总结。当前版本针对于2.0 docker安装版 概要 整体流程贯通,基本可以达到实用级别。满足2-5台服务器,少量的应用部署是完全可以的,但达到一定规模之后则Walle和Jenkins...
摘要:该文章用于概述一个小型持续集成环境的搭建的方案什么是持续集成持续集成作为当今软件开发实践,可以简单理解为团队开发相对频繁的集成他们的工作,一般让每个成员每天至少集成一次,而这回造成每天会有多次的版本发布。 该文章用于概述一个小型持续集成环境的搭建的方案 什么是持续集成? 持续集成作为当今软件开发实践,可以简单理解为团队开发相对频繁的集成他们的工作,一般让每个成员每天至少集成一次,而这回...
摘要:本章用于讲解如何在下构建和运行。编译发版都是基于的容器,下完成的。 本章用于讲解如何在walle下构建和运行JavaWeb。主要包含SpringBoot,ScalaAkkaWeb应用,以Java -jar和Docker运行两种方式(Tomcat方式不讲,大家自行研究) 新建项目 项目中心 > 项目管理 > 新建项目 以下是一份配置好的项目表 分组 项目 参考 备注 基本配置 ...
摘要:自动化测试和持续集成发布。在服务型环境中部署和调整数据库或其他的后台应用。容器与镜像的关系类似于面向对象编程中的对象与类。容器容器是独立运行的一个或一组应用。提供了庞大的镜像集合供使用。 还在按照mysql安装教程一步一步配置服务配置账户吗?还在为每开一个新环境重新配置这些服务感到苦恼吗?使用Docker,服务快速构建部署。解决你的研发时间,早点下班~现代技术,还不会docker你就落...
阅读 1474·2021-11-25 09:43
阅读 4025·2021-11-15 11:37
阅读 3159·2021-08-17 10:13
阅读 3486·2019-08-30 14:16
阅读 3515·2019-08-26 18:37
阅读 2472·2019-08-26 11:56
阅读 1105·2019-08-26 10:42
阅读 590·2019-08-26 10:39