トラヴィスCIを使用して反応プロジェクトの自動チェックを設定する方法

このポストは、あなたが反応の基礎に精通していて、あなたの仕事をGithubに保存していると仮定します.

自動化とは何か

自動化は、手動でそれを行う必要はありませんので、ちょうどあなたのためのコンピュータを実行するタスクを持っている方法です.
ソフトウェアをビルドするとき、あなたは小さなチャンクでそれをします、ここで少しビットを加えてください、そして、少しそこに、すべてが確実に働くことを確認してください.しかし、あなたが何かを変えるたびに、あなたが前に働いていた何かを壊すかもしれない可能性があります.
あなたは手動ですべてを変更することができますまだ変更するたびに動作します.しかし、あなたのプロジェクトが大きくなるにつれて、より多くの時間がかかります.そして、あなたは何かを逃しそうです.
では、なぜあなたのためにそれらのチェックを行うコンピュータを取得しません.あなたがより生産的な何かにあなたの時間を費やすことができるように.これをすべて実行して取得するプロセスの一部ですContinuous Integration

超簡単アプリ

このポストのために、私は反応で単純なアプリを構築しました.それは完全なToDoリストではありませんが、それは1つのスタートです.
アプリでは、リストにタスクを追加することができます.

私は私のgithubアカウントにこのアプリをプッシュしました.ここで見つけることができます

アレクラックマーシャル / TravisAutomationExample

トラヴィスCIとの統合を示すためにシンプルなToDoアプリ

自動化を設定する

それで、現在プロジェクトはGithubの上にあります.
Travisをセットアップするには、最初に行う必要がありますTravis CI そして、あなたのgithubアカウントにそれをリンクするためにそこにサインアップしてください.

したら、あなたはほとんど設定されている.あなたのプロジェクトには、トップレベルで1つのファイルを追加する必要があります.ファイルを作成する.travis.yml を返します.

language: node_js
node_js:
  - "stable"
script:
  - yarn build

あなたが糸の代わりにNPMであなたのプロジェクトを作成するならばyarn build with npm run build .
これはとても簡単なスクリプトです.我々は、我々のプロジェクトが使用しているTravisnode_js そして、我々はそれを安定版を使用したい.そして、ビルドスクリプトを実行するように頼みます.それは反応ビルドプロセスを実行します、そして、我々が働くことからそれを止めるどんな誤りもしたならば、Travisは我々に話します.
したがって、このファイルをコミットし、Githubに変更をプッシュします.今、GitHubページの上部には、オレンジ色の指標の隣にあなたの最新のコミット番号が表示されます.これを乗り越えると、いくつかのチェックがまだ完了していないことがわかります.そして、Travisビルドが進行中です.

あなたが数分のカップルを与える場合は、アイコンが緑色のダニに変更表示されます.そして、それをクリックすると、ビルドが通過したことがわかります.

プロセスに少しプロセスを追加する

したがって、このセットアップはスーパー基本でした-このチェックをもう少し徹底的にしてください.
私は私たちがタスクを入力し、保存をクリックしたときにチェックし、それが私たちのToDoリストに追加されることを確認するテストを作成しました.を返します.
私はこれらのテストを書く方法について詳細にここでは行きません、しかし、あなたが以前に書かれなかったならば、チェックアウトしてくださいReact Testing Library .
我々は、我々がGithubにコミットを押すたびに、このテストを走らせるようにしてください.だから行を追加することができます.travis.yml それをする.

language: node_js
node_js:
  - "stable"
script:
  - yarn build
  - yarn test

もう一度、NPMを使っているなら、その行はnpm test 代わりに.
Gothubにこの変更をコミットしてプッシュします.再び、我々は緑のダニを得る.をクリックして、リンクをクリックして渡すビルドの詳細を参照してください.トラヴィスは私たちにそれが走ったすべてのログを示しています.我々が下までスクロールするならば、我々はそれが我々のテストの詳細を示すのを見ます.

彼らは彼らの隣に緑のダニを持っているし、すべては、偉大なパス!

安全の枝をつかむ

我々がこれらの緑のダニを持っている今、我々はすべてが動作することを知っている、それが私たちがそのように滞在を確認することができれば素晴らしいことではないだろうか?
これを行うには、別々のGitブランチに常に変更を加える方法があります.このように、我々はメインブランチとは別に仕事をすることができます、そして、一旦我々がすべてがうまく働くと確信しているならば、我々の新しい変化を合併するだけです.新しいブランチを作成するにはgit checkout -b my-new-branch 端末で.今、我々は間違いを犯す場合は、メインコードに影響を与えません.
トラヴィスビルドがパスされない限り、私たちはさらに一歩進め、ブランチからメインへのすべてのマージを停止することができます.
あなたのgithubレポでは、設定に移動し、分岐を選択します.メインブランチの名前を入力することができますRequire status checks to pass before merging そして、あなたのTravisビルドチェック.確認してくださいInclude administrators オプションを自分で自分自身を保護する場合.

試してみて物事を破る

だから何かが壊れたときに何が起こる?新しいtodoをリストに追加する行を削除するためにコードを変更しました.これは私のテストが失敗することを意味します.新しいブランチとして、プッシュ時にGithubに新しいブランチを作る必要がありますgit push --set-upstream origin my-new-branch 端末で.
Githubに行くとき、我々はそれがプル要求をすることを示唆するのを見ます.

緑のボタンを押してプルリクエストを作成します.我々は、チェックが終了するまで、このプル要求をマージできないことを確認します.そして、我々が待つならば、我々はTravis建設で赤十字を見ます.

トラビスの詳細をクリックすると、何が間違っているかを見ることができます.

今回は緑のダニを得ることはありません.テストを見ることができますcan add a task 失敗しました.
トラヴィスは私たちのミスを捕らえました、そして、我々は我々の主なコード・ベースを壊す代わりに、それを修理する機会を得ます.
我々は、我々のコードに戻って、何が間違っていたかについて修正して、再びGithubにプッシュすることができます.今回は、ビルドを通過すると、緑のダニを取得し、我々は安全にプル要求をマージすることができます.

ここからどこへ行くか

これは単なる基礎でした.ここから、あなたが考えることができるほとんど何でも自動化することができます.

フルエンドツーエンドテストの実行

異なるブラウザまたは異なるバージョンのノードでのテスト

すべてが通過するなら、NetLifyのようなサービスへの展開を自動化する

ずっと

私はこのポストは、継続的な統合の利点を見て、どのように設定することができます簡単に役立ちます願っています.
あなたが自動化を使用するクールな方法のための他の提案がある場合は、私はコメントでそれらを聞いてみたい.
ハッピーコーディング!