はじめに
自己学習の一環として、フロントエンド: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
↧