BLOG

CircleCI & Reactを試してみる

最近Reactを始めたということで今後実務で行うかもしれないTDDも視野に入れながら開発をしていこうと考え、CircleCI + React で遊んでみることにしました!

TypeScriptでCRA

まずは手始めに簡単なアプリを構築してみましょう。

TypeScriptでやります。

$npx create-react-app circleci-test-app --typescript

※今回の記事では自分はnpmよりyarn派なのでそちらを使っていきますが、そこのところはあまり気にしないでください。

$cd circleci-test-app
$yarn start

で起動を確認できたら

$yarn install

ただのyarnコマンドを実行します。

これは、npm installコマンドとやっていることは同じで、package.jsonに記録されたパッケージをインストールしています。この時にpackage-lock.jsonが自動作成されますが、これがないと後々circleCIを実行した時にエラーになるので必ず行ってください。(また後で解説します)

ここまでできたら一旦githubにpushします。

適当にリポジトリを作ってそこにぶち込めばokです。

次に CircleCIにログインしましょう。

https://circleci.com/ja/vcs-authorize/

Projectsのところから、先ほどpushしたリポジトリを選択し、Set up Projectをします。

ymlのコードが描かれている画面に遷移したら Use Existing Configというボタンを押下し、手順通りにプロジェクト直下に .circleci ディレクトリを作成します。

その画面からconfigファイルをダウンロードできるので、先ほど作成したディレクトリに入れます。

ここまできたらもう一度 githubに pushしてください。

そうしたらcircleciに戻ってもらって、Start Buildingをします。

二回目以降はpush時に自動的にテストを行ってくれます。

結果がSuccessになっていれば完了です!!!!!

お疲れ様でした!!!