Zenn
🗂

WSL2(Ubuntu)+Docker DesktopでのNext.jsとTypeScript環境構築

2021/12/30に公開
Docker
Next.js
初心者
#
環境構築
tech

はじめに

dockerを使ってNext.jsとTypeScript環境を構築したいと思って作業を始めました、Windows環境でうまく出来なかったがWSL2(Ubuntu)でうまく出来たのでそのやり方を残します。

Next.js+TypeScript環境構築

Docker Desktopを起動する
Windows TerminalでUbuntuターミナルを開く
作業ディレクトリにdocker-compose.ymlを作成して中身を下記のようにする

docker-compose.yml
version: "3"
services:
  node:
    image: node:16.13.1-alpine
    volumes:
      - ./:/workspace/app
    working_dir: /workspace/app
    command: sh -c "cd frontend && yarn dev"
    ports:
      - "3000:3000"

docker-compose.ymlがあるディレクトリで下記コマンドを実行してnext.jsとTypesScriptの環境を構築する

docker-compose run --rm node yarn create next-app frontend --ts

下記コマンドでコンテナとサーバーを起動する

docker-compose up -d

localhost:3000にアクセスして下図のような画面が表示されていたら成功
トップページ
停止させる場合は下記コマンドを実行する

docker-compose down

VSCodeを用いてコンテナ内のファイルを編集する

作業ディレクトリでcode .コマンドを実行するとVSCodeが起動する
コマンドパレットでAdd development container configuration filesを実行して
From 'docker-compose.yml'を選択する
作成された.devcontainerフォルダのファイルを編集する

devcontainer.json
- "workspaceFolder": "/workspace",
+ "workspaceFolder": "/workspace/app",

docker-compose.ymlの下記行を消すかコメントアウトする

docker-compose.yml
volumes:
  # Update this to wherever you want VS Code to mount the folder of your project
  - .:/workspace:cached

コマンドパレットでReopen in Containerを実行する
frontend/pages/index.tsxを編集して画面が書き換わったら成功

おわりに

ここまで見てくださりありがとうございます。
参考になれば幸いです。

Discussion