爆速React+TypeScript+Viteの環境構築

どうも、初めまして。
面識のある方は、お久しぶりです。みつくまです🐻

今日は、DockerにおけるReactの環境構築方法についてお話することができればと思います。

最初からクライマックス

まず、Docker Desktopを起動します。
Dockerを動かしたいディレクトリで
コマンドプロンプトを召喚します。
そして以下のコマンドを入力します。

% git clone https://github.com/sprout2000/docker-react-ts.git
% cd docker-react-ts
% docker-compose up

以上で、React + TypeScript + Viteの環境構築は終了です！
それでは、また次回！🐻

と流石に私自身なんのプラスにもなっていないので内部のファイルについて
理解したことをお話していこうと思います。

中身はどうなってるの？

まずはdocker-compose.ymlから

services: #1　このエントリから以下がServiceという扱い
  app: #appコンテナ（以下にコンテナの内容が書かれている）
    container_name: react-app-container # コンテナの名前
    image: node:16-alpine
    volumes:
      - ./:/app # ホスト側の./をコンテナ側の/appにマウントする
    working_dir: /app
    command: sh -c "npm install && npm run dev"
    ports:
      - '5173:5173'

マウントとは、コンテナ内のファイルをホストPC上のファイルシステムと関連付けるという意味があります。

FROM node:16-alpine # イメージを指定
WORKDIR /app # コンテナ上でのワーキングディレクトリを指定
COPY package.json . #　依存パッケージをインストールするためpackage.jsonをイメージのファイルシステム上にコピー
COPY package-lock.json . #　依存パッケージをインストールするためpackage-lock.jsonをイメージのファイルシステム上にコピー
RUN npm install # npmのインストール
COPY . . # 残りのソースコードをホストPC上からイメージのファイルシステム上にコピー
EXPOSE 5137 # 5137ポートを公開する
CMD [ "npm", "run", "dev" ] # コンテナの実行時に実行されるコマンドを指定

注意なのですが、docker-compose up する時に5137ポートを他で使用している場合は、閉じるか変更してください。

最後に

本当は、自力でDockerfile,docker-compose.ymlを作成したかったのですが
アプリケーションの開発をするためのdocker構築なのに
そっちに時間割かないのはどうなんだ...?と思い既存のファイルを参照しました。
いずれは、自作できるように勉強していきたいです。

個人開発として、springboot + Reactでwebアプリケーションをこれから作成していこうと思っています。
そちらの方でも発見があったら記事にしていきたいと思います！
長々としたあとがきになってしまいましたが、ここまで読んでいただきありがとうございました！
また、別の記事で🐻