Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
41
Help us understand the problem. What is going on with this article?
@ProjectEuropa

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

More than 1 year has passed since last update.

試した環境

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
にアクセスしてデフォルト画面が出れば、いったんは構築完了。

2018-03-20 (1).png

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

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

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

更新

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

41
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ProjectEuropa
PHPとかJavaScriptとか
canly
「店舗に関わる全ての人に、最も信頼されるインフラを創る」 をミッションにGoogleマイビジネスを始めとした複数SNS一括管理SaaS「Canly(カンリー)」というサービスを提供しています。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
41
Help us understand the problem. What is going on with this article?