Node.js+Express+React+MaterialUIの開発環境構築

開発環境を構築する環境

Mac環境で構築します。
ドキュメントサイト作成ということでdocというプロジェクトにします。

以下のサイトからMacのpkgファイルをダウンロードし、そのまま手順に沿ってインストールしていきます。
https://nodejs.org/en/download/

インストールが完了したらnode,npmコマンドが使えるようになります。

ツールの導入

デフォルトの環境を自動で作成してくれるツールを利用します。
手作業でファイルを作成することもできますが、手作業でどのようなファイルを作成するかを理解するためにツールを使うことにしました。
作成するアプリケーションによっては使わないファイル、ディレクトリが出てくるので色々試してみると勉強になります。

内部サーバの作成

以下のディレクトリ構成で作成していきます。

docディレクトリを作成します。
毎回sudoが聞かれるのが面倒なので、一般ユーザに権限を与えます。
もしくは一般ユーザが使える作業ディレクトリで読み変えて構いません。

プロジェクト内部に2つのサーバを作成します。

Express Node.jsで動作する軽量フレームワーク
create-react-app Node.js上でReactを使った環境を作成するツール

create-react-appはfacebook社が公開しています。
https://github.com/facebook/create-react-app

create-react-app
処理に時間がかかって失敗することがあります。
私の場合はメモリ不足で発生しました。メモリを追加して改善しました。

以下の構成で構築されます。

各サーバの起動

apiサーバ(Express)

必要なモジュールをインストールしてExpressのapiサーバを起動させます。

動作確認

アクセスして以下の画面が表示されれば正常に動作しています。
http://localhost:3000

webサーバ(create-react-api)

次はReactで表示させるwebサーバを起動させます。
すでに3000ポートが使われているため、3001ポートで起動します。

動作確認

3001ポートでアクセスして以下の画面が表示できれば正常に稼働しています。
http://localhost:3001

webサーバとapiサーバの連携

ビルド

ここからはwebサーバ(3001ポート)で表示した内容を静的サイトとして配置します。
が、今回はビルドまでして配置は本番公開環境構築時に紹介します。

create-react-appには作成したjsからhtml,jsなど最適化したファイルにビルドしてくれるコマンドがあります。

buildディクトリが作成され、以下のファイルが自動生成されます。
これらはsrcにあるファイルによって変わります。

MaterialUIを適用

web環境にインストール

web環境にmaterial-uiを導入します。

変更ファイルの確認

MaterialUIを適用する前に変更するファイルを押さえておきます。

../public/index.html head,bodyタグなどが記述されている箇所。
App.js コンポーネントを記述します。タグの配置などを制御する。メインで編集するファイル
index.js index.htmlとApp.jsの中間的な存在
App.css App.jsのクラスに対するデザインを設定します。
index.css bodyなど共通タグのデザインを設定します。
registerServiceWorker.js web環境サーバを起動させる時に必要なファイル

MaterialUIの反映

公式サイトを参考に現在のページにHello Wordlボタンを追加します。
https://material-ui-next.com/getting-started/usage/
新規にHelloWorld用のコンポーネントファイルを作成します。

index.jsからApp.jsではなくHelloWorld.jsを読み込むようにします。
これでHelloWorldボタンが表示されれば正常に動作しています。

動作確認

http://localhost:3001

プロキシ設定

最後にapiを相対パスで利用するために”proxy” : “http://localhost:3000″を追記します。
今回の範囲では必要ありませんが、APIを利用する時に設定必要です。
「,」を忘れないようにしましょう。

これから開発するには

ここまでで開発を進める準備は完了しました。
これから作り込むには以下のようなことが挙げられます。

  • apiサーバでRestAPIの作成
  • webサーバでRestAPIを飛ばし情報を取得、表示させる関数を作成
  • MaterialUIとApp.css,index.cssのデザイン

正直軽い気持ちでReactに手を出しましたが、様々なツールが大量にあって情報が錯綜しました。
今回以外のパターンとしてExpress内にcreate-react-appを導入する方法があったり、webpack,babelのようなビルドツール(create-react-api内で使われている)が色々組み合わされて紹介されていたので、なかなかスタンダードな情報というのが理解しづらかったです。

今回は詳しい人向けよりは、とりあえずReact環境導入してデザインしたい人向けに私が構築したことをまとめてみました。
最近のフロントエンドはやることが多いですね。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です