Dockerでローカル環境を汚さずにNuxt.jsを始めてみる

試した環境

Docker for windows (windows10)

docker-compose.ymlの記述

docker-compose.yml

version: "3"
services: 
  web:
    build: 
      context: ./
    privileged: true
    volumes:
      - "./:/usr/share/nginx/html"
    ports:
      - 80:80
      - 3000:3000
    container_name: "nuxt" # コンテナ名は適当に

Dockerfileの記述

Dockerfile

FROM centos:7.4.1708

RUN yum -y update

RUN yum -y install epel-release
RUN yum -y install http://rpms.remirepo.net/enterprise/remi-release-7.rpm

RUN yum -y upgrade
RUN yum -y install nginx

RUN curl -sL https://rpm.nodesource.com/setup_9.x | bash -
RUN yum install -y gcc-c++ make
RUN yum install -y nodejs

RUN npm install -g vue-cli
RUN npm install -g nuxt
RUN npm install -g create-nuxt-app

ENV HOST 0.0.0.0

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

WORKDIR /usr/share/nginx/html

Dockerfileのbuild・docker-composeの立ち上げ・webコンテナに入る

docker-compose.ymlの同ディレクトリで以下を実行

docker-compose build
docker-compose up -d
docker-compose exec web bash

コンテナ内での操作

create-nuxt-app <任意のディレクトリ名>
cd <任意のディレクトリ名>
npm install
npm run dev

「create-nuxt-app <任意のディレクトリ名>」実行時に
色々選択肢が出てきますが、とりあえずNuxtアプリを作りたい場合は全てEnterを押す。
http://localhost:3000
にアクセスしてデフォルト画面が出れば、いったんは構築完了。

チュートリアルとか参考とか

https://www.youtube.com/watch?v=nteDXuqBfn0&t=606s
を始めるまでに時間がかかったので。

https://ja.nuxtjs.org/guide/installation/
定番の公式ドキュメント

更新

もっと簡単にDockerでNuxt.jsを始めてみる(続Dockerでローカル環境を汚さずにNuxt.jsを始めてみる)
続編を書きました