DevOps 基于Walle的小型持續集成實戰（六）基于Walle發布前端React,Angular

tuomao 發布于2019-06-28 17:21 / 2252人閱讀

摘要：本章用于講解如何在下構建和運行前端應用。項目配置服務名稱鏡像版本映射容器端口到本地端口數據卷映射本地文件到容器映射文件到容器的目錄并覆蓋文件映射文件夾到容器的文件夾覆蓋容器啟動后默認執行的命令。環境準備參考文檔

本章用于講解如何在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...

GPU云服務器云服務器 walle devops持續集成基于云計算的基于linux的

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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