DockerでReact＋TypeScript環境を作ってみた～formatterを添えて～

Author: ガンちゃん Category: Docker

皆さんどうもーがんちゃんです！

バックエンドエンジニア

 がんちゃん

本格的に冬が訪れて、寒い日が続いていますね！

　バックエンドエンジニア

　がんちゃん

ちなみに自分は、まだ腕まくり半袖で過ごしています！！

　バックエンドエンジニア

　がんちゃん

 

「見てる方が寒いから服を着ろや」と

せっつかれてる常日頃です！

　バックエンドエンジニア

　がんちゃん

それはさておき今回はDockerを使ってReact環境を作ってみましたので、
構築過程で学んだことの共有記事になります。

ではよろしくお願いします！！

 

環境

  • Windows10
  • DockerDesktop  4.0.0
  • nodeImage :16.13.0-alpine3.12

  • React@17.0.2

  • typescript@4.5.3
  • eslint@7.32.0
  • prettier@2.5.1

 

Dockerをなぜ使うのか？

大まかに言えば下記2点のメリットがあるため、Dockerを使います！

  1. 作成した開発環境を簡単に共有できる
  2. DockerImageを使った環境構築が楽

1.基本的に作成した環境情報はdockerfileとdocker-compose.ymlの2ファイルに記述されています。

あとはこの2ファイルをほかの人にコピーして実行してもらえば、同じ環境ができちゃいます！

チームで開発環境を合わせる際に絶大な力を発揮します！

2.DockerImageという開発環境のひな型になるものがすでに用意されています。

このImageを読み込むだけで、OSの選択やDBのインストールなどの大まかな設定が簡単にできます！

DockerImageは、後述するDockerHubから取得します。

DockerHubとは？

DockerHubはこちらから

DockerImageがまとまっている場所のことで、DockerHubからDockerImageを簡単に取得できます。

上級者は自分で作ったImageを上げるんだそう！

※利用するにはDockerHubアカウント（無料）が必要になります。

では実際に環境構築手順を見ていきましょう！

ディレクトリ構成

React
  ├─front <-Reactのプロジェクトディレクトリ
  ├─Dockerfile
  ├─dockercompose.yml

docker-compose.ymlの設定

docker-compse.ymlはDockerコンテナの管理方法を記述できるファイルです。

今回は下記のような記述にしています。

version: "3.8"//docker composerのバージョンの指定
services:
  front:
    build: ./　//buildするdockerfileの位置
    container_name: node　//作成するdockerコンテナの名前
    volumes:
      - ./front:/front　//docker内と共有するフォルダの指定
    working_dir: /front　//docker内に入った時の初期パスの指定
    ports:
      - 3000:3000　//コンテナにバインドするポートの指定（左:自分のPCポート、右:dookerコンテナのポート）
    tty: true　//コンテナが勝手に終了しないための設定
    stdin_open: true　//標準入出力とエラー出力をコンテナに結びつける設定
    environment:
      - CHOKIDAR_USEPOLLING=true //ホットリロードを行う設定

Dockerfileの設定

Dockerfileで記述した内容がDockerコンテナの仕様情報になります。

今回は下記のような記述にしています。

FROM node:16.13.0-alpine3.12 //dockerHubから持ってくるImageの指定
ENV NODE_VERSION 14.18.1 //使用するnodeのバージョンの指定
WORKDIR /front  //docker内に入った時の初期パスの指定
COPY ./front /front　//ローカル側のファイルをdocker内にコピーする
EXPOSE 3000　//コンテナの使用ポート指定
ENV CI=true　//コンテナが勝手に終了してしまわないようにする設定

docker-compose.ymlとDockerfileの設定が終わったら、Dockerをビルドしていきます。

コマンドラインツールでdocker-compose.ymlファイルの位置まで移動して下記コマンドを打っていきます。

C:\work\react> docker-compose build
-----------------------------------
【実行結果】
エラーがでてなければOK

次にDockerコンテナを起動させます。

C:\work\react> docker-compose up -d
-------------------------------------------------------
【実行結果】
Creating network "react_default" with the default driver
Creating node ... done
※上記記述がでればOK

Dockerコンテナが本当に立ち上がっているかの確認を行います。

nodeコンテナが立ち上がっていることが確認できるかと思います。

C:\work\react>　docker-compose ps
---------------------------------------------------------------------------------------
【実行結果】
Name              Command               State                    Ports
----------------------------------------------------------------------------------------
node   docker-entrypoint.sh npm start   Up      0.0.0.0:3000->3000/tcp,:::3000->3000/tcp
※上記記述が出ればOK

Reactプロジェクトの作成

立ち上げたDocker(node)コンテナ内に入ります。

C:\work\react>　docker exec -it node sh
-----------------------------------------
【実行結果】
PS C:\work\react> docker exec -it node sh
/front #
※Dockerfileで記述した初期ディレクトリで入れていればOKです。

次にReactプロジェクト作成コマンドを打っていきます。

慣れの問題でnpmをインストーラーとして使っています。

初期インストーラーはYarnですので、そちらを使いたい方は(–use-npm）を外してください。

/front #　npx create-react-app . --template typescript --use-npm

正常に動けばReactプロジェクトファイルのインストールができていると思います。

PS /front #　ls -al
ーーーーーーーーーーーーーーーーーーー
【実行結果】
drwxrwxrwx    1 root     root          4096 Dec 12 15:43 .
drwxr-xr-x    1 root     root          4096 Dec 12 15:38 ..
-rw-r--r--    1 root     root           310 Dec 12 15:43 .gitignore
-rw-r--r--    1 root     root          2117 Dec 12 15:43 README.md
drwxr-xr-x    1 root     root          4096 Dec 12 15:43 node_modules
-rw-r--r--    1 root     root       1518411 Dec 12 15:43 package-lock.json
-rw-r--r--    1 root     root           967 Dec 12 15:43 package.json
drwxr-xr-x    1 root     root          4096 Dec 12 15:43 public
drwxr-xr-x    1 root     root          4096 Dec 12 15:43 src
-rw-r--r--    1 root     root           535 Dec 12 15:43 tsconfig.json

※上記のようにファイルが出来ていればOKです。

eslintの設定

下記コマンドでeslintの設定ファイルをつくります。

/front #　npx eslint --init

eslintの設定をいろいろと聞かれます。

今回の設定では、下記設定を選んでいます。

ESLintのチェックをどこまで行うのですか？
? How would you like to use ESLint? … 
To check syntax only
To check syntax and find problems
To check syntax, find problems, and enforce code style　<-これを選んでください

使っているモジュールは何ですか？
? What type of modules does your project use? … 
JavaScript modules (import/export)<-これを選んでください
CommonJS (require/exports)
None of these

プロジェクトで使用しているフレームワークはどれですか？
? Which framework does your project use? … 
React<-これを選んでください 
Vue.js
None of these

プロジェクトはTypeScriptを使用していますか？
Does your project use TypeScript? · No / Yes <-Yesを選択してください

コードはどこで実行されますか？
 Where does your code run? … (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ✔ Browser<-これを選んでください
 ✔ Node

設定ファイルをどの形式にしますか？
What format do you want your config file to be in? … ❯ 
JavaScript <-これを選んでください
YAML 
JSON

プロジェクトのスタイルをどのように定義しますか？
How would you like to define a style for your project? … 
Use a popular style guide<-これを選んでください
Answer questions about your style
Inspect your JavaScript file(s)

選択した構成には、次の依存関係が必要です。
eslint-plugin-react の最新バージョンを今すぐ npm でインストールしますか?
eslint-plugin-react@latest
? Would you like to install them now with npm? › No / Yes<-Yesを選択してください（npmインストールが始まります）

Successfully created .eslintrc.js file in /front
ESLint was installed locally. We recommend using this local copy instead of your globally-installed copy.
上記の表示が出ればOK

eslintrc.jsファイルができているか確認してください。

※このファイルにeslintとprettierの設定を記述していきます。

/front #　ls -al
----------------------
drwxrwxrwx    1 root     root          4096 Dec 12 16:05 .
drwxr-xr-x    1 root     root          4096 Dec 12 17:49 ..
-rw-r--r--    1 root     root           750 Dec 12 16:32 .eslintrc.js  <-このファイルが出来ていればOKです。  
-rw-r--r--    1 root     root           310 Dec 12 15:43 .gitignore       
-rw-r--r--    1 root     root          2117 Dec 12 15:43 README.md        
drwxr-xr-x    1 root     root          4096 Dec 12 16:50 node_modules     
-rw-r--r--    1 root     root       1816522 Dec 12 16:31 package-lock.json
-rw-r--r--    1 root     root          1697 Dec 12 16:31 package.json     
drwxr-xr-x    1 root     root          4096 Dec 12 15:43 public
drwxr-xr-x    1 root     root          4096 Dec 12 15:43 src
-rw-r--r--    1 root     root           535 Dec 12 15:43 tsconfig.json

.eslintrc.jsにeslintの設定を追記

module.exports = {
    env: {
        browser: true,
        es2021: true,
        "jest/globals": true,<-追記
    },
    extends: [
        "plugin:react/recommended",
        "standard",
        "plugin:@typescript-eslint/recommended",<-追記
    ],
    parser: "@typescript-eslint/parser",
    parserOptions: {
        ecmaFeatures: {
            jsx: true,
        },
        ecmaVersion: 12,
        sourceType: "module",
    },
    plugins: ["react", "@typescript-eslint", "jest"],
    rules: {
        "no-use-before-define": "off",<-追記
        "@typescript-eslint/no-use-before-define": ["error"],<-追記
    },
    settings: {
        react: {
            version: "detect",<-追記
        },
    },
};

prettierの設定

下記コマンドでprettierをインストール

/front #　npm i -D prettier eslint-config-prettier eslint-plugin-prettier pretty-quick
----------------------------------------------------------------------------
Run `npm audit` for details.
/front
上記になればOK

prettierの設定を.eslintrc.jsに追記

module.exports = {
    env: {
        browser: true,
        es2021: true,
        "jest/globals": true,
    },
    extends: [
        "plugin:react/recommended",
        "standard",
        "plugin:@typescript-eslint/recommended",
        "prettier"<-追記
    ],
    parser: "@typescript-eslint/parser",
    parserOptions: {
        ecmaFeatures: {
            jsx: true,
        },
        ecmaVersion: 12,
        sourceType: "module",
    },
    plugins: ["react", "@typescript-eslint", "jest", "prettier"],<-"prettier"追記
    rules: {
        "no-use-before-define": "off",
        "@typescript-eslint/no-use-before-define": ["error"],
        "prettier/prettier": "error",<-追記
    },
    settings: {
        react: {
            version: "detect",
        },
    },
};

フォーマッタ等の設定ができたので、Reactを動かしてみたいと思います。

下記コマンドでReactを立ち上げる

/front # npm start

フォーマットの実行

下記記述のコマンドを打ってください。

srcフォルダ配下のファイル名に.tsがついているファイルのフォーマッタを実行します。

/front #　npx eslint --fix src/**/*.ts*
上記コマンドでエラーが出なければフォーマッタが正常に動いています。

Reactにアクセスする

下記URLにアクセスしてみてください。

http://localhost:3000/

下記画像のようにReactの初期画面が出ていれば成功です。

 

Reactでファイル編集できるか試してみましょう。

front/srcフォルダ内のAPP.tsxを少しいじってみます。

import React from "react";
import logo from "./logo.svg";
import "./App.css";

funtion App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo}> className="App-logo" alt=""logo />
        <p>ロジカルスタジオ</p><-文言変更
　　　   <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
         >
　　　　   ファイル変更テスト<-文言変更
         </a>
       </header>
    </div>
  );
}

export default App;

APP.tsxを更新後保存すると下記画像のように文言が変わっていることが確認できます！

 

環境構築の最後にReactの自動起動設定を行います。

composerfileに下記を追記してください。

FROM node:16.13.0-alpine3.12 //dockerHubから持ってくるImageの指定
ENV NODE_VERSION 14.18.1 //使用するnodeのバージョンの指定
WORKDIR /front  //docker内に入った時の初期パスの指定
COPY ./front /front　//ローカル側のファイルをdocker内にコピーする
EXPOSE 3000　//コンテナの使用ポート指定
ENV CI=true　//コンテナが勝手に終了してしまわないようにする設定
CMD npm start　<-追記

これでdockerを立ち上げるとReactが自動起動する設定になります。

自分でいちいちnpm startをする必要がないです！

※初期からこの設定を書いているとエラーになるので、ここまでの設定を行ってから追記してください。

おまけ（vscodeでeslintとprettierのフォーマット設定を行う）

まずはプラグインでeslintとprettierのプラグインを入れてください。

プラグイン検索窓で検索するとすぐ出てきます。

プラグインのインストールが終わったらvscodeのワークスペースsettings.jsonに下記を記入してください。

{
  "editor.formatOnSave": true, //prettierでフォーマットする
　"editor.codeActionsOnSave": {
   　"source.fixALL.eslint" true //eslintでフォーマットする
　"editor.defaultFormatter": "esbenp.prettier-vscode" //デフォルトフォーマッタをprettierにする
｝

上記設定を行うと、ファイルを保存するだけでフォーマットを実行してくれます！

最後に

今回の執筆にあたり自分で環境構築をすることで、Dockerについての理解が深まったので面白かったです！

皆さんもぜひ、構築の沼にはまりましょう！！

 

ロジカルスタジオでは、バックエンドエンジニアを募集しています。

環境構築（インフラ）に興味のある方、すでに環境構築の悟りを開いている方、募集お待ちしております！