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

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 をインストール

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

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

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

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

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

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

Dockerでbuildする

ubuntuをインストール

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

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コンテナに入ります。

docker exec -it miiiii-ubuntu /bin/bash

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

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

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

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

sudo

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

curl

sudo apt install curl

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

yarn をインストール

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

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

errorが出ました。

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 をインストールしてエラーは出なかったため、以下のコマンドできちんとインストールされているか確認します。

yarn --version

error:

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

課題

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

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