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で新規リポジトリを作成
  gitignoreのテンプレートはnode用を選択する
• 作成したリポジトリをgit cloneでローカルへ

package.jsonの作成

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

$ npm init -y

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

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

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

package.json(抜粋)

  "build": "npm-run-all clean tsc",
  "clean": "rimraf dist/*",
  "tsc": "tsc",
  "start": "node .",
  "heroku-postbuild": "yarn build"

TypeScript

• ライブラリの追加

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

• tsconfig.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の事前インストールは必要ない。

$ npx create-react-app frontend

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

$ cd frontend
$ yarn start

• tsconfig.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を使用してインストールできる。

$ brew install heroku/brew/heroku

ログイン

$ heroku login

プロジェクトの作成

名前にアンダースコアは使用できないため、注意。(エラーになる)

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

DB設定

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

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

データの同期

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

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

デプロイの実行

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

$ git push heroku master

デプロイ対象外とするファイルがある場合

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

調査などで使用するコマンド

• ログの確認
  アプリケーションエラーの詳細を見るときなど。

$ heroku logs --tail

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

$ 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