ReactWebアプリ環境構築の覚え書き

# はじめに
自己学習の一環として、フロントエンド:React、バックエンド:Node.jsのWebアプリを作成してみた時の覚え書きです。
ここでは、アプリケーションの実装の仕方については触れていませんので、あらかじめご了承ください。

# 環境情報
* 使用言語: TypeScript
* バックエンドサーバー: Heroku + DB(PostgreSQL)
* フロントエンドサーバー: Netlify

# 前提条件
* 以下のツールがインストール済みであること
  * git (v2.26.1)
  * node.js (v12.8.3)
  * yarn (v1.22.4)
* 以下のサービスのアカウントが作成済みであること
  * GitHub
  * heroku
  * Netlify


# 環境構築
## リポジトリの作成
* GitHubのWebで新規リポジトリを作成
<br>
gitignoreのテンプレートはnode用を選択する
* 作成したリポジトリを`git clone`でローカルへ

## package.jsonの作成
* cloneしたリポジトリのディレクトリに移動する
* 以下のコマンドでファイルを作成

```shell
$ npm init -y
```

* ビルドに必要なライブラリを追加

```shell
$ yarn add npm-run-all rimraf --dev
```

* ビルドや起動のコマンドをscriptsに追加
<br>
(一番下の`heroku-postbuild`は、herokuへのデプロイで実行される)

```:package.json(抜粋)
  "build": "npm-run-all clean tsc",
  "clean": "rimraf dist/*",
  "tsc": "tsc",
  "start": "node .",
  "heroku-postbuild": "yarn build"
```

## TypeScript
* ライブラリの追加

```shell
$ yarn add typescript ts-node @types/node --dev
```

* tsconfig.json(バックエンド用)の作成

```json:tsconfig.json
{
  "compilerOptions": {
    "sourceMap": true,
    "target": "es2019",
    "module": "commonjs",
    "outDir": "./dist",
    "moduleResolution": "node",
    "lib": [
      "es2019",
      "dom"
    ]
  },
  "include": ["backend/**/*"],
  "exclude": ["node_modules"],
}
```

## フロントエンド
* Reactのセットアップ  
nodeが入っていれば、create-react-appの事前インストールは必要ない。

```shell
$ npx create-react-app frontend
```

* 動作確認  
Reactのサンプルページが表示されるか確認する

```shell
$ cd frontend
$ yarn start
```

* tsconfig.json(フロントエンド用)の作成

```json:tsconfig.json
{
  "compilerOptions": {
    "sourceMap": true,
    "target": "es2019",
    "moduleResolution": "node",
    "module": "esnext",
    "jsx": "react-jsx",
    "allowJs": true,
    "esModuleInterop": true,
    "strict": true,
    "baseUrl": ".",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "skipLibCheck": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "noImplicitAny": false
  },
  "include": [
    "src/**/*"
  ]
}
```

# デプロイ
## Herokuへのデプロイ
バックエンドアプリをHerokuへデプロイする。操作はターミナルにて行う。

### CLIのインストール
Homebrewを使用してインストールできる。

```shell
$ brew install heroku/brew/heroku
```

### ログイン

```shell
$ heroku login
```

### プロジェクトの作成
**名前にアンダースコアは使用できない**ため、注意。(エラーになる)

```shell
$ heroku create <プロジェクト名>
```

### DB設定
以下のコマンドで、Heroku環境にてPostgreSQLが使用可能になる。

```shell
$ heroku addons:create heroku-postgresql:hobby-dev
```

#### データの同期
ローカルに構築したPostgreSQL上のテーブル・レコードを、以下のコマンドでHerokuにコピーすることができる。
Postgresのアプリインストールなどで、`psql`コマンドが利用可能な状態になっていないと、同期に失敗するので注意。

```shell
$ heroku pg:push postgres://postgres:postgres@localhost:5432/<ローカルDB名> DATABASE_URL
```

### デプロイの実行
`git push`で同期とビルドが実行される。
デプロイしたアプリケーションは、`https://<プロジェクト名>.herokuapp.com/` でアクセスすることが可能。

```shell
$ git push heroku master
```

#### デプロイ対象外とするファイルがある場合
プロジェクトのルートに`.slugignore`というファイルを作成すると、そのファイルに記載されたパスはHerokuのデプロイ対象から除外される。
バックエンドとフロントエンドを同じリポジトリで扱っている場合に有効。

### 調査などで使用するコマンド
* ログの確認  
アプリケーションエラーの詳細を見るときなど。

```shell
$ heroku logs --tail
```

* リモートサーバーへの接続  
bashでファイルの情報などを確認できるが、ネットワーク経由のためか、かなりレスポンスは遅め。

```shell
$ heroku run bash -a <プロジェクト名>
```

## Netlifyへのデプロイ

### アカウントの登録
GitHubアカウントで登録が可能。GitHubにログインしていれば、すぐに利用可能な状態となる。

### デプロイの設定と実行
* Gitプロバイダーの選択
* 公開対象のリポジトリを選択
* デプロイ設定
  * ビルドコマンド  
    npmスクリプトで定義したコマンドなどを記載   

    ```
    cd frontend && yarn build
    ```
  * 公開対象ディレクトリ(Publish Direcroty)  
    index.htmlが配置されるディレクトリを記載  

    ```
    frontend/build
    ```
* `Deploy site`ボタンをクリック
* デプロイが成功すれば、Overviewなどからサイトを見ることが可能になる
* 2回目以降は、指定したリポジトリの更新にあわせてデプロイが行われる

# 所感
メインで学習したかったフロントエンド側ではなく、
バックエンド側(herokuでのプロジェクト作成や、DBデータ同期)で少しつまづいたものの、
環境構築自体は概ねスムーズに行うことが出来ました。
ただ、TypeScript周りの設定は全然最適化が出来ていないので、そのあたりはもう少し理解を深める必要があると思いました。

# 参考にしたページ
構築構築
https://reffect.co.jp/react/front-react-back-node

アプリ開発のチュートリアル
https://zenn.dev/likr/articles/react-with-heroku