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 を開発環境を建てるだけ](https://qiita.com/kitsuki00/items/ed51dbb254bcc6c94fbd)
- [dockerでnuxt開発環境作成](https://qiita.com/ktaidot/items/764b4f0eb047d90e0bff)
- [【Docker】Nuxtの開発環境をDockerfileとdocker-compose.ymlで構築してみた！](https://rara-world.com/docker-nuxt/)

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

```Dockerfile: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.

```yml: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コンテナの立ち上げ

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

```zsh
$ 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`の各項目はお任せです。

```zsh
$ 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)
```

```zsh
docker-compose up -d
```

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

![スクリーンショット 2020-12-26 0.22.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215341/026d1621-68b5-1fbd-94b3-12f29f4277da.png)

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

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

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

[VS CodeでDocker開発コンテナを便利に使おう](https://qiita.com/Yuki_Oshima/items/d3b52c553387685460b0)の記事に書いている**Remote-Containers**を使うのかなと思っていたんですが...

![スクリーンショット 2020-12-26 0.11.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215341/294ff099-90d9-94b3-23a8-ddfb120ebdcd.png)

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

![スクリーンショット 2020-12-26 0.13.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215341/900b8405-b766-97ef-b9c8-e3635a5cccdc.png)

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

```zsh
$ docker-compose down
```

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

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