DOnations]プログラムの一環として寄付を受け取りました。_前書き開発者がアプリケーションを継続的に変更している場合、webhookを備えた展開システムは、特にチーム向けに開発を効率化できます。チームの一部がAPIなどのバックエンドソフトウェアに依存している場合、コードの変更に関するSlack通知をチームのワークフローに統合することも役立ちます。+`パッケージ]を使用してReactアプリケーションを構築します。このパッケージは、構文を変換し、依存関係および前提条件ツールを使用して作業を合理化することにより、Reactプロジェクトのブートストラップ作業を簡素化します。アプリケーションコードをGitHubリポジトリに追加した後、更新されたプロジェクトファイルを提供するようにNginxを構成します。次に、webhookサーバーをダウンロードしてセットアップし、コードが変更されたときにGitHubと通信するように構成します。最後に、Slackを別のwebhookサーバーとして機能するように設定します。これは、展開が正常にトリガーされたときに通知を受け取ります。最終的に、この記事で構築する展開システムは次のようになります。[展開例]この短いビデオでは、空のコミットとGitHubリポジトリへのプッシュが示され、Slackでアプリケーションのビルドと通知がトリガーされます。前提条件このチュートリアルを完了するには、次のものが必要です。16.04での初期サーバーセットアップチュートリアル]に従って設定できます。このガイドに従うと、sudo特権を持つ非rootユーザーアカウントが必要になります。16.04にNginxをインストールする方法]の最初の2つの手順に従ってサーバーにインストールされたNginx。ローカルマシンとサーバーの両方で構成されたGit。Git]でこのチュートリアルをご覧ください。16.04にNode.jsをインストールする方法]。[プロジェクトのインストール手順]に従ってください。[インストールヤーン]の公式ガイドに従って、サーバーにインストールされたヤーン。Slackおよび通知用の個々のチャネルを構成する権限。docs]をご覧ください。+`でWebhookをテストするために使用するアプリケーションを構築しましょう。次に、GitHubリポジトリを作成し、プロジェクトコードをプッシュします。create-react-app`コマンドを使用できるようにします。`というプロジェクトを作成します。`++`に移動します。package.json`ファイルを開きます。package.jsonファイルは次のようになります。package.json`ファイルには次のスクリプトが含まれています。*:このスクリプトは、アプリケーションの開発バージョンを開始する役割を果たします。アプリケーションを提供するHTTPサーバーを実行します。*:このスクリプトは、アプリケーションの製品バージョンを作成する役割を果たします。サーバーでこのスクリプトを使用します。*:このスクリプトは、プロジェクトに関連付けられたデフォルトのテストを実行します。+`パッケージの高度な機能です。開発者がパッケージが提供するビルド環境に満足していない場合、アプリケーションを「イジェクト」することができます。しないと使用できないオプション(カスタムCSSトランスパイラーやJS処理ツールなどを含む)が生成されます。コードの検査が終了したら、ファイルを閉じます。次に、プロジェクトのGitHubリポジトリを作成しましょう。[GitHubリポジトリの作成]でこのチュートリアルに従うことができます。URLでリモートオリジンを追加します。originプロジェクトディレクトリ内のすべてのファイルをステージングします。.それらをコミットします。+`による初期化の詳細については、GitHubのhttps://help.github.com/articles/adding-an-existing-project-to-github-using-the-command-lineを参照してください/[ドキュメンテーション]。リポジトリのセットアップが完了したら、サーバーの構成の詳細の指定に進みます。ステップ2-ディレクトリのセットアップとNginxの構成リポジトリを配置したら、GitHubからアプリケーションコードを取得し、アプリケーションを提供するようにNginxを構成できるようになりました。サーバーにログインし、ホームディレクトリに移動して、リポジトリのクローンを作成します。cloneクローンプロジェクトに移動します。`コマンドを実行する必要があります。これにより、プロジェクトのビルドスクリプトが実行され、ビルドディレクトリが作成されます。`ファイル、JavaScriptファイル、CSSファイルが含まれます。+`コマンドは、プロジェクトに必要なすべてのノードモジュールをダウンロードします。`ディレクトリへのシンボリックリンクを作成しましょう。+`ディレクトリからサービスを利用できるようになります。/var/www/これは、より頻繁に変更されるビルドディレクトリではなく、プロジェクトディレクトリにリンクすることに注意してください。このリンクの作成は、アプリケーションの新しいバージョンをデプロイするシナリオで特に役立ちます。安定したバージョンへのリンクを作成することにより、追加バージョンをデプロイする際に後でスワップアウトするプロセスを簡素化します。問題が発生した場合も、同じ方法で以前のバージョンに戻すことができます。Nginxが適切に提供できるように、シンボリックリンクにいくつかの権限を設定する必要があります。/var/www次に、ビルドディレクトリを提供するNginxサーバーブロックを構成します。次のように入力して、新しいサーバー構成を作成します。}}このファイルのディレクティブは次のとおりです。*:サーバーのリスニングポートを設定するプロパティ。*:Nginxがファイルを提供するフォルダーへのパス。*:サーバーが最初に提供しようとするファイル。index.nginx-debian.html`、優先度付き最初から最後まで。*:サーバーのドメイン名またはIP。+`フォルダーからサーバーブロック構成を有効にします。設定が有効かどうかを確認します。-t最後に、Nginxを再起動して新しい構成を適用します。nginxこれらの構成の詳細を設定したら、webhookの構成に進むことができます。ステップ3-Webhookのインストールと構成Webhookは、_hooks_と呼ばれる構成可能なエンドポイントを持つ単純なHTTPサーバーです。HTTPリクエストを受信すると、webhookサーバーは、構成可能な一連のルールに準拠するカスタマイズ可能なコードを実行します。Slackを含む、インターネット上のアプリケーションに統合された多くのwebhookサーバーが既にあります。Webhookサーバーの最も広く使用されている実装は、Goで記述されたhttps://github.com/adnanh/webhook[Webhook]です。このツールを使用して、webhookサーバーをセットアップします。サーバー上のホームディレクトリにいることを確認します。+`をダウンロードします。bin`に移動して、環境で使用できるようにします。/usr/local/bin最後に、ダウンロードしたファイルをクリーンアップします。+`の可用性をテストします。」フォルダを設定しましょう。最初に、ディレクトリを作成します。+`サーバーを設定しましょう。hooks.json`ファイルを作成します。+`がトリガーされるようにするには、ファイルにルールのJSON配列が必要です。これらのルールは、次のプロパティで構成されています。{}}具体的には、これらのルールは次の情報を定義します。*:webhookサーバーが提供するエンドポイントの名前。これを「++」と呼びます。*:フックがトリガーされたときに実行されるスクリプトへのパス。+`スクリプトになります。*:コマンドの実行時に使用される作業ディレクトリ。*:HTTPリクエストからスクリプトに渡されるパラメーター。HTTPリクエストのペイロードからコミットメッセージ、プッシャー名、コミットIDを渡します。これと同じ情報がSlackメッセージにも含まれます。+`ファイルには次の情報が含まれている必要があります。+」プロパティが含まれます。GitHubリポジトリで設定されたイベント(PUSHなど)が発生すると、GitHubはイベントに関する情報を含むJSON本体を含むPOSTリクエストを送信します。[GitHubイベントタイプのドキュメント]にあります。`プロパティで、これはフックがトリガーされる条件の下でwebhookサーバーに伝えます。空のままにすると、フックが常にトリガーされます。この例では、GitHubがWebhookサーバーにPOSTリクエストを送信したときにトリガーされるようにフックを設定します。+」ブランチに対して発生した場合にのみトリガーされます。」を定義し、「+」を選択したパスワードに置き換えます。+`は次のようになります。}]確認する最後の構成項目の1つは、サーバーのファイアウォール設定です。+`でリッスンします。サーバーでファイアウォールが実行されている場合、このポートへの接続を許可する必要があります。現在のファイアウォールルールのリストを表示するには、次のように入力します。essentials]の紹介を参照してください。次に、GitHubリポジトリを設定して、このエンドポイントにHTTPリクエストを送信します。リポジトリに移動して、[設定]をクリックします。Webhookの追加*をクリックします。ドメイン名がある場合は、「」の代わりにそれを使用できます。+`プロパティと一致することに注意してください。+`として表示されます。