目標
- Dockerとdocker-composeを用いてcreate-react-appし、Reactアプリケーションの開発を始められる
- かつ、TypeScriptでReactを動かす
前提
- Dockerが使用可能である
- docker-composeが使用可能である
手順
1. 作業ディレクトリの作成
作業するディレクトリを作成しましょう。
プロジェクト名はここではsample-appとします。
% mkdir sample-app
% cd sample-app
2. Dockernize
Dockerfileとdocker-compose.ymlを作成し、中身を追加します。
% touch Dockerfile
% touch docker-compose.yml
nodeのバージョンはこちらから新しめのものを選択すればいいと思います。
プロジェクトディレクトリ名が"sample-app"なので、コンテナ名・react-app名は"frontend"とします。
Dockerfile
FROM node:14.4.0-alpine3.10
ENV LANG=C.UTF-8
ENV TZ=Asia/Tokyo
WORKDIR /usr/src/sample-app
docker-compose.yml
version: '3'
services:
frontend:
build: .
environment:
- NODE_ENV=development
volumes:
- ./:/usr/src/sample-app
command: sh -c 'cd frontend && yarn start'
ports:
- '3000:3000'
tty: true
-
volumes:ホスト:コンテナ間でファイル・ディレクトリを同期(= マウント)する- これにより、ホスト側のエディター等で行った編集がコンテナ側にも反映されたり、
docker-compose run コマンドでコンテナ側に生成されたファイル・ディレクトリがホスト側にも同様に生成されるようになる
- これにより、ホスト側のエディター等で行った編集がコンテナ側にも反映されたり、
-
sh -c 'cd frontend && yarn start':docker-compose upしたとき、react-appディレクトリに移動し、devサーバーを起動する -
ports: 公開用のポートを、'ホスト:コンテナ'の書式で指定している。- ブラウザでローカルホストを開くときはホスト側に指定したポートを参照する(e.g. この場合、ブラウザからは
localhost:3000で開発環境のアプリケーションにアクセスできる)
- ブラウザでローカルホストを開くときはホスト側に指定したポートを参照する(e.g. この場合、ブラウザからは
-
tty: 値をtrueにすることで、docker-compose upでコンテナを起動させた際にコンテナがすぐに終了してしまうのを防ぐ
3. ビルド
% docker-compose build
% docker-compose run --rm frontend sh -c 'npx create-react-app frontend --template typescript'
-
--rm: コマンド実行後にこのコンテナ(frontend)を削除する -
--template typescript: .jsxファイルの代わりに.tsxファイルが生成され、ReactアプリケーションがTypeScriptで動くようになる
正常にビルドが完了した場合、以下のようなディレクトリ構成になります。
TSXファイル等はsrc以下に配置されています。
sample-app
├── Dockerfile
├── docker-compose.yml
└── frontend
├── node_modules
├── public
├── src
├── .gitignore
├── README.md
├── package.json
├── tsconfig.json
└── yarn.lock
4. アプリケーション起動の確認
下記コマンドでdevサーバーが起動します。
% docker-compose up
http://localhost:3000/
にアクセスし、App.tsxの内容が表示されていれば成功です。
該当ファイルをエディターで編集するとすぐに反映されることも確認できるはずです。
あとは自由に開発を進めていきましょう！
アプリケーションの停止は下記コマンドでできます。
% docker-compose down