Amplify を使ってReactのサンプルアプリケーションを公開してみる

# Amplifyを使ってReactアプリケーションの公開を行ってみる 

## ローカル開発環境
|  環境  |  バージョン  |
| ---- | ---- |
|  os  |  windows 11  |
|  Docker DeskTop  |  v20.10.17  |
|  Node.js  |  16.14.0  |
|  React  |  18.2.0  |
|  Typescript  |  4.4.2  |

## ローカル開発環境構築：フォルダ構成作成
以下の構成で作成
```
.
├── .git
├── frontend
│   └── ... Reactプロジェクトを作成する場所
├── docker-compose.yml
└── Dockerfile
```

## ローカル開発環境構築：Docker-Compose build
Docker DeskTopは各自インストール
以下のコマンド実行
- docker-compose build  
```dockerfile
dockerfile
# Node.jsイメージを使用します。
FROM node:16.14.0

# 必要なパッケージをインストールします。
RUN apt-get update && apt-get install -y \
  curl \
  && rm -rf /var/lib/apt/lists/*

# Yarnをインストールします。
RUN curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version 1.22.4
ENV PATH="/root/.yarn/bin:/root/.config/yarn/global/node_modules/.bin:${PATH}"
```

 ```docker-compose.yml
version: '3'
services:
  frontend:
    container_name: GolfParkFront
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "3000:3000"
    volumes:
      - ./frontend:/frontend
    #working_dir: "/frontend"
    command: sh -c 'cd frontend && yarn start'
    environment:
      - NODE_ENV=development
 ```

## ローカル開発環境構築：Reactプロジェクト作成
### コンテナの起動とコンテナに入る
- docker compose up -d
- docker exec -it [container name] /bin/bash 

### コンテナに入ってから
- cd frontend
- sh -c 'yarn create react-app search-golf-app --template typescript’

### Reactプロジェクト作成後はこんなフォルダ構成になる
```
.
├── .git
├── frontend
│   ├── public
│   │   └── ...
│   ├── src
│   │   └── ...
│   ├── .gitignore
│   ├── package.json
│   ├── README.md
│   ├── tsconfig.json
│   └── yarn.lock
├── docker-compose.yml
└── Dockerfile
```

### 動作確認
- docker compose up -d
- ブラウザで localhost:3000
### ホットリロード対応
- react-scripts start → WATCHPACK_POLLING=true react-scripts start 
```package.json
...
"scripts": {
    "start": "WATCHPACK_POLLING=true react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
...
```

## Amplify公開準備
- githubアカウント作成 と 作成したプロジェクトをリポジトリに格納
- AWSアカウントの作成


## Amplify公開
### 検索窓で調べる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/709188/281659b2-a05d-f3da-6988-585659303da5.png)

### 使用開始
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/709188/105fdd51-59d0-e464-2de6-b6cb222ee757.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/709188/064a6d1f-b35c-ea6d-fc62-7e5984ab7848.png)

### Githubを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/709188/8e719239-e539-8ad4-1c9a-5630d87e0401.png)

### Github アカウント認証
- Github 認証
- リポジトリ選択
- ブランチ選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/709188/44e04538-1a4e-bb37-1c46-9472f989c40a.png)

### Amplify.ymlの書き換え（個々の設定に若干、はまってしまった）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/709188/0440d78f-aebd-4cc3-4954-d0026f51b8a9.png)


```Amplify.yml
version: 1
frontend:
  phases:
  # IMPORTANT - Please verify your build commands
    preBuild:
      commands:
        # ルートにReact プロジェクトはないため移動
        - cd frontend
        # デプロイ先にモジュールなどないため、package.json記載の依存モジュールをインストール
        - yarn install
    build:
      commands: 
        - 'npm run build'
  artifacts:
    # IMPORTANT - Please verify your build output directory
    # 'npm run build'の結果が frontend/build に出力されるため、そこの内容を公開する
    baseDirectory: ./frontend/build
    files:
      - '**/*'
  cache:
    paths: []
```

### デプロイ
- 保存してデプロイ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/709188/b05b2fbd-ac3b-c6c5-90e5-793706b7982e.png)

- 進行中
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/709188/14e344c8-0c60-6458-9e18-b64edfdc4e98.png)

- 成功した様子
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/709188/9daf4905-102e-fb0e-0344-9959e1966f36.png)


- 記載されているurlにアクセスしてみよう
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/709188/f989894d-8fa1-4a9f-de8f-f867c27aa106.png)

## まとめ
Techpit にある教材に沿ってサンプルアプリの作成とAmplifyでのデプロイを行いました。ローカルでの開発環境の構築をDockerにする。フォルダの構成を変えてみる。みたいなことは教材と違うことをしましたが、少し変えるだけで結構はまってしまうことがありました。ただ使いこなせればAmplify結構便利なサービスだなと感じる。