AWS Codepipelineを使ってReactアプリのCI環境をゼロから作る

# はじめに
Macローカルで開発しているReactアプリを、git pushすれば自動的にビルドし公開環境へデプロイするCI環境をゼロから作ります。AWS Codepipelineを使い、GitHubと連携させてCodebuildでビルドしS3へデプロイします。

別記事にて紹介するAWS Amplifyを使えば（[AWS Amplify Consoleを使ってReactアプリのCICD環境を10分で作る](https://qiita.com/NorihitoYamamoto/items/a866b3692c472f38320d)）、より簡単にCICD環境を作ることが可能です。ただしAmplifyにはいくつか制約もあるため、手動でCI環境を作る以下の手順も残します。

# 作成するもの
次のような環境をAWS上に構築します。

![Untitled Diagram.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/603113/2e1efdf5-d144-a08d-4175-e5f3c9c5871d.png)


# 事前準備
* 「[React版Reactivesearch v3を使ってゼロから最速でElasticsearchフロントアプリを作る](https://qiita.com/NorihitoYamamoto/items/be6d7a245b1e8864952c)」で作ったReactアプリ、もしくはcreate-react-appで作ったReactアプリ
* 「[AWS S3 + CloudFrontでReactアプリをHTTPS公開するための正しい構成](https://qiita.com/NorihitoYamamoto/items/63df7d87dfd67628d775)」で作った環境、もしくはアプリを公開するS3環境

# 手順
## GitHub環境の準備
### GitHubリポジトリの準備
GitHubアカウントを開設し、公開鍵を登録し、リポジトリを作成します。アカウント開設と公開鍵登録までは「[GitHubのアカウント登録からリポジトリ操作まで](https://qiita.com/muneo/items/1321bf8cdb21178a73e2)」が参考になります。リンク先はWindows環境ですが、Macだと最初からgitコマンドやssh-keygenコマンドが入っていますのでそれをそのまま使えます。gitを最新バージョンにしたい場合は「[最新の Git を Mac にインストールする手順](https://qiita.com/normalsalt/items/f200ba50363ebfd46df0)」が参考になります。
新規リポジトリの作成は、リンク先と異なり、**Initialize this repository with a READMEのチェックボックスは外して**空のリポジトリを作成します。ローカルのMacでcreate-react-appを使って作ったReactソースコードをリポジトリにアップロードするためです。リポジトリ名はここでは「cityrank」として説明を進めます。

### Reactコードのリポジトリへのpush
ローカルでcreate-react-appを使って作ったReactアプリをGitHubのリポジトリに反映します。
create-react-appで作ると、自動的にgit initやgit commitは行われているため、下の手順でリポジトリの登録とpushを行います。
Reactプロジェクトのホームディレクトリに移動して下コマンドを実行します。

```
$ git remote add origin https://github.com/[アカウント名]/cityrank.git
$ git push -u origin master
```
originという名前でGitHub上のリポジトリをリモート登録し、masterという名前のブランチにpushしています。
SSH鍵のパスフレーズの入力を求められるので、SSH鍵を作るときに設定したパスフレーズを入力します。

## Codepiplineの準備

### buildspec.ymlの準備
Reactプロジェクトのホームディレクトリ直下に、以下の内容でbuildspec.ymlファイルを新規作成します。この定義に従って、このあと構成するCodebuildがビルドします。ここでは、Reactivesearchを使ったReactアプリを前提にbuildspec.ymlを作っています（install部分）。
ファイル作成後、git pushします。

```yaml:buildspec.yml

version: 0.2
phases:
    install:
        commands:
            - npm install @appbaseio/reactivesearch
    pre_build:
        commands:
            - npm ci
    build:
        commands:
            - npm run build
artifacts:
    base-directory: build
    files:
        - '**/*'
cache:
    paths:
        - node_modules/**/*
```

buildspec.ymlをgit pushします。

```
$ git add buildspec.yml
$ git commit -m "buildspec hogehoge"
$ git push -u origin master
```

### Codepipelineの構成

1. AWS管理コンソールにログインし、Codepipelineの画面に移動
2. 「パイプラインを作成する」ボタンを押す
3. 「パイプライン名」に任意の名前を入れ、それ以外はデフォルトのまま「次に」ボタンを押す
4. 「ソースプロバイダー」としてGitHubをリストから選び、「GitHubに接続する」ボタンを押して接続後、リポジトリとブランチを選択（接続するとGitHub上にあるものから選べるようになります）、検出オプションはGitHub ウェブフックのまま「次に」ボタンを押す
5. 「プロバイダーを構築する」ではCodebuildを選び、リージョンはアジアパシフィック（東京）のまま、「プロジェクトを作成する」ボタンを押す
6. 別ウィンドウが立ち上がるので、プロジェクト名に任意の名前を入れ、オペレーティングシステムにAmazon Linux 2、ランタイムにStandard、イメージにaws/codebuild/amazonlinux2-x86_64-standard:3.0を選択肢、それ以外はデフォルトのまま（ビルド仕様はbuildspecファイルを使用する、CloudWatch Logsはチェックをいれたまま）、「Codepipelineに進む」ボタンを押す
7. 少し待つと、元のCodepipelineの画面に戻り「正常に作成されました」メッセージが表示されるので、「次に」ボタンを押す
8. 「デプロイプロバイダー」にAmazon S3を選択し、「バケット」に公開用バケットを選び、「デプロイする前にファイルを抽出する」にチェックを入れて「次に」ボタンを押す
9. 内容を確認し、「パイプラインを作成する」ボタンを押す

パイプライン作成後、自動で初回のパイプラインが走ります。エラーがないか確認し、Deployに成功していれば、公開環境へアクセスしてアプリが動作するか確認します。


# リンク
[GitHubのアカウント登録からリポジトリ操作まで](https://qiita.com/muneo/items/1321bf8cdb21178a73e2)

[Reactで作ったWebアプリをGitHubで管理してS3に自動デプロイする](https://s8a.jp/react-github-aws-s3-auto-deploy)

buildspec.ymlについては、[AWS Codebuild ユーザーガイド]( https://docs.aws.amazon.com/ja_jp/codebuild/latest/userguide/codebuild-user.pdf)