この記事は旧KISANAブログのアーカイブです

環境

  • Windows 11 (10も変わらないでしょう)
  • Docker Desktop

少ないのが嬉しいですね🤞

初期設定

プロジェクトディレクトリを用意します。
中にdocker-compose.ymlを設置して以下の雛形に沿って準備します。

version: '3.7'
services:
  app-name:
    container_name: app-name
    image: node:17.3.0
    volumes:
      - .:/srv/ # app-dir # いったんコメント
        working_dir: /srv/ # app-dir # いったんコメント
    command: bash -c "cd /srv && npx create-next-app app-name && cd /srv/app-name && npm i && npm run dev"
    ports:
      - "3000:3000"

一応解説はさんでおくと、nodeイメージ内の/srvディレクトリ下でcreate-next-app(Next.jsの雛形作成)叩いてnpmをインストールしてdevサーバー立ててポート3000で出力しています。

コンテナ名は指定しておくと便利です。
ビルド&立ち上げして確認します。

$ docker-compose up --build

http://localhost:3000/
で確認できるはずです。

次回起動用設定

上で書いたのはアプリをビルドするためのものなので起動するものに変えます。

プロジェクトディレクトリ下にapp-dirができてるかと思いますがその中身をプロジェクトディレクトリ直下に配置します。

docker-compose.ymlで次回以降の起動時にcreate-next-appしないようにする為、commandを変更します。(""の中身です)

command: bash -c "npm i && npm run dev"

また、#app-dirいったんコメントとしていたところをコメント外してください。
(#を消していったんコメントという文字も消す)

完成

起動コマンド

$ docker-compose up

で3000番で立ち上がるかと思います。お疲れ様でした。

Archive Capture

*画像は省略しています。
capture