DockerでNuxt.jsの開発環境を構築してVSCodeで触れるようにするまで

Macbookを買い替え、Dockerのコンテナで開発環境を作れたら他の人と環境を合わせるのも楽だし、自分のMacbook環境汚さなくて済むしいいことづくめでは、と思ってやってみたので覚書です。

こうした方がいいよ、とか、間違っている情報などあれば教えていただけると嬉しいです。
軽くVue.js触ってるだけなので、インフラわからなくて怖いけど頑張りたい。。

前提

• Apple M1チップのMacBook Air(macOS Big Sur, 16GB)

やりたいこと

1. Docker上でNuxt.jsを開発できる環境を構築できる
2. MacからNuxt.jsのアプリケーションにアクセスできる
3. MacのVSCodeから開発したい

参考にさせていただいた記事

• docker で nuxt.js を開発環境を建てるだけ
• dockerでnuxt開発環境作成
• 【Docker】Nuxtの開発環境をDockerfileとdocker-compose.ymlで構築してみた！

備忘録

1. Dockerイメージの作成

node公式のDockerイメージがあったので、そちらを使ってDockerイメージを作成する。
2020/12/25時点での安定版が14.15.3だったので、そちらを利用することにした。

Dockerfile

FROM node:lts-alpine3.11

WORKDIR /app

RUN apk update && \
    apk add git && \
    npm install -g npm && \
    npm install -g vue-cli && \
    npm install -g create-nuxt-app@2.15.0

ENV HOST 0.0.0.0
EXPOSE 8080

FROMでベースとなるDockerイメージを指定している。

WORKDIR /appというのはDockerコンテナ上でのcd /appみたいなもの。

RUNは実際にコマンドを叩く。

create-nuxt-appは最新を入れると以下のエラーが出てしまうようで、少しバージョンを落とす(@2.15.0)とうまくいくらしい(参考記事参照)。

Can't create . because there's already a non-empty directory . existing in path.

docker-compose.yml

version: '3'
services: 
  nuxt:
    build: .
    tty: true
    command: npm run dev
    volumes:
      - .:/app
    ports:
      - "8080:3000"

portsで"8080:3000"と指定することで、外部(この場合はMac側でlocalhost:8080を見ることで、コンテナ内のlocalhost:3000を参照できるようになる。

2. Dockerコンテナの立ち上げ

作ったイメージをビルドして、コンテナを立上げる。

$ docker-compose build
$ docker images
REPOSITORY   TAG              IMAGE ID       CREATED          SIZE
nuxt_nuxt    latest           53cf2fd02c9a   39 seconds ago   210MB
node         lts-alpine3.11   66ba137c0d00   6 days ago       115MB

create-nuxt-appの各項目はお任せです。

$ docker-compose run --rm nuxt npx create-nuxt-app
create-nuxt-app v2.15.0
✨  Generating Nuxt.js project in .
? Project name app
? Project description nuxt.js sample app
? Author name trajanme
? Choose programming language JavaScript
? Choose the package manager Yarn
? Choose UI framework None
? Choose custom server framework None (Recommended)
? Choose Nuxt.js modules Progressive Web App (PWA) Support
? Choose linting tools ESLint
? Choose test framework None
? Choose rendering mode Single Page App
? Choose development tools jsconfig.json (Recommended for VS Code)

docker-compose up -d

これでhttp://localhost:8080にアクセスすれば、アプリケーションを確認できます。

ESLintのエラー出たけど、とりあえず起動を確認。

3. Mac上のVSCodeからコンテナのファイルを編集

めっちゃ簡単にできました。

VS CodeでDocker開発コンテナを便利に使おうの記事に書いているRemote-Containersを使うのかなと思っていたんですが...

Dockerアプリの「Containers/Apps」から立ち上げたコンテナの「Open in Visual Studio Code」を押すだけ。

ちなみにDockerコンテナを落とすときは以下のコマンド。

$ docker-compose down

再び上げれば、普通に前回の続きから作業できます。

もう少し調べたりしないとあやふやなことが多いので、年末年始中に整理したい...