Linux（CentOS7）で React の開発環境を構築

2019 年 1 月 17 日yamadaCentOS,linux,React

こんにちは。開発グループの yamada です。

最近 React でフロントエンドの開発を行う機会があり、Linux で開発環境を構築しましたので、それについてまとめてみました。

書籍やネット記事等では、作業用PC（Mac/Windows）に開発環境を構築して、ブラウザからlocalhostにアクセスして動作確認するという内容が多いですが、今回は作業用PCとは別のLinuxマシン（CentOS7）に開発環境を構築して、作業用PCからブラウザアクセスして動作確認できるようにしています。

※Facebook公式のcreate-react-appを使えば簡単に構築できますが、不要なものも多くインストールされてしまってカスタマイズしたい時に面倒なので、今回は最低限なパッケージのみインストールして構築したいと思います。

説明の流れは下記となります。

node.js と npm のインストール
プロジェクトの作成
React 等を npm でインストール
動作確認

node.js と npm のインストール

node.js と npm のインストール方法はいろいろありますが、下記を参考にしました。
https://github.com/nodesource/distributions/blob/master/README.md#enterprise-linux-based-distributions

今回はバージョン 8 系をインストールします。
node.js と共に npm もインストールされます。

# curl -sL https://rpm.nodesource.com/setup_8.x | bash - # yum -y install nodejs

node.js と npm のバージョンを表示してインストールできているか確認します。

# node -v # npm -v

プロジェクトの作成

次にプロジェクトを作成します。

まずプロジェクトのディレクトリを作成します。今回は sample_app というプロジェクトを作りたいと思いますので、ディレクトリ名も sample_app とします。

$ mkdir sample_app

sample_app ディレクトリに移動して、プロジェクトを初期化します。
(これ以降の操作はすべて sample_app ディレクトリ直下を基準に行います)

$ cd sample_app $ npm init -y

初期化すると package.json が生成されます。
この package.json の中の “scripts" の部分を下記に変更します。

"scripts": {
  "start": "webpack-dev-server",
  "build": "webpack -p"
},

“start" 行は webpack-dev-server を起動する設定です。
“build" 行は公開用ファイルを生成する設定です。

次に React のソースを格納する src ディレクトリと、公開用ファイルを格納する public ディレクトリも作成しておきます。

$ mkdir src $ mkdir public

React 等を npm でインストール

react 本体、webpack、babel などをインストールします。
（実際に開発を進めていくには react-redux、react-router、eslint、css-loader、style-loader など、他にもインストールするものはあるかと思いますが、今回は必要最小限ということで省きます）

$ npm install react react-dom $ npm install webpack webpack-dev-server webpack-cli --save-dev $ npm install babel-cli babel-loader@7 babel-preset-env babel-preset-react --save-dev

開発用で使うものは --save-dev オプションを指定してインストールします。
逆にアプリケーション自体の実行に必要なもの (react、react-dom) は --save-dev を付けません。

インストールが完了したら、babel と webpack の設定ファイルを作成します。（最低限必要そうな設定のみ入れています）

.babelrc

{
  "presets": ["env", "react"]
}

webpack.config.js

module.exports = {
  entry: { app: "./src/index.js" },
  output: {
    path: __dirname + '/public/js',
    filename: "[name].js"
  },
  devServer: {
    contentBase: __dirname + '/public',
    port: 8080,
    publicPath: '/js/',
    disableHostCheck: true,
    host: '0.0.0.0'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      }
    ]
  },
  mode: 'none'
};

webpack-dev-serverのポートは8080にしていますが、ご利用の環境に合わせて、利用可能なポートに適宜読み替えてください。

webpack.config.jsのdevServer内の下記の部分が、localhost以外からアクセスできるようにするための設定です。

  devServer: {
    ...
    disableHostCheck: true,
    host: '0.0.0.0'
  },

これで開発環境の構築が完了しました。

動作確認

最後に環境構築が正しくできたか確認します。
まず Hello World を表示するだけの簡単なコードを用意します。

public/index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Sample App</title>
</head>
<body>
  <div id="root"></div>
  <script type="text/javascript" src="js/app.js" charset="utf-8"></script>
</body>
</html>

src/index.js

import React, {Component} from 'react';
import ReactDOM from 'react-dom';

class App extends Component {
  render() {
    return (<div>Hello World.</div>);
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

コードが用意できたら、下記コマンドで webpack-dev-server を起動します。

$ npm start

この状態で作業用PCからブラウザで下記 URL にアクセスすると、 Hello World が表示されることが確認できます。

http://<ホスト>:8080

また、webpack-dev-server 起動中にソースを変更すると、変更内容が都度ブラウザに反映されるので、変更内容をすぐに確認することもできます。