Linux（CentOS7）で React の開発環境を構築
こんにちは。開発グループの yamada です。
最近 React でフロントエンドの開発を行う機会があり、Linux で開発環境を構築しましたので、それについてまとめてみました。
書籍やネット記事等では、作業用PC（Mac/Windows）に開発環境を構築して、ブラウザからlocalhostにアクセスして動作確認するという内容が多いですが、今回は作業用PCとは別のLinuxマシン（CentOS7）に開発環境を構築して、作業用PCからブラウザアクセスして動作確認できるようにしています。
※Facebook公式のcreate-react-appを使えば簡単に構築できますが、不要なものも多くインストールされてしまってカスタマイズしたい時に面倒なので、今回は最低限なパッケージのみインストールして構築したいと思います。
説明の流れは下記となります。
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 起動中にソースを変更すると、変更内容が都度ブラウザに反映されるので、変更内容をすぐに確認することもできます。
Web公開する場合
Web公開する場合は、まず下記のコマンドでビルドします。
$ npm run build
ビルドすると public ディレクトリ内にjsディレクトリが作られ、その中に公開用の js ファイルが生成されますので、public ディレクトリの中身を Web サーバのドキュメントルート配下に設置すればOKです。
さいごに
今回はざっくりとした構築の流れのみ説明しました。まだまだ勉強不足なところもありますが、機会があればもっと踏み込んだ内容も書いていければと思います。