t8.dev

🇺🇸

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

公開日:2021/09/15
更新日:2021/10/02

はじめに

心理学を使ったTODOアプリを開発している、@takasqrです。

心理学を使ったTODOアプリ | todo8

心理学を使ったTODOアプリ | todo8

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で表現できる環境ならどんな言語、構成でも使うことができます。

インストール

下の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関連のファイルを用意します。

devcontainer.json
{
  "name": "Litely",
  "dockerComposeFile": [
    "docker-compose.yml"
    ],
  "service": "nuxt",
  "workspaceFolder": "/home/app/",
  "settings": {},
  "extensions": [
    "octref.vetur",
    "dbaeumer.vscode-eslint"
    ]
}
docker-compose.yml
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
Dockerfile
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.jsonworkspaceFolderで指定したパスでVSCodeのターミナルが起動します。

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

参考

Developing inside a Container | Visual Studio Code

関連記事

Nuxt3にBridgeを使って移行してみる【Nuxt2→3】
【サンプル有】@nuxt/contentを1ページでざっくり理解する
【Nuxt】create-nuxt-appをインストールして始める
【サンプル有】@nuxt/i18nで多言語対応する
【サンプル有】Nuxtでhead内にmetaタグを出力する2つの方法
NUXTで作ったWebサイトの表示速度を高速化する

オススメ記事

5年間ほぼ毎日プログラミングの勉強をするためにやったこと
論文と本から学ぶ、プログラミング独学のコツ
目標達成率を高める if thenプランニングとは!?【本とアプリも紹介】