[React]~Admin画面: React環境構築~

こんにちは、KOUKIです。

Go言語でショッピング関連のAPIを作成しました。

今回からは、Reactでフロントエンドの実装に入ります。

Admin画面とAmbassador画面の2種類があって、今回はAdmin画面の環境構築を主に行います。

尚、「React, NextJS and Golang: A Rapid Guide – Advanced」コースを参考にしています。解釈は私が勝手に付けているので、本物をみたい場合は受講をお勧めします!

事前準備

ファイルの作成

Reactプロジェクトの作成

Reactプロジェクトを以下の手順で作成しましょう。

  1. Reactプロジェクトを作成
  2. React用のDockerfileを作成
  3. docker-compose.ymlにサービスとして追加
  4. ビルドして起動

Reactプロジェクトを作成

以下の記事にある通り、ローカル環境にReactをインストールしましょう。

インストールが完了したら、下記のコマンドを実行します。

コマンドが成功したら、カレンとディレクトリに「react-admin」ディレクトリが生成されているはずです。

React用のDockerfileを作成

docker-compose.ymlにサービスとして追加

ビルドして起動

コンテナをビルドして、起動します。

コンテナが立ち上がったら、ブラウザから「http://localhost:3000」へアクセスしてみましょう。

上記の画面が出てきたら成功です。

Reactを追加したらコンテナの起動がめっちゃ遅くなった件

一つ困ったことがあります。コンテナの起動がかなり遅くなったことです。

ログを確認すると、「node_modules」が「air」に監視されていることがわかりました。

air」は、ディレクトリやファイルの変更が発生した時に、ホットリロード(自動更新)をしてくれる便利なツールなのですが、ディレクトリ構成が悪いので、余計なファイルまで監視されています。

これにより、コンテナの起動が遅くなっているようです。

設定ファイルの追加

事前準備で、ルートディレクトリに「.air.toml」を設置しました。このファイルは、ホットリロード機能を提供する「air」の設定ファイルです。

デフォルトでは、「この設定ファイル」が読み込まれるみたいですが、自分で設定を変更することができます。

ほとんどオリジナルと一緒なのですが、下記の設定だけ変更しています。

「exclude_dir = [“assets”, “tmp”, “vendor”, “react-admin/node_modules”]」

GoのDockerfileの修正

Dockerfileを以下のように修正してください。

airの設定ファイルをコピーする処理を追加しただけですが、これだけで設定が反映されるようになります。

backendサービスのビルド

コンテナの変更を反映するために、ビルドします。

これで、コンテナが迅速に立ち上がるようになったはずです。本当は、ディレクトリ構成やDockerfileのCOPYの変更などで対応できますが、設定ファイルの使い方を学んでおきたかったので、今回はこれで対処しました^^

次回

次回は、ダッシュボードを作成しましょう。

Reactまとめ

参考書籍


ソースコード

ここまで実装したソースコードを下記に記載します。

Dockerfile-react-admin

docker-compose.yml

Dockerfile

.air.toml

コメントを残す