Xnginx upgrade record

As mentioned in the previous blog post, the xnginx - nginx cluster visual management tool has been running stably after development until the nginx configuration file template needs to be modified due to the proxy site configuration problem of a site. Therefore, the system has been upgraded.

Upgrade the front end to the latest version of NG Alain

Facts have proved that upgrading is painful. The front-end project is really hard to say. If you can't move, you'd better not move!

The main changes are: - the previous simple table has changed to st - DESC, SV, and - page header actions also need to be specified

It took more than an hour to check the documents. The front-end upgrade is really fast...

Add default to Vhost

There are usually configurations like the following, which are marked as the default configuration by 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;
                            
      }          
   }

Therefore, the default option is added to Vhost this time, so that default can be added to the generated configuration file.

Generated profile:

Add import certificate for SSL configuration

Before SSL configuration, you need to manually open the certificate file and copy the file content to the text box. This front-end upgrade has added the import button. The user can directly read the certificate file after selecting it

The implementation is very simple. Use NZ upload to upload files, intercept and read files through 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>
	  

You can use FileReader to read. Remember to 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;
  }

Import an existing profile

In this upgrade, an import button is added in the vhosts management area to import configuration information.

The supported method is to package the configuration file and its related resources into zip and upload it to the system background for analysis. The interface code is as follows:

@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";
    }
	

The parsing code is relatively simple. First unzip the zip, and then find nginx Conf, and then call the parsing code parsing instruction mentioned above.

 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);
    }

Merge front and rear items together

In the past, the front and rear ends were deployed independently. If the project is large enough, it is OK, but this xnginx is relatively simple and time-consuming. Therefore, the front and rear ends are combined this time

Consolidation method:

Then modify angular json、tsconfig. JSON and other addresses containing paths

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

Finally, modify angular The build configuration of JSON saves the build results to 'target / classes / static', so that the front-end resources can be brought in when the Java project is packaged:

  "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"
            ]
          },

matters needing attention: