🛵

【React】チュートリアルをDockerで

2021/06/04に公開

Docker

React

tech

Hello Worldを恐れない、その心構えを大切にしています。
Node.jsもnpmもよくわかっていない私ですが、諸事情がありReactに入門します。
手持ちの環境の都合で、LinuxのDocker上でチュートリアルを動かしました。

起動してページを表示

FROM node:alpine3.13
WORKDIR /
RUN npx create-react-app app
EXPOSE 3000

このDockerFileでdocker buildしてコンテナ内のシェルに入ると、/appにそれっぽいファイル類が作成されていました。

reactのチュートリアルの「ローカル開発環境」の説明のとおり、/app/src/以下のファイルを全て削除し、index.cssとindex.jsを配置します。
これでnpm startを実行して、空の３目並べの画面が表示されました。
※リバースプロキシを使用していたのですが、サブディレクトリのみをReactに飛ばしているとうまくいかなかったので、サブドメインを設定してルートURLでアクセスできるようにしました。

Reactチュートリアル_1

確認できたので、Dockerファイルと起動コマンドをちょっと変えて/app/srcをローカルで触れるようにしておきます。

FROM node:alpine3.13
WORKDIR /
RUN npx create-react-app app
WORKDIR /app
EXPOSE 3000
CMD [ "npm", "start" ]

DIR_PATH=$(cd $(dirname $0); pwd)
sudo docker run -d --rm -p 8010:3000 \
    -v ${DIR_PATH}/app/src:/app/src \
    --name react test:react

参考URL：

チュートリアルを進める

あとはチュートリアルのとおりに進めていきます。

index.jsの内容を確認し、JSXをなんとなく把握し、プロパティを受け渡し。
Reactチュートリアル_2

コンストラクタで状態変数を持たせてクリック時に書き換えて表示。
Reactチュートリアル_3

Board側でゲーム状態を管理し、Squareは関数コンポーネントにして、手番を実装。
Reactチュートリアル_4

勝敗判定関数を用意して、勝敗を実装。
Reactチュートリアル_5

以降のタイムトラベルは、特に新しい話はなさそうだったので流し読みで終わらせました。

ビルド

今回の目的として、Webアプリケーションフレームワークは別に用意されているため、静的なファイルとしてビルドしたものを他のWebアプリケーションに組み込む形にするつもりです。
ドキュメントによると、npm run buildのコマンドによってbuildディレクトリ下にファイルが生成されるとのことです。

実際に実行してみると、/app/build/以下にファイルが生成されました。
私の理解としては、これは静的コンテンツなので、例えばAWS S3のような静的ホスティングで動作可能なのだと思います。

ビルドしたファイルのコンテナからの取り出しが面倒なので、Docker起動コマンドで/app/buildをマウントしておくようにしました。

DIR_PATH=$(cd $(dirname $0); pwd)
sudo docker run -d --rm -p 8010:3000 \
    -v ${DIR_PATH}/app/src:/app/src \
    -v ${DIR_PATH}/app/build:/app/build \
    --name react test:react

コンテナ実行中のReactをビルドするときには以下のコマンドでビルドできます。

sudo docker exec -i react npm run build

ぼちぼち使っていこう

とりあえず、Reactを使えるような気はしてきました。
ビルド前のアプリケーションがいったいどういう処理をしているのかとか、仕組みの部分はいろいろよくわからないままです。
SPAの作り方なども確認する必要があるので、ぼちぼちやっていきたいと思います。

起動してページを表示

チュートリアルを進める

ビルド

ぼちぼち使っていこう

Discussion