エンタープライズWeChatサイドバーのローカルデバッグ

前書き

エンタープライズWeChatセルフビルドアプリケーションでサイドバー機能を開発するとき、私は通常、開発者ツールを使用するようにローカルでページをデバッグする方法を考えます。よく見ると、サイドバーは実際にはエンタープライズWeChatの1つであることがわかります。特定のアドレスを持つブラウザー。サイドバーでローカルIPとポートへのパスを構成できます。エンタープライズWeChatを開いたときに、ローカルアプリケーションにアクセスできます。

ただし、ログイン時に、承認されたコールバックアドレスはエンタープライズWeChatによって検証されるため、上記の方法でローカルアプリケーションを開くことはできますが、ログイン方法をシミュレートすることでバイパスすることもできますが、承認する方法はありません。ただし、手動操作は面倒でエラーが発生しやすいため、次の方法があります。

チャールズ、フィドラー

これは、ナゲッツで見つけたもう1つの比較的簡単な方法です。詳細はジャンプします。エンタープライズWeChatのセルフビルドアプリケーションサイドバーは、ローカル環境として構成されています。

Nginxリバースプロキシ

実際、原則は上記のスキームに似ています。ドメイン名リクエストをローカルマシンに転送するようにホストを変更し、アプリケーションがリバースプロキシを介して開始されたときにリクエストをIPとポートに転送することです。エンタープライズWeChatのドメイン名検証を欺くために、ローカルデバッグの目的を達成します。

具体的な操作手順は次のとおりです。

まず、ローカルマシンのホスト構成をすばやく変更できるソフトウェアが必要です。これはここで推奨されています

Mac- iHosts
ウィンドウ-SwitchHosts

インストールが完了したら、ソフトウェアの使用方法に従って、エンタープライズWeChatサイドバーの有効なコールバックアドレスをホストファイルに構成し、マシンをポイントします。有効なアドレスがであると仮定するとtest.wxworksidebar.com、hostsファイルに行を追加する必要があります。

127.0.0.1 test.wxworksidebar.com
复制代码

127.0.0.1代わりに、マシンが配置されているネットワークIPを使用することもできます。

Nginxのインストールと構成

Nginxのインストールは比較的面倒です。MacとWindowのそれぞれの紹介は次のとおりです。

マック

最初にHomeBrewをインストールします。できれば、アクセス可能なネットワークを使用します。
インストールが完了したら、コマンドを実行してNginxをインストールしますbrew install nginx。
Nginxのインストールが完了するのを待った後、HomeBrewを使用してNginxを起動しますbrew services start nginx。
ブラウザを開いてアクセスしlocalhost:8080ます。Nginxのウェルカムページが正常に表示される場合は、Nginxが正常にインストールおよび起動されたことを意味します。

窓

WindowのNginxは非常に魅力的であり、一般的に使用と管理が容易ではありません。ここでは、Dockerによるインストールが推奨される統合ソフトウェアnginxWebUIをお勧めします。

Nginxを構成する

フロントエンドの場合、Nginxの構成を短時間で理解することは非常に困難です。nginxWebUIの管理バックグラウンドを使用して、必要なNginx構成コードを生成することをお勧めします。

nginxWebUIにはデモデモがあり、ユーザー名とパスワードは両方ともadminです。nginxWebUIの管理インターフェイスに入った後、方向プロキシメニューを選択します。

方向プロキシを追加します。

貼り付けた画像20220407235331.png

送信後、リストでプレビューボタンを選択して、追加したNginx構成を表示します。

貼り付けた画像20220407235558.png

上記の構成コードをコピーして、ローカルのNginx構成ファイルに貼り付けます。MacNginx構成は次のとおりです。/opt/homebrew/etc/nginx/nginx.conf

#user nobody;

worker_processes 1;

  

#error_log logs/error.log;

#error_log logs/error.log notice;

#error_log logs/error.log info;

  

# pid logs/nginx.pid;

  
  

events {

worker_connections 1024;

}

  
  

http {

include mime.types;

default_type application/octet-stream;

  

#log_format main '$remote_addr - $remote_user [$time_local] "$request" '

# '$status $body_bytes_sent "$http_referer" '

# '"$http_user_agent" "$http_x_forwarded_for"';

  

#access_log logs/access.log main;

  

sendfile on;

#tcp_nopush on;

 

#keepalive_timeout 0;

keepalive_timeout 65;

#gzip on;

server {
    listen 8080;
    server_name localhost;
    #charset koi8-r;
    #access_log logs/host.access.log main;
    location / {
        root html;
        index index.html index.htm;
    }
    #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 html;
    }  
    #....
}

# 这里是新添加的代码

server {
    server_name test.wxworksidebar.com;
    listen 80;
    location / {
        proxy_pass http://192.168.0.170:8090/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Host $http_host;
        proxy_set_header X-Forwarded-Port $server_port;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

# ....

include servers/*;

}
复制代码

Nginxを再起動して、ローカル開発とデバッグを実行します。