Ubuntu上でDockerを使用してNext.jsアプリケーションを起動する

Ubuntu 22.04.2 LTS での Next.js アプリケーションセットアップ

バージョン

• Ubuntu: 22.04.2 LTS
• Node.js: v18.18.0
• npm(npx): 9.8.1

手順

1. Ubuntu 22.04.2 LTS を Microsoft Store からインストールします。

2. Node.js と npm をインストールします。

    $ sudo apt install -y nodejs npm
   

3. ｎをインストール

   $ sudo npm install n -g
   

4. 最新のnode.jsとnpmのインストール

   $ sudo n stable
   

5. 最初に入れたとりあえずの node.js と　npm をアンインストール

   $ sudo apt purge -y nodejs npm
   $ sudo apt autoremove -y
   

6. 残った node.js と npm が最新であることを確認

   $ node -v
   $ npm -v
   

7. PCの再起動

8. プロジェクトのディレクトリを作成

9. ディレクトリへ移動

10. Next.js アプリケーション [test-app] 作成

    npx create-next-app test-app
    

11. [test-app] ディレクトリへ移動

12. VScodeでの起動

    code .
    

13. 「dockerfile」と「compose.yml」をVScodeで新規作成

    dockerfile.

        FROM node:18.12-alpine
        WORKDIR /app/
        COPY ./package.json ./
        RUN npm install
    

    docker-compose.yml

    services:
      app:
        build:
          context: .
        ports:
          - "3000:3000"
        volumes:
          - .:/app
          - node_modules:/app/node_modules
        command: sh -c "npm run dev"
    volumes:
      node_modules:
    networks:
      snowboard_default:
        external: true
    

14. Dockerイメージのビルド

    docker-compose build
    

15. Dockerコンテナの起動

    docker-compose up
    
    

これで http://localhost:3000 にアクセスするとNext.jsが起動されている