The cause of

In a weekly meeting within the group last year, many people gave feedback that they needed to provide host configuration and other services to non-technical students frequently, which led to some signs that his Kirin arm was about to attack.

After the weekly meeting, summarized our daily development process, environment-related issues

  • Inefficient Environment switchingCurrently our technical team (non-front-end) is mainly usedFiddler/Charles + hostTools and other traditional packet capture agent debugging solutions, often occur when switching environmentsDNSAt the same time, the proxy tool and the browser page are two interfaces, which is inefficient to switch back and forth, especially when there are many parallel projects
  • Repeat services for non-technical personnel, just like the case in the feedback of the above weekly meeting, we need to configure agents for students in product, operation and design, download certificates and authenticate them. After configuring many times, it tests our patience very much
  • During the coupling of the front and back end environments, when the back-end development changes the server, it must inform the front end to change the proxy configuration
  • No packet capture history only a screenshot of the interface cannot show all information, and the bug feedback from the test cannot be traced back to the source. “I have a good one here, can I reproduce it now?” And it happens a lot

Based on these problems, we began to look for solutions

broken

In the area of capture agent, the FE team has updated once. Switch from Fiddler/Charles + Host to whistle

Whistle is a cross-platform Web proxy debugging tool based on Node. It is not only more efficient than Fiddler/Charles + Host in environment switching, but also supports multiple matching methods such as port and path. At present, it has been the first choice for FE team to capture packets

But Whistle still doesn’t solve these problems, and because it relies on a local Node environment, it’s not suitable for non-technical users

Imagine moving the proxy configuration from the local server to the remote server, forwarding all the request proxies to the remote server, and then the remote server uniformly dispatches to the corresponding test server according to a set of account system, wouldn’t that solve our current problem?

Based on this idea, we found a solution suitable for our needs, NoHost produced by Tencent IMWeb team

Nohost profile

Nohost is a remote environment configuration and proxy packet capture debugging system based on whistle implementation. On the basis of retaining the original functions of Whistle, it centralizes the agent configuration, supports multiple people and multiple accounts at the same time, and injects small dots to switch the environment on the product page to solve problems such as environment switching.

Nohost function

Summary of some of noHost’s powerful features, more detailed features, you can refer to the official website

  • Based on thewhistle, sowhistleIt has everything. Compared to the traditionalFiddler/CharlesIt is much easier to configure and modify the request response
  • If you visit a page that conforms to the entry rules, you’ll find a dot injected into the bottom left corner of the page that allows you to switch between development, test, and production. At the same time, the switching tool is injected into the page, relatively high efficiency.

  • Replication link Replication contains the URL of the current environment, and the shared person can quickly switch to the specified environment without the host configuration in the switching tool, which improves efficiency
  • You can generate request snapshots based on packet capture requests and send them to the r&d team, which helps the R&D team quickly locate problems.PS: No more inefficient screenshots and dictation

  • Multi – terminal configuration support, including PC, H5, applets, etc
  • Multiple accounts and multiple environments can be separated and shared.
    • Front-end references to back-end environments can be passed directly@ Back end/test environmentYou don’t need to know the specifics of the other person’s environment
    • Tests can be done directly@ Back end/test environment,Front-end/test environment, no need to match the environment.

    The configurations and environments of different accounts are isolated from each other

  • Plug-in system, support custom extension capabilities
  • The certificate upload system allows you to upload a real certificate to the NOhost server. You do not need to download the certificate to the local PC
  • Provides external interfaces for CI operations to automatically add, delete, check, and modify environment configurations to maximize environment configuration efficiency

Nohost principle

  1. The NOhost client needs to be started on the PC and developed based on ELECTRON, as shown in the figure

  1. The nohost client will forward the requests that meet the entry rules to the NOhost server, while the mobile terminal can directly configure the proxy to the Nohost serverPS: You are advised to use domain names instead of IP addresses

  1. All requests forwarded to the NOHost server go through a main Whistle process and are selected by the userAccount/Environment informationThen forward
  2. According to the configured rules, the unmatched requests are directly forwarded to the formal environment. The matched requests are sent to independent processes under different accounts, and then the independent processes forward the matched requests to the corresponding test server.

So how does NoHost centralize configuration and reduce server stress with multiple processes

Nohost practice

The usage of NOhost can be roughly divided into the following steps. For details, please refer to the official website of NOhost

  1. Install nohost on the remote server, and then run the startup command
  2. The NOhost management platform is displayed//xxx.xxx.xxx.xxx:8080/admin.html#accountsAdd account

3. Access//xxx.xxx.xxx.xxx:8080/admin.html#config/entrySettingsAdd entry rules4. After adding the account, go to the packet capture configuration page to create an environment5. The PC uses the Nohost client to forward requests to the remote server. You need to develop a nohost clientwhistlePlug-ins (modify a few lines of code based on the template) can be consultednohost-client 6. Access the page that conforms to the entry rules, and you can switch the environment at will

Nohost promotion

After the survey was completed, we shared and communicated with each other in the weekly meeting of the group. After receiving the positive feedback from everyone, we were ready to start promotion to other members of the project team.

This is the most difficult step we are working on. While we recognize that NoHost solves many of the environmental problems we face in our daily development process, it’s not going to take a day for others to embrace and change their old debugging habits.

After completing a system training for project team members and improving relevant documents, I am still collecting feedback from everyone in the process of using the system, striving to promote it to the whole company as soon as possible

future

After everyone gets used to it, this tool can be connected to our CI in the future, opening up the testing environment and maximizing our development efficiency.

The welfare of

Next, we will release the practice and thinking related to Hybrid, micro front-end, Umi and other infrastructure and Taiwan technology successively. Welcome your attention and look forward to more exchanges with you. Article in “big zhuan FE” public number will also be sent, and the public number has a lucky draw, this prize is a memorial T-shirt, welcome to pay attention to (°▽°) Blue ✿