DevOps 基于Walle的小型持續(xù)集成實(shí)戰(zhàn)（六）基于Walle發(fā)布前端React,Angular

tuomao 發(fā)布于2019-06-28 17:21 / 2269人閱讀

摘要：本章用于講解如何在下構(gòu)建和運(yùn)行前端應(yīng)用。項(xiàng)目配置服務(wù)名稱鏡像版本映射容器端口到本地端口數(shù)據(jù)卷映射本地文件到容器映射文件到容器的目錄并覆蓋文件映射文件夾到容器的文件夾覆蓋容器啟動(dòng)后默認(rèn)執(zhí)行的命令。環(huán)境準(zhǔn)備參考文檔

本章用于講解如何在walle下構(gòu)建和運(yùn)行前端應(yīng)用。主要包含React,Angular應(yīng)用，以Nginx+Docker運(yùn)行（Vue方式不講，大家自行研究）

新建項(xiàng)目

項(xiàng)目中心 > 項(xiàng)目管理 > 新建項(xiàng)目

以下是一份配置好的項(xiàng)目表

分組	項(xiàng)目	參考	備注
基本配置	項(xiàng)目名稱	dev-我的JavaDemo項(xiàng)目	隨便填寫，名稱不要太長(zhǎng)（不好看），最好把環(huán)境卸載最前，例如dev（開發(fā)環(huán)境）
基本配置	環(huán)境	開發(fā)環(huán)境	提前在環(huán)境管理配置好即可
基本配置	Git Repo	[email protected]:xxx/react-demo.git	Git倉(cāng)庫(kù)地址
目標(biāo)集群	目標(biāo)集群	192.168.0.122	提前配置服務(wù)器管理
目標(biāo)集群	目標(biāo)集群部署路徑	/data/walle-build/react-demo	實(shí)際運(yùn)行的環(huán)境
目標(biāo)集群	目標(biāo)集群部署倉(cāng)庫(kù)	/data/walle-run	會(huì)存放多個(gè)版本編譯后的項(xiàng)目
目標(biāo)集群	目標(biāo)集群部署倉(cāng)庫(kù)版本保留數(shù)	5	可以回滾的版本數(shù)

配置腳本

前端生態(tài)下基本腳本區(qū)別較大，但擁有共通性，此處以Angular為例

基本腳本

任務(wù)配置 - 部署包含文件

包含方式

docker-compose.yml
nginx.conf
dist

該方式用于描述從源碼包到發(fā)布包中，排除/包含的內(nèi)容。一般java使用target即可

任務(wù)配置 - 自定義全局變量

# 運(yùn)行目錄
# 運(yùn)行目錄
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

自定義全局變量

# 運(yùn)行目錄
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

任務(wù)配置 - 高級(jí)任務(wù)-Deploy前置任務(wù)

pwd
echo "開始初始化"
npm install @angular/[email protected] -g || echo "安裝失敗"

任務(wù)配置 - 高級(jí)任務(wù)-Deploy后置任務(wù)

pwd
unzip -q node_modules.zip
echo "${NG_PATH}/ng -v"
${NG_PATH}/ng -v || echo "環(huán)境檢查失敗"
${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

任務(wù)配置 - 高級(jí)任務(wù)-Release前置任務(wù)

docker-compose -p ${SERVER_NAME}  -f ${WEBROOT}/docker-compose.yml down || echo "服務(wù)不存在"
docker stop ${SERVER_NAME} || echo "服務(wù)不存在"
docker rm ${SERVER_NAME} || echo "服務(wù)不存在"
rm -rf ${WEBROOT}

任務(wù)配置 - 高級(jí)任務(wù)-Release后置任務(wù)

docker-compose -p ${SERVER_NAME}  up -d
echo "服務(wù)啟動(dòng)完成"

項(xiàng)目 - nginx.conf 配置

# gzip設(shè)置
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;
    # 其作用是按順序檢查文件是否存在，返回第一個(gè)找到的文件或文件夾（結(jié)尾加斜線表示為文件夾），如果所有的文件或文件夾都找不到，會(huì)進(jìn)行一個(gè)內(nèi)部重定向到最后一個(gè)參數(shù)。
    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;
  #}
}

項(xiàng)目 - docker-compose.yml配置

version: "2"
services:
  # 服務(wù)名稱
  nginx:
    # 鏡像:版本
    image: nginx:latest
    container_name: ${container_name}
    # 映射容器80端口到本地80端口
    ports:
     - "${container_port}:80"
    # 數(shù)據(jù)卷 映射本地文件到容器
    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
    # 覆蓋容器啟動(dòng)后默認(rèn)執(zhí)行的命令。
    command: /bin/bash -c "nginx -g "daemon off;""

【React Antdesign Pro to Docker】

部署包含文件 - 包含

docker-compose.yml
nginx.conf
dist

自定義全局變量

# 運(yùn)行目錄
PORT=2222
ENV=test
SERVER_NAME=ui-demo

任務(wù)配置 - 高級(jí)任務(wù)-Deploy前置任務(wù)

pwd
echo "開始初始化"
npm install -g umi || echo "安裝失敗"

任務(wù)配置 - 高級(jí)任務(wù)-Deploy后置任務(wù)

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

任務(wù)配置 - 高級(jí)任務(wù)-Release前置任務(wù)

docker-compose -p ${SERVER_NAME}  -f ${WEBROOT}/docker-compose.yml down || echo "服務(wù)不存在"
docker stop ${SERVER_NAME} || echo "服務(wù)不存在"
docker rm ${SERVER_NAME} || echo "服務(wù)不存在"
rm -rf ${WEBROOT}

任務(wù)配置 - 高級(jí)任務(wù)-Release后置任務(wù)

docker-compose -p ${SERVER_NAME}  up -d
echo "服務(wù)啟動(dòng)完成"

項(xiàng)目 - nginx.conf 配置

# gzip設(shè)置
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;
    # 其作用是按順序檢查文件是否存在，返回第一個(gè)找到的文件或文件夾（結(jié)尾加斜線表示為文件夾），如果所有的文件或文件夾都找不到，會(huì)進(jìn)行一個(gè)內(nèi)部重定向到最后一個(gè)參數(shù)。
    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;
  #}
}

項(xiàng)目 - docker-compose.yml配置

version: "2"
services:
  # 服務(wù)名稱
  nginx:
    # 鏡像:版本
    image: nginx:latest
    container_name: ${container_name}
    # 映射容器80端口到本地80端口
    ports:
     - "${container_port}:80"
    # 數(shù)據(jù)卷 映射本地文件到容器
    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
    # 覆蓋容器啟動(dòng)后默認(rèn)執(zhí)行的命令。
    command: /bin/bash -c "nginx -g "daemon off;""

環(huán)境準(zhǔn)備

參考文檔： https://segmentfault.com/a/11...

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/27887.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

tuomao

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

C語(yǔ)言每日一練——第62天：選美比賽

閱讀 1560·2021-11-25 09:43
軟件測(cè)試學(xué)習(xí)筆記_第1周第5天——缺陷管理、術(shù)語(yǔ)

閱讀 4112·2021-11-15 11:37
DeinServerHost：2核 AMD/4G/50G NVMe SSD/1Gbps不限流量/德國(guó)

閱讀 3231·2021-08-17 10:13
CSS 的奇技工巧：4行屬性寫出等比例盒子

閱讀 3539·2019-08-30 14:16
講清楚基礎(chǔ)系列——css布局

閱讀 3564·2019-08-26 18:37
前端路由簡(jiǎn)介以及vue-router實(shí)現(xiàn)原理

閱讀 2515·2019-08-26 11:56
blob和base64轉(zhuǎn)文件并通過(guò)ajax上傳到服務(wù)器

閱讀 1171·2019-08-26 10:42
Chart.js使用小結(jié)_024

閱讀 648·2019-08-26 10:39

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

DevOps 基于Walle的小型持續(xù)集成實(shí)戰(zhàn)（六）基于Walle發(fā)布前端React,Angular

相關(guān)文章

DevOps 基于Walle的小型持續(xù)集成實(shí)戰(zhàn)（二）設(shè)計(jì)

DevOps 基于Walle的小型持續(xù)集成實(shí)戰(zhàn)（七）總結(jié)

DevOps 基于Walle的小型持續(xù)集成實(shí)戰(zhàn)（一）概述

DevOps 基于Walle的小型持續(xù)集成實(shí)戰(zhàn)（五）基于Walle發(fā)布Java應(yīng)用

DevOps 基于Walle的小型持續(xù)集成實(shí)戰(zhàn)（三）Docker與Gitlab

發(fā)表評(píng)論

0條評(píng)論

tuomao

男|高級(jí)講師

TA的文章

C語(yǔ)言每日一練——第62天：選美比賽

軟件測(cè)試學(xué)習(xí)筆記_第1周第5天——缺陷管理、術(shù)語(yǔ)

DeinServerHost：2核 AMD/4G/50G NVMe SSD/1Gbps不限流量/德國(guó)

CSS 的奇技工巧：4行屬性寫出等比例盒子

講清楚基礎(chǔ)系列——css布局

前端路由簡(jiǎn)介以及vue-router實(shí)現(xiàn)原理

blob和base64轉(zhuǎn)文件并通過(guò)ajax上傳到服務(wù)器

Chart.js使用小結(jié)_024

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

DevOps 基于Walle的小型持續(xù)集成實(shí)戰(zhàn)（六）基于Walle發(fā)布前端React,Angular

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！