React(TypeScript)プロジェクトの作成方法（Docker、ESLint、Prettier、WebPack）【1/4】

目次

前提

Node.jsの環境が用意されていること。
まだの人は以下からNode.jsをインストールしておいてください。

reigle.info

Reactのプロジェクト作成環境の用意

以下のコマンドを実行し、yarnをインストールする

npm install --global yarn 

以下のコマンドを実行し、create-react-appをインストールする

yarn global add create-react-app

Reactプロジェクトに「TypeScript」の設定をしてプロジェクト作成

以下のコマンドを実行し、プロジェクトを作成する
「[プロジェクト名]」は各自で設定すること

npx create-react-app [プロジェクト名] --template typescript

上記のように「template」オプションで「typescript」を指定するだけで、TypeScriptが設定されたReactプロジェクトが作成できる

Dockerの組み込み

以下のDockerの公式サイトから、Docker Desktopアプリをインストールする。
インストール後は手順に沿って、Docker Desktopを起動して確認してください。

docs.docker.com

以下のコマンドを実行して、Dockerのバージョンが表示されればDockerの準備は完了です。

docker -v

プロジェクトのルート（「package.json」などがある場所）に「Dockerfile」を作成する

Dockerfileには以下の内容を記述する（nodeのバージョンは任意で変更してください）

FROM node:16.14.2
WORKDIR /src

プロジェクトのルート（「package.json」などがある場所）に「docker-compose.yml」を作成する
docker-compose.ymlには以下の内容を記述する

# docker-composeのバージョン
# https://docs.docker.jp/compose/compose-file/compose-file-v3.html
version: '3.8'

services:
  react-app:
    # 環境構築
    # dockerfileを指定して「Dockerfile」にて環境構築を実施
    build:
      context: .
      dockerfile: Dockerfile
    # バインドマウント、ホスト側のファイルやディレクトリをコンテナ側にマウント
    volumes:
      - ./:/src
    # 起動時コマンド
    command: sh -c "npm install && npm run start"
    # ホスト側とコンテナ側の両方のポートを指定(ホスト側 : コンテナ側)
    # ポートを1つのみ指定した場合は、ホスト側にランダムなポート番号が割り当てられる
    ports:
      - "3000:3000"
    # 標準入出力とエラー出力をコンテナに結びつける
    stdin_open: true

ここまで準備ができたら、Dockerを起動してみます。 以下のコマンドを実行してください。

docker-compose up

ログで以下が表示されたら、起動は完了です。

webpack compiled successfully

以下のURLにアクセスして起動されていることを確認してください。

http://localhost:3000/

ここまでのソースコードは以下のGitHubにアップしています。

github.com

「docker-compose up」でエラーが出た場合

以下のようなエラーが出た場合、原因はDocker Desktopアプリでユーザーのサインインをしていない事です。

Traceback (most recent call last):
  File "urllib3/connectionpool.py", line 670, in urlopen
  File "urllib3/connectionpool.py", line 392, in _make_request
  File "http/client.py", line 1255, in request
  File "http/client.py", line 1301, in _send_request
  File "http/client.py", line 1250, in endheaders
  File "http/client.py", line 1010, in _send_output
  File "http/client.py", line 950, in send
  File "docker/transport/unixconn.py", line 43, in connect
FileNotFoundError: [Errno 2] No such file or directory

During handling of the above exception, another exception occurred:

Traceback (most recent call last):
  File "requests/adapters.py", line 439, in send
  File "urllib3/connectionpool.py", line 726, in urlopen
  File "urllib3/util/retry.py", line 410, in increment
  File "urllib3/packages/six.py", line 734, in reraise
  File "urllib3/connectionpool.py", line 670, in urlopen
  File "urllib3/connectionpool.py", line 392, in _make_request
  File "http/client.py", line 1255, in request
  File "http/client.py", line 1301, in _send_request
  File "http/client.py", line 1250, in endheaders
  File "http/client.py", line 1010, in _send_output
  File "http/client.py", line 950, in send
  File "docker/transport/unixconn.py", line 43, in connect
urllib3.exceptions.ProtocolError: ('Connection aborted.', FileNotFoundError(2, 'No such file or directory'))

During handling of the above exception, another exception occurred:

Traceback (most recent call last):
  File "docker/api/client.py", line 214, in _retrieve_server_version
  File "docker/api/daemon.py", line 181, in version
  File "docker/utils/decorators.py", line 46, in inner
  File "docker/api/client.py", line 237, in _get
  File "requests/sessions.py", line 543, in get
  File "requests/sessions.py", line 530, in request
  File "requests/sessions.py", line 643, in send
  File "requests/adapters.py", line 498, in send
requests.exceptions.ConnectionError: ('Connection aborted.', FileNotFoundError(2, 'No such file or directory'))

During handling of the above exception, another exception occurred:

Traceback (most recent call last):
  File "docker-compose", line 3, in <module>
  File "compose/cli/main.py", line 81, in main
  File "compose/cli/main.py", line 200, in perform_command
  File "compose/cli/command.py", line 60, in project_from_options
  File "compose/cli/command.py", line 152, in get_project
  File "compose/cli/docker_client.py", line 41, in get_client
  File "compose/cli/docker_client.py", line 170, in docker_client
  File "docker/api/client.py", line 197, in __init__
  File "docker/api/client.py", line 221, in _retrieve_server_version
docker.errors.DockerException: Error while fetching server API version: ('Connection aborted.', FileNotFoundError(2, 'No such file or directory'))
[27303] Failed to execute script docker-compose

続きは以下の記事です。
React(TypeScript)プロジェクトの作成方法（Docker、ESLint、Prettier、WebPack）【2/4】 - Reigle 技術ブログ