Push: Ctrl+Y

 技術で遊んで ときどき進む

React+Redux入門

React + Redux入門② - 開発環境を整える

2016/07/26

Node.js(Express) + React + Reduxの開発環境を整えていきます。
ローカルに作るといろいろ面倒ごとが発生するので、VirtualBox+Vagrantの構成で楽に環境をつくりましょう。

目標おさらい

 

前回はReact + ReduxについてGitHubのコードが読めるようになるのを目標に解説しました。

当シリーズの最終的な目標は、

  • [サーバーサイド] Node.js (Express, MongoDB)
  • [フロントエンド] React.js + Redux + Material-UI

という構成で、「検索(DBから取得)画面を作成」することです。
第2回目のテーマは、環境設定です。

参考図書:

 

VirtualBox + Vagrantで仮想開発環境を作成

開発ツールインストール

VirtualBox・Vagrant

以下をインストールしてください。

コマンドラインツール

仮想開発環境は普通のサーバーと同じなので、基本的に黒い画面で操作することになります。
Macユーザーはターミナルで簡単操作できるのですが、WindowsユーザーはGitBashがオススメです。
それとなくインストール・設定してください。

 

CentOS6.7の環境を作成する

コマンドラインツールを開いて、以下のコマンドでBoxというOSのディスクイメージ的なものをダウンロードします。
(ダウンロードには時間がかかるので、ネットワークが安定した場所での実行をおススメします)

完了したら、以下のコマンドでダウンロードできたか確認してみてください。

centos6-7が表示されていたら成功です。

作業スペース(適当なディレクトリでOK)に移動してください。
そこで以下のコマンドを実行します。

vagrant-hostupdaterはなくても実行できますが、hostsファイルの書き換えが楽になるプラグインなのでぜひ入れてみてください。
作業スペースにVagrantfileというファイルができているので、テキストエディタで開いて以下のように編集してください。

config.vm.hostnameは、ブラウザでアクセスするURLになるので適当な名前でOKです。
config.vm.synced_folderの第1引数はローカルの作業ディレクトリになるので、存在する適当なディレクトリを指定してください。
存在しないディレクトリを指定するとエラーになるので注意が必要です。
おススメはVagrantfileのあるディレクトリ直下にworkspaceフォルダを作ってそこを指定する形で、そのほうが環境削除するときに楽です。

最後に環境を立ち上げましょう。

これが成功すれば、CentOSの仮想開発環境が手に入った状態です!

 

サーバー関連インストール

Node.jsの設定・プロキシ(nginx)・DB(MongoDB)を設定していきます。

nodebrew

nodebrewは、Node.jsのバージョン管理をしてくれるツールです。
便利なので、まずこちらからインストールしていきます。
先ほど作った仮想開発環境にSSH接続しましょう。

 

接続できたら、以下のコマンドでnodebrewをダウンロード・環境変数を設定してください。

以下のコマンドが実行できたらnodebrewのインストールは完了です。

 

Node.js

nodebrewを利用すれば、node.jsの好きなバージョンを好きなだけインストール可能です。
今回はそんなにいらないので、以下のコマンドでv5.12.0をインストール・利用指定してみます。

他のバージョンを知りたい場合は nodebrew ls-remote というコマンドで、存在するバージョンを参照することができます。

いちおう、指定したバージョンのnode.jsが使用できる状態になっているか確認してください。

 

nginx

リバースプロキシ用にnginxを入れて、自動起動させるようにしておきます。
※使わない場合はこの手順は飛ばしてください。

先ほどVagrantfileで設定した react-redux.local にアクセスしたときにページが表示されるようにしたいので、続けて設定をしていきます。
まず、vimでファイルを開きましょう。

ファイルを以下のように修正します。

 

※vimに慣れていない人のためのメモ

  • コマンドモード
    • 「i」・・インサートモードに変更
    • 「shift + g」・・最終行へジャンプ
    • 「:wq」・・保存して終了
    • 「:q!」・・保存せずに終了
  • インサートモード
    • 「esc」・・コマンドモードに戻る
    • ペーストは普通のコマンドでいけます

confを変更したので、再起動します。

 

Mongo DB

同じく、インストールして設定していきます。
MongoDBを選定したのは、当構成でよく使われているため&使ったことがないのでおもしろそうだったからです。
使うことでメリット・デメリットも考察できたらなと思います。

vimでファイルを開いて編集します。

記載内容は以下です。

インストールし、起動設定もいれます。

ここまでで、必要なものはインストールできました!

参考サイト(いつも大変お世話になってます):
 Vagrant+node.js+express4+MongoDBで簡単なWebアプリを構築

 

 

まとめ

これまでJavaやPHPの環境をがしがし作っていたのですが、Node.jsすごい簡単にできるなあという印象でした。

次回からやっと本題の開発に移りたいと思います。

 

-React+Redux入門
-, , , , , ,

おすすめの記事

1
React + Redux入門① - Reduxの概念を理解

React+Reduxでサイトを作っているので、復習がてら「検索画面を作成する」 ...

2
React + Redux + D3.js アニメーション:ドラッグ&ドロップでキングスライムを作った

はい、今回は要素のドラッグ&ドロップを中心に作ってみました。 Mater ...