前回は M1 MacBook Pro 上に Lima + Docker 環境を構築しました。

今回は、先日にパブリックベータ版が公開された Nuxt.js v3 (以下、Nuxt 3) のアプリを構築して動かしてみます。

Nuxt 3 について

前バージョンに比べて75倍も軽量となり高速化されているそうで、少し触ってみた限りではかなり早くなっていますね。 Vue 3 や、Composition API、TypeScript、内部 API のネイティブサポートに加え、Nuxt 2 からの移行サポートツールである Nuxt Bridge も用意されているので既存の Nuxt 2 アプリでも Nuxt 3 の新機能が利用できる様になっています。

v3.nuxtjs.org

アプリ構築手順

コンテナ設定

まずは、コンテナ周りの設定を行うため、設定ファイルを作成します。

cd ~/projects/Sandbox
mkdir nuxt3-app-on-docker && cd nuxt3-app-on-docker
mkdir front && touch front/Dockerfile
touch docker-compose.yml

まずは、Dockerfile から。

node.js の LTS 版である v16.13.1` を利用します。

FROM node:16.13.1

EXPOSE 3000

続いて、docker-compose の設定です。

ホットリロード（ソースコードを修正したら即反映）の設定や、Nuxt 3 で追加となったと思われる WebSocket 通信用のポート設定を入れています。

version: '3'
services:
  front:
    build: front
    volumes:
      - ./src:/app/src
    tty: true
    environment:
      # ホットリロード
      - CHOKIDAR_USEPOLLING=true
    ports:
      - '3000:3000'
      # WebSocket 通信用ポート
      - '24678:24678'

Lima からのディレクトリ書き込み権限追加

コンテナは Lima 上の Docker で動かすので、ホスト PC のディスクへ書き込みできるようゲスト VM に書き込み権限を追加します。

Lima のインスタンスは default として登録しているので、設定変更は ~/.lima/default/lima.yaml に対して行います。元々設定にあった /tmp/lima に加え、 ~/projects 以下にも書き込みできるよう設定を追加します。

（前略）
mounts:
  - location: "~"
    writable: false
  - location: "/tmp/lima"
    writable: true
  - location: "~/projects"
    writable: true
（後略）

設定変更したら、ゲスト VM を再起動しておきます。

limactl stop default
limactl start default

コンテナ起動

実行前はコンテナが起動していません。

docker ps
CONTAINER ID   IMAGE     COMMAND   CREATED   STATUS    PORTS     NAMES

docker-compose コマンドでコンテナを起動します。

docker-compose up -d
Sending build context to Docker daemon     153B
Step 1/2 : FROM node:16.13.1
 ---> 94d4a84250fd
Step 2/2 : EXPOSE 3000
 ---> Using cache
 ---> 63d92f6ee14d
Successfully built 63d92f6ee14d
Successfully tagged nuxt3-app-on-docker_front:latest
[+] Running 1/1
 ⠿ Container nuxt3-app-on-docker-front-1  Started

コンテナが起動していることを確認します。

docker-compose ps
NAME                          COMMAND                  SERVICE             STATUS              PORTS
nuxt3-app-on-docker-front-1   "docker-entrypoint.s…"   front               running             0.0.0.0:3000->3000/tcp, 0.0.0.0:24678->24678/tcp, :::3000->3000/tcp, :::24678->24678/tcp

Nuxt 3 アプリの作成

Nuxt 3 アプリを構築するために、コンテナ内に入ってコマンドを実行できるようにします。

docker-compose exec front /bin/bash

今回は、公式ガイドにあるテンプレートアプリを作っていきます。

v3.nuxtjs.org

cd app/src/
npx nuxi init nuxt3-app
Need to install the following packages:
  nuxi
Ok to proceed? (y) 
Nuxt CLI v3.0.0-27313139.1c88580
ℹ cloned nuxt/starter#v3 to /app/src/nuxt3-app
 🎉  Another dazzling Nuxt project just made! Next steps:

     📁  `cd nuxt3-app`

     💿  Install dependencies with `npm install` or `yarn install`

     🚀  Start development server with `npm run dev` or `yarn dev`

あっという間にテンプレートアプリが作成されました。

Nuxt 3 アプリの起動

続いて依存モジュールをインストールしてテンプレートアプリを動かします。

nuxt3-app という名称で作成したので、nuxt3-app ディレクトリに移動してインストールします。

cd nuxt3-app/
yarn install

1分ほどでインストールが終わりました。インストールが終わったら、アプリを起動します。

yarn dev
Nuxt CLI v3.0.0-27313139.1c88580
                                                             
  > Local:    http://localhost:3000/ 
  > Network:  http://172.19.0.2:3000/

ℹ Vite warmed up in 832ms
✔ Vite server built in 1563ms
✔ Nitro built in 180 ms

あっという間に起動しました。 Nuxt 3 で導入された Nitro Engine の効果か、起動がとても早くなりましたね。

起動したら http://localhost:3000/ にアクセスします。以下のように表示されていれば成功です！

確認が終わったらコンテナを止めて、

docker-compose stop front

イメージを削除して完了です！

docker-compose rm front
? Going to remove nuxt3-app-on-docker-front-1 Yes
[+] Running 1/1
 ⠿ Container nuxt3-app-on-docker-front-1  Removed

今回は Nuxt 3 のテンプレートアプリを作成して起動しただけですが、前バージョンよりはるかに動作が早くなったことを感じられました。 Nuxt 3 になってアプリ動作の高速化だけでなく、TypeScript や内部 API などがサポートされて開発スピードも向上しそうですね。

DEVなメモ

個人開発のメモ的なブログ

Docker コンテナ上に Nuxt 3 アプリを作って動かしてみる