NUXTの開発環境をVSCodeとDockerで作る

はじめに

Nuxtの開発環境をVSCodeのVisual Studio Code Remoteを使って作ったので紹介します。 Firebaseも一緒にインストールします。

この方法で開発環境を構築すると、

  • Dockerを使うのでWindows、Mac、LinuxどのOSでも同じ環境を作ることができる
  • dockerfile、docker-compose.ymlに構築手順を書いておけるので手順を覚えておく必要がない
  • OSにライブラリをインストールする必要がなくなる

といったメリットがあります。

逆にデメリットは、

  • Docker Desktopが快適に動くPCのスペックが必要

といった所でしょうか。

今回はNuxtの開発環境として書いてますが、この方法はdockerfile、docker-compose.ymlで表現できる環境ならどんな言語、構成でも使うことができます。

この記事を書いた人

@takasqr アプリケーション開発が大好きなエンジニア。Vue、Swift、Electrom などでアプリを作って公開している。AWS や Firebase などのクラウドサービスも好き。

インストール

下の3つのソフトとプラグインをインストールします。

Visual Studio Code

Visual Studio Codeはソースコードを編集するためのエディタです。

Remote - Containers

Remote - ContainersはVisual Studio Codeのプラグインです。

Docker Desktop

Docker DesktopはDockerをデスクトップ環境で使うためのソフトです。Windowsでこの開発環境を作るためにはWSL2を有効化しておく必要があります。

Docker Composeを準備

プロジェクト直下に.devcontainerディレクトリを用意してDocker Compose関連のファイルを用意します。

{
  "name": "Litely",
  "dockerComposeFile": [
    "docker-compose.yml"
    ],
  "service": "nuxt",
  "workspaceFolder": "/home/app/",
  "settings": {},
  "extensions": [
    "octref.vetur",
    "dbaeumer.vscode-eslint"
    ]
}

version: '3'

services:
  nuxt:
    build: .
    ports:
      - 3000:3000
      - 5000:5000
      - 5001:5001
      - 8080:8080
      - 8085:8085
      - 9005:9005
    tty: true
    stdin_open: true
    volumes:
      - ../:/home/app

FROM node

RUN echo 'linux update'; \
  apt update && \
  apt upgrade -y

RUN echo 'vue-cli install'; \
  npm install -g @vue/cli

RUN echo 'firebase-tools install'; \
  npm install -g firebase-tools

起動

起動すると自働的にDockerfileがビルドされてdevcontainer.jsonのworkspaceFolderで指定したパスでVSCodeのターミナルが起動します。

その後はnpm run devとかを使いながら開発していきます。

参考

Developing inside a Container | Visual Studio Code