XNginx更新記錄

之前的博文提到過，XNginx - nginx 叢集可視化管理工具, 開發完成後一直穩定運作，直到前面因為一個站點的proxy站點配置問題，導緻需要修改nginx 配置檔案模闆，是以借此機會對系統做了更新。

前端更新到最新版的ng-alain

事實證明，更新是痛苦的，前端項目真是一言難盡，能不動最好不動！

主要的變更是：

- 之前的simple-table變成了st

- desc也沒了，成了sv，

- page-header等的action也需要顯示的指定

查查文檔，前後花了一個多小時，前端的更新真是太快了。。。

vhost增加default

通常會有類似下面的配置存在，通過default來标示是預設的配置：

server {
        listen 80 default;
        client_max_body_size 10240M;
      
        location / {
        
        proxy_pass http://proxy234648622.k8s_server;
            proxy_set_header HOST $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                            
      }          
   }

複制

是以，這次給vhost增加了default選項，這樣生成配置檔案就可以加上default。

生成的配置檔案：

SSL配置增加導入證書

之前SSL配置需要手動打開證書檔案，拷貝檔案内容到文本框，這次前端更新，增加了導入按鈕，使用者選擇後直接讀驗證書檔案.

實作很簡單，使用

nz-upload

上傳檔案，通過

nzBeforeUpload

進行攔截，讀取檔案。

<div nz-col [nzSpan]="2" *ngIf="dto.enableSSL">
        <nz-upload nzShowUploadList="false" [nzBeforeUpload]="readCertificate"><button nz-icon="upload" nz-button
            nzType="nz-button.default" nzSize="small">導入</button> </nz-upload>
      </div>

複制

讀取可以使用FileReader，記得return false。

readCertificate = (file: File) => {
    const reader = new FileReader();
    reader.readAsText(file);
    this.dto.sslCertificate.commonName = file.name;
    reader.onload = () => {
      this.dto.sslCertificate.content = reader.result.toString();
    }
    return false;
  }

複制

導入已有配置檔案

本次更新，在vhosts管理地方，增加了一個導入按鈕，可以導入配置資訊。

支援的方式是要求将配置檔案及其相關資源，打包為zip，上傳到系統背景進行解析, 接口代碼：

@PostMapping("/importConfig/{groupId}")
    @Timed
    public String uploadConfFile(@RequestParam("file") MultipartFile file, @PathVariable String groupId) {
        if (file.isEmpty()) {
            return "Please select a file to upload";
        }

        if (!file.getContentType().equalsIgnoreCase("application/x-zip-compressed")) {
            return "only support.zip";
        }

        File upFile = new File(new File(TEMP_FILE_PATH),  System.currentTimeMillis() + file.getOriginalFilename());
        try {
            if(upFile.exists()){
                upFile.delete();
            }
            file.transferTo(upFile);
        } catch (IllegalStateException | IOException ex) {
            return "upload error！";
        }

        try {
            nginxConfigService.parseFromZipFile(upFile, groupId);
        } catch (IOException e) {
            return "upload error！";
        }
        return "success";
    }

複制

解析代碼比較簡單，先解壓zip，然後找到nginx.conf，再調用上文提到的解析代碼解析指令。

public void parseConfig(String confidDir, String groupId) {

        // 查找nginx.conf
        String nginxFile = searchForFile(new File(confidDir), "nginx.conf");
        if (nginxFile.length() == 0) {
            throw new RuntimeException("can't find nginx.conf,please make sure nginx.conf exist !");
        }

        List<Directive> directives = NginxConfParser.newBuilder().withConfigurationFile(nginxFile).parse();
        directives.stream().forEach(directive -> {
            if (directive instanceof ProxyDirective) {
                saveUpStream((ProxyDirective) directive);
            } else if (directive instanceof VirtualHostDirective) {
                saveVHost((VirtualHostDirective) directive, groupId);
            }
        });

    }

    public void parseFromZipFile(File file, String groupId) throws IOException {
        String tempDir = Paths.get(file.getPath()).getParent().toString() + File.separator + file.getName() + ".extract";
        UnZipFile.unZipFiles(file, tempDir);
        parseConfig(tempDir, groupId);
    }

複制

前後端項目合并到一起

之前前後端獨立部署，如果項目足夠大尚可，但是這個xnginx相對比較簡單，獨立部署費時費力，是以本次将前後端合并到一起

合并方法：

在backend建立一個webapp目錄，将web代碼放入
将web的相關配置檔案拷貝到上層目錄

然後修改

angular.json

、

tsconfig.json

等包含路徑的位址進行修改

"xnginx": {
      "projectType": "application",
      "root": "",
      "sourceRoot": "webapp/src",
      "prefix": "app",
      "schematics": {
        "@schematics/angular:component": {
          "styleext": "less"
        }
      },

複制

最後，修改angular.json的build配置，将建構結果儲存到'target/classes/static',這樣java項目打包時就能将前端資源帶入：

"build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "target/classes/static",
            "index": "webapp/src/index.html",
            "main": "webapp/src/main.ts",
            "tsConfig": "tsconfig.app.json",
            "polyfills": "webapp/src/polyfills.ts",
            "assets": [
              "webapp/src/assets",
              "webapp/src/favicon.ico"
            ],
            "styles": [
              "webapp/src/styles.less"
            ],
            "scripts": [
              "node_modules/@antv/g2/build/g2.js",
              "node_modules/@antv/data-set/dist/data-set.min.js",
              "node_modules/@antv/g2-plugin-slider/dist/g2-plugin-slider.min.js",
              "node_modules/ajv/dist/ajv.bundle.js",
              "node_modules/qrious/dist/qrious.min.js"
            ]
          },

複制

注意事項：

先建構前端， npm run build
再建構後端 mvn package -DskipTests

作者：Jadepeng

出處：jqpeng的技術記事本--http://www.cnblogs.com/xiaoqi

您的支援是對部落客最大的鼓勵，感謝您的認真閱讀。

本文版權歸作者所有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接配接，否則保留追究法律責任的權利。