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を始めてみる
Ubuntuに最新のNode.jsを難なくインストールする