アプリ開発を楽しむ【#2：環境構築１(React+TypeScript)】

前回までの記事 アプリ開発を楽しむ【#1：アプリの概要】

今回は環境構築を行っていきます。 環境構築が一番煩わしい作業ですよね? では、早速始めていきます。

開発環境はDockerを使って構築していきます。 Dockerがインストールされていなければインストールしてください。 https://www.docker.com

１.構築準備

ディレクトリ構成

togo_app
    │    
    ├── frontend
    |     |
    |     ├── app
    |     |
    │     └── Dockerfile
    |
    └── docker-compose.yml

ターミナル上で次のコマンドを入力すると上記のディレクトリ構成となります。

mkdir togo_app
cd togo_app
mkdir -p frontend/app
touch frontend/Dockerfile
touch docker-compose.yml

ここからは、エディタを使って作業していきます。 togo_appをVsCodeで開きます。

①Dockerfileを作成する

frontend/Dockerfileを次の内容で作成

FROM node:16.16.0

WORKDIR /togo_app

EXPOSE 3000

②docker-compose.ymlを作成する

docker-compose.ymlを次の内容で作成

version: '3.8'

services:
  frontend:
    container_name: frontend
    build: ./frontend
    volumes:
      - ./frontend/app:/togo_app
    ports:
      - "3000:3000"
    tty: true

③Dockerイメージの作成とコンテナの起動

次のコマンドでdockerイメージが作られ、コンテナが起動します。

docker compose up -d --build

④コンテナが起動しているかを確認する

docker compose ps

NAME                COMMAND                  SERVICE             STATUS              PORTS
frontend            "docker-entrypoint.s…"   frontend            running             0.0.0.0:3000->3000/tcp

NAMEがfrontend STATUSがrunningになっていれば正常にコンテナが起動しています。

２.React+TypeScriptをインストール

先程起動したコンテナの中に入ります。

docker compose exec frontend bash

以下のようにコンテナ内に入ることができます。
root@b585f79b9ddf:/togo_app#

①viteを使ってReact+TypeScript環境を構築する（コンテナ内で実行）

いつもはcreat-react-appを使っているのですが、今回はvite（ヴィートと読むみたいです）というのを使ってReactをインストールしていきます。 viteを使うとすぐにReact+TypeScriptの環境が構築できるようです。

npm create vite .

Ok to proceed? (y) → キーボードのyを押してenter

? Project name: → togo_app(任意のプロジェクト名を入力。ここでは、togo_appとしています)
? Select a framework: → reactを選択
? Select a variant: → react-tsを選択（TypeScriptを使うかどうかを選択）

次のようなファイル群がappディレクトリ以下にできます。

②React+TypeScriptをインストールする（コンテナ内で実行）

npm installを実行して、Reactなどをインストールします。

npm install

③サーバーを起動する（コンテナ内で実行）

npm run devでサーバーは起動できるのですが、コンテナの外からコンテナの中にアクセスできないので、frontend/app/vite.config.tsを次のように修正します。 frontend/app/vite.config.tsを修正

export default defineConfig({
  plugins: [react()],
    // 追加
  server: {
    host: true,
    port: 3000,
  }
})

サーバーを起動する。

npm run dev

http://localhost:3000 にアクセスして、下の画面が表示されたらOK

3.その他のライブラリーをインストール

コンテナ内ですべて実行していきます。

• material ui のインストール https://mui.com/

React用のUIフレームワーク

npm install @mui/material @emotion/react @emotion/styled
npm install @mui/icons-material
npm install @types/material-ui

• React Routerのインストール

ページ遷移があるReactアプリを構築するときに利用するライブラリー

npm install react-router-dom @types/react-router-dom

• Redux Tool Kitのインストール

状態管理用のライブラリー

npm install @reduxjs/toolkit

• Google Map

今回Google Mapを表示させるのに使用します。

npm install @react-google-maps/api
npm install @types/googlemaps --save-dev

今回はここまでにしておきます。 次回も引き続き環境構築していきます。（ESLintやPrettierなど）

コードはGitHubに置いてありますのでよければ参考にしてください。 mainブランチは常に最新のものになります。 今回の内容はblog_2のブランチを参照してください。 https://github.com/KINE-M/togo_app