DevOps 基於Walle的小型持續集成實戰(六)基於Walle發佈前端React,Angular應用

本章用於講解如何在walle下構建和運行前端應用。主要包含React,Angular應用,以Nginx+Docker運行(Vue方式不講,你們自行研究)

新建項目

項目中心 > 項目管理 > 新建項目

如下是一份配置好的項目表javascript

分組 項目 參考 備註
基本配置 項目名稱 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爲例php

基本腳本

任務配置 - 部署包含文件

包含方式css

docker-compose.yml
nginx.conf
dist

該方式用於描述從源碼包到發佈包中,排除/包含的內容。通常java使用target便可html

任務配置 - 自定義全局變量
# 運行目錄
# 運行目錄
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...前端

相關文章
相關標籤/搜索