docker + nextjs + React + typescriptで開発環境を整える

開発環境を作る

dockerでnodeの開発環境を作成する

任意のフォルダの以下のsrcディレクトリとdocker-compose.yamlを作成する

以下の作業はWindows上の作業

--
├ src/
├ docker-compose.yaml

docker-compose.yaml

version: '3'

services:
  app:
    image: node:lts # バージョン指定も可能 ex. node:12.16.1
    container_name: nextExpressTest  # コンテナ名は任意
    environment:
            - DEBUG=app:*
    tty: true
    # ホスト側のポート：コンテナのポート
    ports:
            - '3000:3000'
    # ホスト側のsrcをコンテナのappにマウント
    volumes:
      - ./src:/app
    working_dir: "/app"
    # 起動後に実行するコマンド
    # command: npm run dev

Git等からnextjsのプロジェクトを取得する場合

Gitからプロジェクトを取得

srcディレクトリ以下に移動する

>cd src

gitからnextjsプロジェクトを取得する

>git clone https://github.com/HKurakami/nextjs-app.git

コンテナの起動とシェルの起動

>docker-compose up -d            コンテナの起動
>docker-compose exec app bash    シェルの起動

# node --version
v18.14.0
上記の様にnodeのバージョンが表示されればOK（バージョンは2203/2/16現在）

ここからはdockerのlinuxでの作業

取得したnextjsのプロジェクトディレクトリへ移動して、npm install する

# cd nextjs-app/
# npm install

nextjsのプロジェクトを起動する

# npm run dev

http://localhost:3000
へアクセスして、nextのデフォルトページが表示されればOK

新規にnextjsのプロジェクトを作成する場合

コンテナの起動とシェルの起動

>docker-compose up -d            コンテナの起動
>docker-compose exec app bash    シェルの起動

# node --version
v18.14.0
上記の様にnodeのバージョンが表示されればOK（バージョンは2203/2/16現在）

TypeScriptを適用したnextjsのプロジェクトを作成する

＊プロジェクト名には大文字が含まれるとエラーになるので注意

# npx create-next-app --typescript newproject

# cd newproject
# npm run dev

http://localhost:3000
へアクセスして、nextのデフォルトページが表示されればOK