本章用於講解如何在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
部署包含文件 - 包含
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...前端