gosho-techplayのblog

自作サイトを制作した際の実装方法などを備忘録としてまとめています。

reactとexpressでwebサイト作成(構築手順まとめ)

編集中のため体裁は適当です。

前提 nodejsはインストール済 バージョンは特にしていない(古すぎなければOK)

ディレクトリ構成
app
  -frontend
  -backend

バックエンド側構築手順
バックエンド側のディレクトリに移動する
npm init -y
「backend」の中に「package.json」が作られます。

次にTypeScriptを使う準備をします。
2つのパッケージをインストールします。
npm install -D typescript @types/node

次に、以下のコマンドを実行します。
npx tsc --init

すると、「backend」の中に「tsconfig.json」が作られます。
「tsconfig.json」はTypeScriptに関する設定を書くところです。
デフォルトのままほとんど変えていません。
変えたのは「"target": "esnext"」の部分だけです。
今回は必要最低限の箇所のみ変更する
{ "compilerOptions": { "target": "esnext", "module": "commonjs", "esModuleInterop": true, "forceConsistentCasingInFileNames": true, "strict": true, "skipLibCheck": true } }

npm install express
今回はTypeScriptを使うため、以下も実行します。
npm install -D @types/express
そして、「backend」の中に「server.ts」というファイルを作ります。
package.json内の「"main": "server.ts"」という記述に変更しておく。(検索対応だった?)

「ts-node」は、TypeScriptでNode.jsを動かすための実行エンジンです。
というわけで、ts-nodeをインストールしましょう。
npm install ts-node
package.json内の「"type": "module"」と書いていた部分を「"type": "commonjs"」に書き換えてください。

デーモン化しておく(いちいちサーバーを終了させて、また起動して...ってのが面倒)
「nodemon」を使えば、先ほどの「サーバーを終了させて、また起動して...」の作業が不要です。
さっそくインストールします。
npm install nodemon

サーバーを起動するときに、いちいち「npx nodemon server.ts」って入力するの面倒ですよね。
そこで、「package.json」に記述を加えます。
"scripts": { "start": "nodemon server.ts", },

フロントエンド側構築手順
フロントエンド側のディレクトリに移動する
移動したら、以下のコマンドを実行します。
npx create-react-app . --template typescript

では、Reactの開発サーバーを起動してみましょう。
フロントエンド用のターミナルで以下のコマンドを実行します。
npm start

Expressサーバーにアクセスする
では、Expressで作ったバックエンドのデータをReactで表示していきます。
Reactで外部からデータを取得するので、「fetch関数」を使っています。
さらに、データ取得のときは「useState」と「useEffect」を使います。
この時点でexpressサーバにAPI通信をした場合、すると、下記のようなエラー表示が出ているかと思います。
意味
「CORSポリシーにより、"http://localhost:8000/api"にアクセスことはできません」
フロント側のオリジンは"http://localhost:3000”、オリジン側のドメインは"http://localhost:8000”でありクロスオリジンであることからこのままではフロント側から"http://localhost:8000”にアクセスすることができません。

proxyを設定する
そこで、React側の「package.json」に記述を加えましょう。
"proxy": "http://localhost:8000",
これでフロント側から"http://localhost:8000”にアクセスすることができるようになります。