Docker で Ubuntu 環境を作り、Nuxt.js を動かしてみる

## Prologue
Nuxt.js で作成したプロジェクトを `Ubuntu` 環境で `build` した際エラーが出ました。
このエラーはlocalでは起こらず、エラー内容の詳細を取得できるか試すため、`Ubuntu` の環境を作って確認しようとしたことがきっかけです。

ここではDockerの初期設定から簡単なNuxt.jsプロジェクトの作成までを行います。
結果としてエラーは環境とは関係なかったため、ここでは言及していません。

## 環境
- macOS: 10.15.2
- terminal: iTerm

- Project概要
    - 言語: Nuxt.js, TypeScript
    - パッケージマネージャ: `yarn`

***

## Docker の初期設定

### Mac の Docker Desktop をインストール

1. 以下からDockerをインストールします。

参考: https://hub.docker.com/editions/community/docker-ce-desktop-mac/

2. インストール後、Docker.appをAppフォルダに移動
3. clickするとアラートが出るためOKをclick
4. sign inを求められるためsign in

ここでアカウントを持っていなければアカウントを作成します。  

- アカウント作成
  - アカウント名、PWD、メールアドレスを入力
  - 名前、職種、会社名等入力後、登録のメールアドレスに確認メールが来ます。
  - メールの指示通り対応して、完了

参考: https://docs.docker.com/docker-for-mac/install/


## Dockerでbuildする

### ubuntuをインストール

- エラーが起こった環境の `Ubuntu` のversionを確認し、今回は `18.04.4` だったため、最新のものをインストールします。  
ターミナルで以下のコマンドを入力。

``` shell
docker version       // dockerがインストールされているか確認
docker pull ubuntu   // ubuntuをインストール
docker images        // イメージ一覧を取得してubuntuがインストールされていることとバージョンを確認

docker run -it -d --name miiiii-ubuntu ubuntu     // ubuntuを起動
docker ps // 起動中のコンテナを確認
```

参考: https://www.sejuku.net/blog/82240

- `Ubuntu` を起動する際名前をつけることができます。今回は `miiiii-ubuntu` としました。
 
### 必要なコマンドの確認

Dockerコンテナに入ります。

``` shell
docker exec -it miiiii-ubuntu /bin/bash
```

コンテナ内に入ったため、以降は `Ubuntu` のコマンドで進みます。

``` shell
cd /usr/src  // /usr/src に移動
mkdir app    // プロジェクトを置くためのディレクトリを作成
cd app       // 作成したディレクトリに移動
```

### `curl` と `sudo` をインストール

エラー解決のため、作業環境を整えていきます。
yarnをインストールするため、`curl` と `sudo` をインストール。

- sudo  

``` shell
find . -name sudo     // sudoコマンドが存在しないことを確認
apt-get update        // update
apt-get install sudo
```

- curl  
 
``` shell
sudo apt install curl
```

参考: https://qiita.com/Sa2Knight/items/bdb6d821a3ac10088289

### yarn をインストール

``` shell
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
```

参考: https://classic.yarnpkg.com/en/docs/install#debian-stable

- errorが出ました。  
 
``` shell
E: gnupg, gnupg2 and gnupg1 do not seem to be installed, but one of them is required for this operation
curl: (23) Failed writing body (577 != 1369)
```

- 解決: エラー内容からパッケージがないということなので、 `gnupg` をインストール

```
apt-get install gnupg
```

再度 `yarn` をインストールしてエラーは出なかったため、以下のコマンドできちんとインストールされているか確認します。  

``` shell
yarn --version
```

error:  

``` shell
bash: yarn: command not found
```


- まだ `yarn` がない。とのことなので `sudo` をつけて、別のコマンドで実行  

```
sudo apt install yarn
```

バージョンが古いためyarnのアップグレードを行います。

```
sudo apt-get update 
sudo apt-get install yarn

yarn -v
1.21.1

```

今度は成功しました。

参考: https://phoenixnap.com/kb/how-to-install-yarn-ubuntu


## Nuxtプロジェクトを作成

\usr\src\app に移動して以下のコマンドを実行

```
yarn create nuxt-app sample
```

error  

```
error semver@7.1.3: The engine "node" is incompatible with this module. Expected version ">=10". Got "8.10.0"
error Found incompatible module.

```

nodeのバージョンが古い、とことなのでバージョンを確認

```
node --version             
v8.10.0
```  

検証したいプロジェクトで使っているバージョン(10.16.0)に合わせます

```
sudo apt install nodejs npm
sudo npm install -g n

sudo n 10.16.0
```
一度 ubuntu から exit する

```
node -v
v10.16.0
```

再度プロジェクトを作成(```yarn create nuxt-app sample```)、成功しました。
あとは通常のNuxtのプロジェクトと同じようにComponentを作ったり等等、問題なく使えました。
今回の目的だった `build` も無事成功。


## Epilogue

- `build` できなかった理由は環境ではなく、依存関係にあるライブラリのバージョン問題でした。
バージョンを最新にすると `ubuntu` 環境でも `build` は成功...。
環境が問題なのか、という部分が今回のDocker立ち上げのキーポイントだったため、今回はここで一旦終了しました。
なぜ環境によってインストールされるバージョンが異なるのか、は時間があれば確認します。

- これまではVirtualBoxをよく使っていたので、初めてDockerを使ってみました。
つまずいたところは特になく、基本公式のドキュメント通りに進めれば問題はないと感じました。
ミニマムなトライ内容でしたが、初心者という壁は超えられたので、これからもっと慣れていこうと思います！

### 課題
- 環境の違いでバージョンが異なってインストールされるのは何故なのか。わかり次第別の記事を書きます。