はじめに
「AWS Codepipelineを使ってReactアプリのCI環境をゼロから作る」で作ったCI環境を、エディタBracketsから直接実行できるようにします。Bracketsでソースを修正し、ローカルプレビューで確認した後、git pushボタンを押すことでデプロイまで自動で行います。
Bracketsは、Adobeによりオープンソースで開発されているWebアプリ開発向けのコードエディターです。
事前準備
- gitの導入とReactプロジェクトでの設定（参考：AWS Codepipelineを使ってReactアプリのCI環境をゼロから作る）
手順
Bracketsのインストール
http://brackets.io からインストーラをダウンロードし、ダブルクリックしてインストールします。
Brackets Git機能拡張をインストール
Bracketsを起動し、「ファイル」→「機能拡張マネージャー」を開きます。「Brackets Git」を検索し「インストール」ボタンを押してインストールします。
BracketsでReactプロジェクトを開く
Bracketsを起動し、「ファイル」→「フォルダを開く」で、Reactプロジェクトのホームディレクトリを開きます。左ペインのファイル一覧から編集したいファイル名をクリックしてメインウィンドウに開きます。
Bracketsからgit操作
Bracketsの右端にあるGit機能拡張アイコン（*1）を押すと下側にgit操作のパネルが開きます。
ソースコードを編集し保存すると、更新したファイルがgit操作パネルに表示されます。その左側にチェックを入れると、Commitアイコン（*2）が押せるようになります。Commitウィンドウがポップアップするので、コメントを書いて「OK」ボタンを押します。右側のgit pushアイコン（*3）に更新数が表示されます。git pushアイコンを押してpushウィンドウがポップアップするので、そのまま「OK」ボタンを押します（SSH鍵認証しているのでユーザ／パスワード不要です）。
AWS Codepipelineを使ってReactアプリのCI環境をゼロから作るで作ったCI環境があれば、これで自動でビルドし公開環境にデプロイされます。
*1 git機能拡張アイコン：
*2 Commitアイコン：
*3 git pushアイコン：
