11月 21, 2022
Docker , , , ,

Dcokerでreact typescript環境の構築

docker-composeファイルのテンプレート

version: '3'

services:
  app:
    build: .
    volumes:
      - .:/code
    ports:
      - '3000:3000'
    networks:
      - external.group
networks:
  external.group:
    external: true

Dockerfileのテンプレート

FROM node:17.8

# ディレクトリを作成
RUN mkdir /code
# 作業ディレクトリを設定
WORKDIR /code
# モジュールをワークスペースに追加
ADD . /code/

EXPOSE 3000

CMD [ "sh", "start.sh" ]

start.shの作成

#!/bin/bash
npm install -g npm
npm install
cd app_base
npm install
npm run dev

プロジェクトの作成

プロジェクト作成に必要なモジュールをインストールするため、下記のコマンドを実行する。

docker-compose run --rm app npm install create-next-app

次に、プロジェクトを作成するためのコマンドを実行する。

docker-compose run --rm app npx create-next-app [プロジェクト名] --ts

オプションの --ts を付けることによって、作成時に、TypeScriptの環境になる。

プロジェクトを起動

docker-compose up -d

Related Posts: