DockerでVue.jsの環境構築

#環境
* Ubuntu18.04
* docker 18.09.5
* docker-compose 1.20.0
* vue.js 3.6.3

#環境構築
作業用のディレクトリを作成し、そこでdocker-compose.ymlとDockerfileを作成します。
###docker-compose.yml

```
version: "3"
services:
app:
build:
context: ./
privileged: true
volumes:
- "./:/usr/share/nginx/html"
ports:
- 1234:8080
- 3000:3000
container_name: "vuecontainer"
```

###Dockerfile
```
FROM ubuntu:18.04

RUN apt -y update

RUN apt -y upgrade
RUN apt -y install curl
RUN apt -y install nginx

RUN apt install -y nodejs npm
RUN npm install n -g
RUN n stable
RUN apt purge -y nodejs npm

RUN npm install -g @vue/cli

ENV HOST 0.0.0.0

CMD ["nginx", "-g", "daemon off;"]

WORKDIR /usr/share/nginx/html

```

###サービス構築
今回のサービスの名前は「app」になる
```docker-compose.yml```のservicesの```app```のところがサービス名となる

```
$ sudo docker-compose build
```

###コンテナ起動
コンテナを作成し、起動します。

```
$ sudo docker-compose up -d
```
-dをオプションでつけることでバックグラウンドで実行することができます。

###コンテナに入る
以下のコマンドを使うことで指定のコンテナ内に入ることができます。

```
$ sudo docker-compose exec サービス名 実行コマンド
```
今回の場合では以下のコマンドでコンテナ内に入ることができます。

```
sudo docker-compose exec サービス名 実行コマンド
```

コンテナ内で以下のコマンドを入力することでvue.jsのプロジェクトを作成できる。

```
vue create プロジェクト名
cd プロジェクト名
npm run serve
```

これで http://localhost:1234 にアクセスするとデフォルト画面が表示されれば環境構築終了

#参考文献
[Dockerでローカル環境を汚さずにNuxt.jsを始めてみる](https://qiita.com/ProjectEuropa/items/d9ee1b8c96084e3bab55)
[Ubuntuに最新のNode.jsを難なくインストールする](https://qiita.com/seibe/items/36cef7df85fe2cefa3ea)