トップ > いつか記憶がなくなる自分へ > はじめてのReactの環境を作ってみる

はじめてのReactの環境を作ってみる

いつか記憶がなくなる自分へ
  • 環境
  • Docker Compose version v2.15.1
  • Docker version 20.10.22, build 3a2c30b

1. compose.ymlを書く

ファイル名は、これまでdocker-compose.ymlとしていましたが以下の記載があったので、compose.ymlにします

ファイルのデフォルトのパスは compose.yaml （推奨）か compose.yml です。Compose 実装は、下位互換性のために docker-compose.yaml と docker-compose.yml もサポート すべきです。SHOULD 両方のファイルが存在する場合、 Compose 実装は標準である compose.yaml を優先 しなければいけませんMUST 。
Compose Specification（仕様） — Docker-docs-ja 20.10 ドキュメント

以下のように記載されているので、versionは指定しません。

Compose 実装は、 Compose ファイルの検証にあたり、正確なスキームを選ぶためにこの version を使う べきではありませんSHOULD NOT 。そうではなく、 Compose ファイルが設計された時点での最新のスキーマを優先すべきです。
Compose Specification（仕様） — Docker-docs-ja 20.10 ドキュメント

サービス名は「node」、コンテナ名は「reactapp」とします。 コンテナの元になるイメージにはNode.jsを使います。 Node.jsのサイト(https://nodejs.org)でLTSとなっている「18.16.1」(2023-06-29時点)を指定します。

  node:
    container_name: reactapp
    image: node:18.16.1

サービスがボリュームをマウントする場所を指定します。 「reactapp」ディレクトリはこの時点ではありませんが、後で作成します。

    volumes:
      - ./reactapp:/usr/src/app

コンテナ実行時には後で作るReactプロジェクトのディレクトリに移動してプロジェクトを実行するように指定します。

    command: sh -c 'cd reactapp && yarn start'

command はコンテナ イメージによって宣言済み（例： Dockerfile の CMD ）のデフォルト コマンドを上書きします。
Compose Specification（仕様） — Docker-docs-ja 20.10 ドキュメント
CMD の主な目的は、コンテナ実行時のデフォルト（初期設定）を指定するためです 。
Dockerfile リファレンス — Docker-docs-ja 20.10 ドキュメント

ポートマッピングは、コンテナ内でNode.jsが使う「3000」をホストの「13000」へマッピングします。

    ports:
      - '13000:3000'

qiita.com

全体

services:
  node:
    container_name: reactapp
    image: node:18.16.1
    volumes:
      - ./reactapp:/usr/src/app
    command: sh -c 'cd reactapp && yarn start'
    ports:
      - '13000:3000'

2. Reactのプロジェクトを作成する

コンテナ構築

まずはコンテナを構築します。

使い方: docker-compose build [オプション] [--build-arg key=val...] [サービス...]
docker-compose build — Docker-docs-ja 20.10 ドキュメント

$ docker-compose build node

プロジェクト作成

$ docker-compose run --rm node sh -c 'git config --global user.email "ponsuke@example.com" && git config --global user.name "ponsuke" && npx create-react-app reactapp --template typescript'

上記を実行します。意味は・・・

「docker-compose run」は「サービスに対して１回コマンドを実行する」という意味で「--rm」オプションをつけて「コンテナ実行後に削除」します。
参考 : docker-compose run — Docker-docs-ja 20.10 ドキュメント

そして、「sh -c」を使ってコンテナの中でReactプロジェクトを作成します。

まずは、「git config --global user.email "{メールアドレス}" && git config --global user.name "{ユーザー名}"」でGitのユーザー情報を設定します。
Ractプロジェクトを作成する際にGitのコミットが行われるため、ユーザー情報が必要になるからです。
qiita.com

「npx create-react-app {アプリ名}」でプロジェクトを作ることができます。
参考 : 新しい React アプリを作る – React

「--template typescript」を指定して一緒にTypeScriptを使えるようにします。
参考 : Getting Started | Create React App

# 「コンテナを実行」して「ReactプロジェクトをTypeScriptを合わせて作成」して「コンテナ削除」する
$ docker-compose run --rm node sh -c 'git config --global user.email "ponsuke@example.com" && git config --global user.name "ponsuke" && npx create-react-app reactapp --template typescript'
[+] Running 1/0
 ⠿ Network docker_default  Created                                                                                                           0.0s
[+] Running 9/9
 ⠿ node Pulled                                                                                                                              23.9s
   ⠿ d52e4f012db1 Pull complete                                                                                                              5.8s
   ⠿ 7dd206bea61f Pull complete                                                                                                              6.6s
   ⠿ 2320f9be4a9c Pull complete                                                                                                              8.5s
   ⠿ 6e5565e0ba8d Pull complete                                                                                                             18.3s
   ⠿ 5f1526a28cf9 Pull complete                                                                                                             18.4s
   ⠿ 2f0191f7d60a Pull complete                                                                                                             19.8s
   ⠿ 1104f0e2cc5e Pull complete                                                                                                             20.2s
   ⠿ 3f3e951e9c53 Pull complete                                                                                                             20.2s
Need to install the following packages:
  create-react-app@5.0.1
Ok to proceed? (y) y
npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.

Creating a new React app in /usr/src/app/reactapp.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template-typescript...


added 1413 packages in 3m

226 packages are looking for funding
  run `npm fund` for details

Initialized a git repository.

Installing template dependencies using npm...

added 52 packages, and changed 2 packages in 26s

235 packages are looking for funding
  run `npm fund` for details

We detected TypeScript in your project (src/App.test.tsx) and created a tsconfig.json file for you.

Your tsconfig.json has been populated with default values.

Removing template package using npm...


removed 1 package, and audited 1465 packages in 4s

235 packages are looking for funding
  run `npm fund` for details

6 high severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

Created git commit.

Success! Created reactapp at /usr/src/app/reactapp
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd reactapp
  npm start

Happy hacking!
npm notice 
npm notice New minor version of npm available! 9.5.1 -> 9.8.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v9.8.0
npm notice Run npm install -g npm@9.8.0 to update!
npm notice 

# こんな感じでディレクトリやファイルができました。
node/reactapp/
├node_modules/
├README.md
├public/
｜├favicon.ico
｜├index.html
｜├logo512.png
｜├manifest.json
｜├robots.txt
｜└logo192.png
├src/
｜├index.tsx
｜├App.tsx
｜├App.test.tsx
｜├App.css
｜├index.css
｜├setupTests.ts
｜├reportWebVitals.ts
｜├react-app-env.d.ts
｜└logo.svg
├.gitignore
├package-lock.json
├package.json
└tsconfig.json

コンテナを起動する

$ docker-compose up -d node
[+] Running 1/1
 ⠿ Container reactapp  Started                                                 7.2s

$ docker ps
CONTAINER ID   IMAGE          COMMAND                  CREATED          STATUS         PORTS                     NAMES
17ae1d5a6c19   node:18.16.1   "docker-entrypoint.s…"   15 seconds ago   Up 7 seconds   0.0.0.0:13000->3000/tcp   reactapp

$ docker-compose logs node
reactapp  | yarn run v1.22.19
reactapp  | $ react-scripts start
reactapp  | (node:36) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
reactapp  | (Use `node --trace-deprecation ...` to show where the warning was created)
reactapp  | (node:36) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
reactapp  | Starting the development server...
reactapp  | 
reactapp  | One of your dependencies, babel-preset-react-app, is importing the
reactapp  | "@babel/plugin-proposal-private-property-in-object" package without
reactapp  | declaring it in its dependencies. This is currently working because
reactapp  | "@babel/plugin-proposal-private-property-in-object" is already in your
reactapp  | node_modules folder for unrelated reasons, but it may break at any time.
reactapp  | 
reactapp  | babel-preset-react-app is part of the create-react-app project, which
reactapp  | is not maintianed anymore. It is thus unlikely that this bug will
reactapp  | ever be fixed. Add "@babel/plugin-proposal-private-property-in-object" to
reactapp  | your devDependencies to work around this error. This will make this message
reactapp  | go away.
reactapp  |   
reactapp  | Compiled successfully!
reactapp  | 
reactapp  | You can now view reactapp in the browser.
reactapp  | 
reactapp  |   Local:            http://localhost:3000
reactapp  |   On Your Network:  http://172.28.0.2:3000
reactapp  | 
reactapp  | Note that the development build is not optimized.
reactapp  | To create a production build, use npm run build.
reactapp  | 
reactapp  | webpack compiled successfully
reactapp  | No issues found.

画面を表示する

compose.ymlでホストのポート「13000」にマッピングしたので、http://localhost:13000/ をブラウザで表示します。

こんな画面が表示されます。