DevOps 基于Walle的小型持续集成实战（六）基于Walle发布前端React,Angular

tuomao 发布于2019-06-28 17:21 / 2189人阅读

摘要：本章用于讲解如何在下构建和运行前端应用。项目配置服务名称镜像版本映射容器端口到本地端口数据卷映射本地文件到容器映射文件到容器的目录并覆盖文件映射文件夹到容器的文件夹覆盖容器启动后默认执行的命令。环境准备参考文档

本章用于讲解如何在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;""

【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...

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/27887.html

DevOps 基于Walle的小型持续集成实战（二）设计

摘要：以便对整个持续集成印象加深。配置完各环境发布脚本后，则可以使用构建发起进行触发环境准备。并会在远程环境上存放多次发布的版本，用于回退和切换服务停用。进行等操作，停止原本运行的服务切换启用。该文章用于建立一个小型的基于Walle的持续集成工具。解决java,react,angular项目的编译发布。以便对整个持续集成印象加深。官方网站：https://walle-web.io/ 适用...

zr_hebo 2019-06-28 17:22 评论0 收藏0
DevOps 基于Walle的小型持续集成实战（七）总结

摘要：当前版本针对于安装版概要整体流程贯通，基本可以达到实用级别。仍旧有很多需要提高的地方发布构建时部署上线服务器卡顿严重，基本不可以多项目发布。该文章旨在描述从零开始搭建环境，中间遇到的问题以及最终的经验总结。当前版本针对于2.0 docker安装版概要整体流程贯通，基本可以达到实用级别。满足2-5台服务器，少量的应用部署是完全可以的，但达到一定规模之后则Walle和Jenkins...

iliyaku 2019-06-28 17:21 评论0 收藏0
DevOps 基于Walle的小型持续集成实战（一）概述

摘要：该文章用于概述一个小型持续集成环境的搭建的方案什么是持续集成持续集成作为当今软件开发实践，可以简单理解为团队开发相对频繁的集成他们的工作，一般让每个成员每天至少集成一次，而这回造成每天会有多次的版本发布。该文章用于概述一个小型持续集成环境的搭建的方案什么是持续集成？持续集成作为当今软件开发实践，可以简单理解为团队开发相对频繁的集成他们的工作，一般让每个成员每天至少集成一次，而这回...

Yangyang 2019-06-28 17:22 评论0 收藏0
DevOps 基于Walle的小型持续集成实战（五）基于Walle发布Java应用

摘要：本章用于讲解如何在下构建和运行。编译发版都是基于的容器，下完成的。本章用于讲解如何在walle下构建和运行JavaWeb。主要包含SpringBoot,ScalaAkkaWeb应用，以Java -jar和Docker运行两种方式（Tomcat方式不讲，大家自行研究）新建项目项目中心 > 项目管理 > 新建项目以下是一份配置好的项目表分组项目参考备注基本配置 ...

qc1iu 2019-08-19 11:45 评论0 收藏0
DevOps 基于Walle的小型持续集成实战（三）Docker与Gitlab

摘要：自动化测试和持续集成发布。在服务型环境中部署和调整数据库或其他的后台应用。容器与镜像的关系类似于面向对象编程中的对象与类。容器容器是独立运行的一个或一组应用。提供了庞大的镜像集合供使用。还在按照mysql安装教程一步一步配置服务配置账户吗？还在为每开一个新环境重新配置这些服务感到苦恼吗？使用Docker，服务快速构建部署。解决你的研发时间，早点下班～现代技术，还不会docker你就落...

since1986 2019-06-28 17:21 评论0 收藏0