ReactJS の環境構築（１）

ReactJS の勉強しようと思いたち、kvm で仮想化した CentOS に ReactJS の環境構築しました。その時のメモです。

環境

CentOS 7

設定の流れ

nodebrew のインストール
NodeJS のインストール
Nginx の設定
ReactJS アプリの作成

（本記事には、1.〜3.を記載しています。4.は次記事に記載します。）

nodebrew のインストール

nodebrew は NodeJS のバージョン管理を行うツールです。

<参考文献>

nodebrew

curl コマンドでダウンロードしてインストールします。

$ curl -L git.io/nodebrew | perl - setup

nodebrew にパスを通すために、bash_profile を編集する。

$ vim ~/.bash_profile

ファイル最下行に下記を追加する。

export PATH=$HOME/.nodebrew/current/bin:$PATH

設定を反映し、インストールの確認をする。

$ source ~/.bash_profile
$ nodebrew -v
nodebrew 0.9.6
...

NodeJS のインストール

nodebrew で最新安定版の NodeJS をインストールします。

$ nodebrew install-binary stable
$ nodebrew list
v7.4.0
$ nodebrew use v7.4.0
$ node -v
v7.4.0
$ npm -v
4.0.5

Nginx の設定

web サーバには、Nginx を使用します。

<参考文献>

Nginx をインストールします。

$ sudo yum install -y http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.noarch.rpm
$ sudo yum -y install --enablerepo=nginx nginx

設定ファイルを編集します。

$ sudo vim /etc/nginx/conf.d/default.conf

ブラウザからアクセスしたら、起動しているReact アプリ表示するように編集する。

# 追加 ---------------------------------
upstream myApp {
    ip_hash;
    server 127.0.0.1:8080;
}
# --------------------------------------

server {
    listen       80;
    server_name  localhost;

    # 追加 ------------------------------------------------------------
    proxy_redirect                          off;
    proxy_set_header Host                   $host;
    proxy_set_header X-Real-IP              $remote_addr;
    proxy_set_header X-Forwarded-Host       $host;
    proxy_set_header X-Forwarded-Server     $host;
    proxy_set_header X-Forwarded-For        $proxy_add_x_forwarded_for;
    # -----------------------------------------------------------------

    # location の設定を編集
    location / {
        proxy_pass http://myApp/;
    }

...

web サーバにアクセスできるように SELinux を無効にしておきます。

$ setenforce 0

次回起動時からも SELinux が無効になるように設定を編集します。

$ sudo vim /etc/selinux/config

以下のようにファイルを編集する。

...
# SELINUX=enforcing   # コメントアウト
SELINUX=Permissive    # 追加
...

次記事に続きます。