
タイトル長くてすみません。

ひと昔前までは、[react-create-app](https://github.com/facebook/create-react-app)で作成したプロジェクトの webpack.config を上書きするには、`eject`するしか方法がなかったのですが、現在は [react-app-rewired](https://github.com/timarney/react-app-rewired)を使うことで上書きが可能です。

> この方法を使った場合、react-create-app が提供するツールの動作保証対象外となります。つまり、これ以降発生した問題は自己責任で解決しなければなりません。ご注意ください。

紹介する内容は、こちらの Github で見ることができます。

- <https://github.com/mitsuruog/create-react-app-typescript-rewired-styleguidist>

## react-app-rewired を導入する

基本的にはリポジトリにある README.md の通りに導入します。より具体的な例については後で少し紹介します。

### react-app-rewired をインストールする

まず npm モジュールをインストールします。

```sh
npm install react-app-rewired --save-dev
```

### プロジェクトのルートディレクトリに`config-overrides.js`を作成する

プロジェクトのルートディレクトリに`config-overrides.js`を作成します。とりあえず、ファイルの中身は公式ドキュメントのままにしておきますが、詳しくは後で紹介します。

```js
module.exports = function override(config, env) {
  //do stuff with the webpack config...
  return config;
};
```

### `package.json`の`sctipts`を変更する

`package.json`を変更します。

基本的には`react-scripts`の部分を`react-app-rewired`に変更すればいいのですが、TypeScript プロジェクトの場合は`--scripts-version`に起動スクリプトの名前が必要です。これは、react-app-rewired の内部で TypeScript 用の起動スクリプトにスイッチするために利用しています。

```diff
"scripts": {
-  "start": "react-scripts start",
+  "start": "react-app-rewired start --scripts-version react-scripts-ts",
-  "build": "react-scripts build",
+  "build": "react-app-rewired build --scripts-version react-scripts-ts",
-  "test": "react-scripts test --env=jsdom",
+  "test": "react-app-rewired test --env=jsdom --scripts-version react-scripts-ts",
},
```

### 動作確認する

最後にプロジェクトの開発用サーバーの起動とビルドの確認をします。

```sh
# 開発用サーバーの起動
npm start

# ビルド
npm build
```

正しく動いているようであれば、ひとまず導入は完了です。

## `config-overrides.js` をカスタマイズする

上の内容では元の Webconfig のままなのでカスタマイズする必要がありますが、その内容は**中〜上級者向け**です。カスタマイズのプロセスは次の通りです。

1. ここから[config-overrides.js のテンプレート](https://github.com/timarney/react-app-rewired#extended-configuration-options)を取得する
2. 設定変更用の関数(慣例で`rewire(再結線する)`と呼ぶことが多い)を作成する
3. rewire 関数を config-overrides.js に追加する

`config-overrides.js`のテンプレートは大まかに次のようなファイルになっています。
いくつかカスタマイズできるポイントがあるのですが、webpack.config のカスタマイズだけであれば、`webpack`の部分だけ注視していればいいと思います。

```js
module.exports = {
  // 開発サーバーのカスタマイズポイント
  devServer: function (configFunction) {
    return function (proxy, allowedHost) {
      // デフォルト設定の開発サーバーを作成する
      const config = configFunction(proxy, allowedHost);

      // この辺でカスタマイズする

      return config;
    };
  },
  // `npm test`のカスタマイズポイント
  jest: function (config) {
    // この辺でカスタマイズする

    return config;
  },
  // webpack.configのカスタマイズポイント
  webpack: function (config, env) {
    // この辺でカスタマイズする

    return config;
  },
};
```

### (実践例)Sass 設定のカスタマイズ

では、既存の webpack.config の Sass 設定をカスタマイズして`sass-loader`を追加してみましょう。

> `react-create-app`の公式では別の方法が推奨されていますが、自分はこの昔ながらのやり方が好きなのです。

まず、Sass 設定を上書きする`rewireSass`関数を作成します。

```js
// config-overrides.js
const rewired = require("react-app-rewired");

function rewireSass(config) {
  const cssLoader = rewired.getLoader(
    config.module.rules,
    // ここでloaderをフィルタする
    (rule) => rule.test && String(rule.test) === String(/\.css$/)
  );

  // 新しいsass-loaderの設定
  const sassLoader = {
    test: /\.scss$/,
    use: [...(cssLoader.loader || cssLoader.use), "sass-loader"],
  };

  // sass-loaderを追加する
  const oneOf = config.module.rules.find((rule) => rule.oneOf).oneOf;
  oneOf.unshift(sassLoader);

  return config;
}
```

`react-app-rewired`のパッケージに`getLoader`という loader を pick up する関数があるので、これを使って既存の config から上書きするターゲットの loader だけを抽出します。

あとは、コードを見てもらうとわかると思うのですが、普通の JavaScript プログラミングです。
途中、`console.log`などを出しながら途中経過を見てカスタマイズしていきます。

> なので、将来 react-create-app 側の wepack.config が変わったり、Webpack 自体のバージョンが上がった場合は、容易に動作しなくなると思います。

この`rewireSass`関数を`config-overrides.js`に追加します。

```js
// config-overrides.js

function rewireSass(config) {
  ...
}

module.exports = {
  // 開発サーバーのカスタマイズポイント
  devServer: function (configFunction) {
    return function (proxy, allowedHost) {
      // デフォルト設定の開発サーバーを作成する
      const config = configFunction(proxy, allowedHost);

      // この辺でカスタマイズする

      return config;
    }
  },
  // `npm test`のカスタマイズポイント
  jest: function (config) {

    // この辺でカスタマイズする

    return config;
  },
  // webpack.configのカスタマイズポイント
  webpack: function (config, env) {

    // この辺でカスタマイズする
    config = rewireSass(config, env); // <--------- ここに追加

    return config;
  },
};
```

Sass ファイルが Webpack で変換されていれば、無事 OK です。

## まとめ

react-create-app の Webpack.config をカスタマイズする方法でした。

react-create-app 便利なのですが、いままで作ったプロダクトではカスタマイズしなかったことなかったなぁ。。。
ちなみにカスタマイズは「**自己責任**」です。

カスタマイズする人は、「なぜ最近の Web フロントエンドはこんなに難しくなったのか。。。」と血の涙を流しながらやるといいでしょう。


react-create-appで作成したTypeScriptのプロジェクトのwebpack.configを上書きする


「お父さんと 2 人だけで[マイクラ](https://minecraft.net/ja-jp/)やりたい！」

GW に娘がそんなこと言い出したので、お父さん、ちょっと頑張ってプライベートサーバーを立ててみたよ！

> 注意：
> この方法で立てたサーバーには、Minecraft pocket edition からはアクセスできません。Minecraft pocket edition で子供を一緒に遊びたい方は、こちらの記事を参考にしてください。
> [【親子でマイクラ PE】自宅 Wi\-Fi で同時プレイ！ 2 つの iPhone で同じ世界に入って遊ぶ方法 \| Minecraft（マインクラフト） \| できるネット](https://dekiru.net/article/15596/)

## 下調べ

少し調べていると、Mincraft は[サーバーがソフトウェアにて配布されていて](https://minecraft.net/en-us/download/server)これを実行するとプライベートサーバーになるようです。

これをダウンロードして、自分のローカル PC で動かすとプライベートサーバーが作れるのですが、仕事に行っている間も自宅の PC で Mincraft を動かしているのは抵抗があったので、クラウド上にホスティングすることにしました。

サーバー代あまりかけたくないし、常時動かす必要はないので、こういう場合は「[Heroku](https://jp.heroku.com/home)」一択ですね。

## 構築手順

基本的にはこの[heroku-buildpack-minecraft](https://github.com/jkutner/heroku-buildpack-minecraft)にある通りに設定すると大丈夫です。

### ngrok の token を取得する

[ngrok](https://ngrok.com/)という、ローカル PC にトンネルを作って Internet に接続できるようにするサービスがあるので、無料のアカウントを取得して token を取得します。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2018/minecraft02.png)

### git プロジェクトを作成して eula.txt を作成する

新しく git プロジェクトを作成して、中に`eula.txt`をおきます。

```sh
echo 'eula=true' > eula.txt
git init
git add eula.txt
git commit -m "Add eula.txt"
```

`eula.txt`の中身は次のなっています。

```sh
eula=true
```

### Heroku アプリケーションを作成する

[Heroku toolbelt](https://toolbelt.heroku.com/)をインストールして Heroku アプリケーションを作成します。
途中で buildpack と環境変数(ngrok の token)の指定をします。

```sh
heroku create
heroku buildpacks:add heroku/jvm
heroku buildpacks:add https://github.com/jkutner/heroku-buildpack-minecraft
heroku config:set NGROK_API_TOKEN="xxxxx"
git push heroku master
```

> 環境変数の指定は GUI の設定ページからも行えます。

### 接続用アドレスを取得して Mincraft から接続する

Heroku のアプリケーションが正常に作成できた後に、実際に Heroku のプライベートサーバーにアクセスして接続用のアドレスを取得します。

```sh
heroku open
```

プライベートサーバーにアクセスすると、次のようなアドレスが画面上に表示されます。

`Server available at: 0.tcp.ngrok.io:XXXXX`

これを Mincraft で接続先のサーバーに指定すると、プライベートサーバーにアクセスできるようになります。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2018/minecraft03.png)

## セーブデータを S3 に保存する

Mincraft のセーブデータは Heroku の中に保存されます。
しかし、Heroku のサーバーは 24 時間に 1 回再起動してしまうので、その度にセーブデータがなくなってしまいます。そこでセーブデータを S3 へ転送します。

AWS のコンソールで S3 バケットと IAM を作成して、アクセスキーとシークレットキーを取得します。
これを Heroku の環境変数に設定します。

```sh
heroku config:set AWS_BUCKET=your-bucket-name
heroku config:set AWS_ACCESS_KEY=xxx
heroku config:set AWS_SECRET_KEY=xxx
```

> AWS の IAM 設定はこのあたりの記事を参考にしてください。
> [特定の S3 バケットにだけアクセスできる IAM ユーザーを作る \| I am mitsuruog](https://blog.mitsuruog.info/2017/11/way-to-api-key-access-s3)

これで 60 秒に一回、セーブデータが転送されるようになりました。

## まとめ

Heroku でプライベートサーバーを立てる方法でした。Heroku と AWS を扱ったことがあるイケメンなら、そこまで難しくない手順だと思います。

> とはいえプライベートサーバーを立てたあとに、Minecraft に edition の違いがあることを知り、結局自分用の pocker edition を買って遊ぶことになったのですが。。。
> 娘がもう少し大きくなって PC 使えるようになったら、使いたいと思います w


June, 2018

react-create-appで作成したTypeScriptのプロジェクトのwebpack.configを上書きする

親子でマイクラー HerokuにMincraftのプライベートサーバーを立てる

June, 2018

react-create-appで作成したTypeScriptのプロジェクトのwebpack.configを上書きする

親子でマイクラ ー HerokuにMincraftのプライベートサーバーを立てる

親子でマイクラー HerokuにMincraftのプライベートサーバーを立てる