アルゴリズムとかオーダーとか

仕事で勉強したことなどをまとめてます

reactアプリのためにdocker-composeでnginx+webpackでサーバ立てたけどwebpack-dev-serverで十分だった

node.js React Docker

ChromeにMetaMaskを入れると直接web3.js呼べるようになるらしいので、ReactでSPAでも作ってためしてみようかなーと思ったところ、httpでのアクセスじゃないとMetaMaskさんが起動してくれなかった。ということでhttpでReactアプリにアクセスするべくサーバを立てた話です。

やりたいこと

  • http://でローカルのreactアプリを呼び出したい。
  • サーバサイドでの処理は何も必要なし。
  • なのでできるだけシンプルにサーバを立てたい



今回採用しなかったけど候補として考えてたもの

  • express: なんかnode.jsでサーバサイドアプリ作る時の主流らしい。今回はサーバサイドの処理は作らないのでヘビーかなーとおもって却下
  • harp: 静的なページ作るのに楽チンらしい。CofeeScriptとかsassとかプリコンパイルしてくれる？今回はその辺のコンパイルとかいらないので却下



docker-composeつかってnginx+webpackの環境を作る

本題その１。タイトルの通り、docker-composeつかってhttpでReactアプリにアクセスでき、ソースを修正するとすぐに反映される環境を作ってみました。
docker-composeは以前も少し触ったのですが、プロセスごとに分けたdocker imageを作って連携して云々っていうのはやったことがなくてやりたかったので今回ちょうどいいかなぁと思って挑戦してみました。

こちらを参考にして環境を構築
qiita.com

ただ、webpack.config.jsの内容が古い？のかそのままじゃ動かなかったのでwebpack.config.jsがわからない - Qiitaを参考にして以下のように書き換えました。

const path = require('path')
module.exports = {
  entry: path.resolve(__dirname, './src/app.js'), // エントリポイントのjsxファイル
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'bundle.js' // 出力するファイル
  },
  module: {
    loaders: [{
      loader: 'babel-loader', // babel-loaderを使って変換する
      exclude: /node_modules/, // node_modulesフォルダ配下は除外
      test: /\.js[x]?$/, // 拡張子がjs or jsxで
      query: {
        cacheDirectory: true,
        plugins: ["transform-react-jsx"] // babelのtransform-react-jsxプラグインを使ってjsxを変換
      }
    }]
  }
};

これで、docker-compose up -d　すれば http://localhost/ で希望通りreactアプリにアクセスできるようになりました！


webpack-dev-server使えばもっと楽だった

本題その２。どうやら単純にhttpサーバ立てたいだけならwebpack-dev-serverなるものを使えばいいとのことだったので早速乗り換えました。

まずはwebpack-dev-serverをインストール

npm install webpack-dev-server

ディレクトリの構造はそのままで、webpack.config.jsをカレントディレクトリにコピーして以下のように書き換えました。
変更点はsrcとdistへのパスとdevServerの設定追加です。

module.exports = {
  entry: path.resolve(__dirname, './app/src/app.js'), // エントリポイントのjsxファイル
  output: {
    path: path.resolve(__dirname, './app/dist'),
    filename: 'bundle.js' // 出力するファイル
  },
  module: {
    loaders: [{
      loader: 'babel-loader', // babel-loaderを使って変換する
      exclude: /node_modules/, // node_modulesフォルダ配下は除外
      test: /\.js[x]?$/, // 拡張子がjs or jsxで
      query: {
        cacheDirectory: true,
        plugins: ["transform-react-jsx"] // babelのtransform-react-jsxプラグインを使ってjsxを変換
      }
    }]
  },
  devServer: {
    contentBase: path.resolve(__dirname, './app/dist'),
    port: 3000,
  },
};

これで

node_modules/.bin/webpack-dev-server --inline

でサーバを起動して、http://localhost:3000/にアクセスすればReactアプリが起動しました！

参考