WeChatアップルは、Jenkinsの自動展開を統合します

その他 2020-10-26 15:35:12 訪問数: null

 

 

バックグラウンド

CI / CDおよびその他の関連ツールがない場合、WeChatミニプログラムのテストリリースには次の問題があります。

  • ミニプログラム開発アシスタントでは、同じ開発者が表示できる開発バージョンは1つだけです。
  • テストの同僚が開発用のQRコードを探していますが、これは非効率的です
  • ローカルで生成されたQRコードには、ローカルコードの伝達、他の変更を時間内にブランチにプルできないなどの問題があります。

上記の問題を回避するために、WeChatアップルトを使用してJenkinsを統合し ます。

基礎

実装計画を紹介する前に、通常のWeChatアップルト公開プロセスを確認しましょう。

https://raw.githubusercontent.com/yingye/Blog/master/images/wechat-jenkins-follow.jpeg

 

上記のフローチャートからわかるように、WeChatアップルレットのプレビューとアップロードは、WeChat開発者ツールで実行する必要があります。次に、WeChat開発者ツールが提供するアップロード方法について学習します。

WeChat開発者ツール

グラフィカルインターフェイスに加えて、WeChat Developer Toolは、ログイン、プレビュー、アップロードなどの操作を実行するための外部呼び出し用のコマンドラインとHTTPサービスの2つのインターフェイスも提供します。

 

コマンドライン呼び出し

コマンドラインツールの場所：

macOS：<インストールパス> /Contents/Resources/app.nw/bin/cliWindows 
：<インストールパス> /cli.bat

例としてmacOSオペレーティングシステムを取り上げます。

1.開発者ツールを開きます。

/Applications/wechatwebdevtools.app/Contents/Resources/app.nw/bin/cli -o

その中に/Applications/wechatwebdevtools.app/は、インストールパスがあります。

2.ログイン：

/Applications/wechatwebdevtools.app/Contents/Resources/app.nw/bin/cli -l

上記のコマンドラインを入力すると、端末にログインQRコードが出力され、WeChatを使用してコードをスキャンしてログインします。WeChat端末での操作が完了するlogin successと、次の図に示すように、が出力 されます。

wechat-jenkins00.png

 

base64形式のQRコードを取得する場合は、次のコマンドを使用できます。

# 登录，在终端中打印登录 base64 形式的二维码
cli -l --login-qr-output base64

# 登录，二维码转成 base64 并存到文件 /Users/username/code.txt 
cli -l --login-qr-output base64@/Users/username/code.txt

その他のAPIについては、コマンドライン呼び出しを参照してください  。

HTTPサービス

HTTPサービスは、ツールの起動後に自動的に起動され、起動するたびにホストは127.0.0.1に固定され、ポート番号は固定されません。ポート番号はユーザーディレクトリに記録され、場所は次のとおりです。

macOS：〜/ Library / Application Support /
WeChatWeb開発者ツール /Default/.ideWindows：〜/ AppData / Local / WeChatWeb開発者ツール/ UserData / Default / .ide

例としてmacOSオペレーティングシステムを取り上げます。

まず、開発者ツールを実行する必要があります。上記のコマンドラインメソッドを使用して、WeChat開発者ツールを開くことができます。

/Applications/wechatwebdevtools.app/Contents/Resources/app.nw/bin/cli -o
port=$(cat "/Users/zyy/Library/Application Support/微信web开发者工具/Default/.ide")
echo "微信开发者工具运行在${port}端口"

このようにして、WeChat開発者ツールが実行されているポート番号を取得できます/Users/zyy/ 。その中にはユーザーディレクトリがあります。

 

1.開発者ツールを開きます。

# 打开工具
http://127.0.0.1:端口号/open
# 打开/刷新项目
http://127.0.0.1:端口号/open?projectpath=项目全路径

2.ログイン：

# 登录，返回图片格式的二维码
http://127.0.0.1:端口号/login
# 登录，取 base64 格式二维码
http://127.0.0.1:端口号/login?format=base64
# 登录，取 base64 格式二维码，并写入 /Users/username/logincode.txt
http://127.0.0.1:端口号/login?format=base64&qroutput=%2FUsers%2Fusername%2Flogincode.txt

3.プレビュー：

# 预览路径为 /Users/username/demo 的项目，返回图片格式的二维码
http://127.0.0.1:端口号/preview?projectpath=%2FUsers%2Fusername%2Fdemo

# 预览路径为 /Users/username/demo 的项目，返回 base64 格式的二维码
http://127.0.0.1:端口号/preview?projectpath=%2FUsers%2Fusername%2Fdemo&format=base64

# 预览路径为 /Users/username/demo 的项目，返回 base64 格式的二维码，并写入 /Users/username/logincode.txt
http://127.0.0.1:端口号/preview?projectpath=%2FUsers%2Fusername%2Fdemo&format=base64&qroutput=%2FUsers%2Fusername%2Flogincode.txt

# 预览路径为 /Users/username/demo 的项目，返回图片格式的二维码，并将预览信息输出至 /Users/username/info.json
http://127.0.0.1:端口号/preview?projectpath=%2FUsers%2Fusername%2Fdemo&infooutput=%2Users%2username%2info.json

その他のAPIについては、HTTP呼び出しを参照してください  。

プログラム

WeChat開発者ツールは現在、サーバーシステムを制限するmacOSおよびWindowsバージョンでのみ使用できます。以下では
、特定の実装プロセスを紹介する例としてmacOSを取り上げます。

Jenkinsをインストールします

主要なオープンソース自動化サーバーであるJenkinsは、プロジェクトの構築、展開、および自動化をサポートする数百のプラグインを提供します。主要なオープンソース自動化サーバーとして、Jenkinsは
、プロジェクトの構築、展開、および自動化をサポートする数百のプラグインを提供します  。

JenkinsはJavaランタイム環境に依存しているため、Javaをマシンにインストールする必要があります。Jenkinsをインストールするには、さまざまな方法があります。最新のソフトウェアパッケージを公式Webサイトから直接ダウンロードし、次のコマンドを実行してJenkinsを起動できます。

java -jar jenkins.war --httpPort=8888

その中で--httpPort=8888 、サービスポート番号を設定するためのデフォルトのポート番号は8080です。

新しい仕事

wechat-jenkins01.png

 

「フリースタイルソフトウェアプロジェクトの構築」を選択し、タスク名を入力後、「OK」ボタンをクリックしてタスク設定ページに入ります。

タスク構成

タスク構成を紹介する前に、実現する最終的な機能を見てみましょう。

wechat-jenkins03.png

 

主な機能は次のとおりです。

  • gitを使用してコードを管理し、ブランチを選択できます
  • パッケージ版（開発版/実験版）を選択できます（注：ここでの「開発版」は「プレビュー」に対応し、試用版は「アップロード」に対応します）

1.ソースコード管理

wechat-jenkins02.png

 

タスク設定ページの2番目の項目「ソースコード管理」で、gitメソッドを選択してコードを管理します。gitウェアハウスのアドレスとアクセスアカウントを入力します。上の図 $branch はカスタムビルドパラメータです。ビルドパラメータの定義を見てみましょう。

2.構築パラメータ

タスク設定ページの2番目の項目「一般」で、「パラメータ化された構築プロセス」を選択して、構築パラメータ設定ページに入ります。

wechat-jenkins04.png

 

選択するパラメータにはいくつかの種類があります。構成については下の図を参照してください。ここでは繰り返しません。

 

wechat-jenkins06.png

 

ここでの名前は、上記の$ branchなどの$ nameの形式で取得できることに注意してください。

構築する

タスク設定ページの「ビルド」で、ビルドする「シェルの実行」メソッドを選択します。

 

wechat-jenkins07.png

要約すると、この記事の冒頭で述べたWeChatアップルトのリリースフローチャートは次のとおりです。

wechat-jenkins-follow.jpeg

 

この一連の操作はシェルスクリプトを使用して実行されますが、それを実現するにはどうすればよいですか？

ログインする

WeChat Developer Toolsのログインでは、WeChatのコードをスキャンして確認する必要があります。このステップでは、WeChatはアカウントパスワードのログイン方法を提供しません。ただし、WeChat開発者ツールはログインしたままにすることができます。WeChatの制限により、開発者IDは1つの端末にしかログインできないため、Jenkinsマシンにログインするための新しいWeChatアカウント「フロントエンドミスシスター」を申請しました。

プロジェクトの基本設定

wechat-jenkins11.png

 

グラフィカルインターフェイスでは、コードをアップロードするときに、AppID、プロジェクトパス、およびその他の情報が開発者ツールに入力され、プロジェクトの基本設定も「ES6からES5」などの「詳細」で選択されます。WeChatは、プロジェクトルートディレクトリのproject.config.jsonファイルを使用した構成方法も提供します。ここでは、ノードスクリプトを使用してproject.config.jsonファイルを生成します。

const fs = require('fs')

const content = '{"description":"项目配置文件。","setting":{"urlCheck":false,"es6":true,"postcss":true,"minified":true,"newFeature":true},"miniprogramRoot":"./","compileType":"miniprogram","appid":"***","projectname":"wechat-app","condition":{"search":{"current":-1,"list":[]},"conversation":{"current":-1,"list":[]},"plugin":{"current":-1,"list":[]},"game":{"currentL":-1,"list":[]},"miniprogram":{"current":-1,"list":[]}}}'

fs.writeFileSync('./dist/project.config.json', content, 'utf-8')

これでプロジェクトの基本設定は完了です。次に、シェルスクリプトでアップロードする方法を紹介します。

シェルスクリプト

echo -------------------------------------------------------
echo GIT_BRANCH: ${GIT_BRANCH}
echo -------------------------------------------------------
# 执行项目构建
npm i --registry=http://registry.npm.taobao.org
npm run build
# 打开微信开发者工具
/Applications/wechatwebdevtools.app/Contents/Resources/app.nw/bin/cli -o
port=$(cat "/Users/devops/Library/Application Support/微信web开发者工具/Default/.ide")
echo "微信开发者工具运行在${port}端口"
return_code=$(curl -sL -w %{http_code} http://127.0.0.1:${port}/open)
if [ $return_code == 200 ]
  then
  echo "返回状态码200，devtool启动成功！"
else
  echo "返回状态码${return_code}，devtool启动失败"
  exit 1
fi
if [ "$build_type" == "dev" ]
  then
  echo "发布开发版！"
  wget -O $BUILD_ID.png http://127.0.0.1:${port}/preview?projectpath=/Users/Shared/Jenkins/Home/workspace/fe-wechat-app/dist
  echo "预览成功！请扫描二维码进入开发版！"
elif [ "$build_type" == 'prod' ]
  then
  echo "准备上传！"
  /Applications/wechatwebdevtools.app/Contents/Resources/app.nw/bin/cli -u 1.0.0@/Users/Shared/Jenkins/Home/workspace/fe-wechat-app/dist --upload-desc 'initial release'
  echo "上传成功！请到微信小程序后台设置体验版并提交审核！"
fi

このプロジェクトはコードをコンパイルする必要があるため、nodeとnpmをサーバーにインストールする必要があります。npm run build このコマンドは、コードをコンパイルするだけでなく、前述のproject.config.jsonを生成するノードスクリプトも実行します。

開発版が正常にアップロードされたら、QRコードを表示し、作成後にメールを送信するために、QRコードの画像を保存します。

主に次の理由により、アップロードを完了するためのコマンドライン呼び出しと HTTP呼び出しの組み合わせを次に示します。

  • HTTP呼び出しは、生成されたQRコードイメージを簡単にダウンロードできます
  • HTTPサービスは、WeChat開発者ツールが開始された後にのみ開始されるため、コマンドラインを呼び出してWeChat開発者ツールを開始する必要があります。

ビルド後

description setter plugin プラグインを使用 して達成し、建設が完了した後にQRコード画像を表示します。

プラグインをインストールする

Jenkinsのホームページに戻り、「システム管理」で「プラグイン管理」ページに移動し、検索 description setter plugin してインストールします。

 

wechat-jenkins09.png

ここでは<img> 、次のようにHTML タグを使用してQRコード情報を表示します。

<img src="http://机器ip:端口/job/项目名称/ws/${BUILD_ID}.png" alt="二维码${BUILD_ID}"width="200" height="200" /> <a href="http://机器ip:端口/job/项目名称/ws/${BUILD_ID}.png">二维码${BUILD_ID}</a>

上記のように設定した後、画像は表示されないが、テキスト情報は表示されることがわかります。これはJenkinsのセキュリティ制限によるもので、情報を記述するすべてのMarkupFormatterはデフォルトでプレーンテキストモードを使用します。

「システム管理」->「グローバルセキュリティ設定」で、マークアップフォーマッタをプレーンテキストからセーフHTMLに変更します。

上記の手順を実行すると、開発バージョンのQRコードが表示されます。Jenkinsは「MissFrontend」のWeChatアカウントを使用して構築されているため、Mini Program Development Assistantの「MissFrontend」によってリリースされた開発バージョンでは、どのクラスメートがそれを構築したかがわかりません。したがって、Jenkinsプラットフォームによって生成されたQRコードを使用する必要があります。また、QRコードの有効期間（有効期間は25分）に注意してください。

 

wechat-jenkins12.jpeg

 

総括する

この記事では、WeChatアプリレットの定期的な公開プロセスを出発点として、Jenkinsを統合してWeChatアプリレットのプレビュー機能とアップロード機能を実現する方法を段階的に紹介します。バックエンドとテストの同僚は、プラットフォーム上のブランチを選択して、共同デバッグとテスト用の開発バージョンを取得できます。これにより、この記事の冒頭で説明した問題が解決されます。

この記事のスペースには限りがあるため、プラットフォームの基本的な機能の一部のみを紹介しています。他に必要な場合は、記事の最後にある拡張リンクを参照してください。また、文章に曖昧さや不適切さがある場合は、批判して訂正してください〜

 

おすすめ

転載: blog.csdn.net/superiorpengFight/article/details/103988645
おすすめ
ライナスは「ドッグフードを食べる」ことに最も積極的！
Open Source Daily | Winamp プレーヤーがオープンソースになりつつある; 生成 AI の戦いは第 2 ラウンドにエスカレート; AI はバブルの初期段階に入った; Yongming を Alibaba Cloud に導入しますか?
ランキング
C言語プログラミングの最新の方法（第2回）第12章回答（自分で書いた回答、継続的に更新）
フレームワークの蜂のアップロードファイルに移動します
タイトルバーシリーズ：タイトルバーで遭遇したピットを非表示にする
Unityはゲームオブジェクトの様々な状況を取得します
N個の異なるボールは、Mどのように多くの種類のプログラムのと同じ袋に入れられますか？
オブジェクト指向のクラス、オブジェクト21
C ++オブジェクト指向プログラミングの研究ノート（8）
P3954 [NOIP2017 普及组] 成绩
分業のプロセス間通信 - ロック
ハッカーは通常、DOSコマンドウィンドウを使用します
アーカイブ
もっと
2024-05-20(5)
2024-05-19(0)
2024-05-18(30)
2024-05-17(6)
2024-05-16(24)
2024-05-15(5)
2024-05-14(9)
2024-05-13(8)
2024-05-12(27)
2024-05-11(31)

コードワールド

© 2018 codetd.com