Dockerを使用してNuxt.jsアプリを作成して実行する

Use Docker to Create and Run a Nuxt.js App

このチュートリアルではUbuntu 19.04を使用しています。

I`m using Ubuntu 19.04 for this tutorial.

一時コンテナを実行してnuxt.jsアプリを作成します

run temporary container to create nuxt.js app

sudo docker container run -it -v $(pwd):/app -w /app node:12.13.1-alpine /bin/sh

コンテナ内に、「nuxt」と「nuxt-create-app」をインストールします

Inside container, install nuxt and nuxt-create-app

npm install --save nuxt
npm install -g create-nuxt-app

完了したら、Nuxtアプリを作成できます

Once done, you can create the Nuxt app

npx create-nuxt-app <project-name>

それが完了したら、コンテナを「exit」し、プロジェクトフォルダの所有者を変更できます

Once that is done, you can exitthe container, change the owner of the project folder

sudo chown -R myuser:myuser <project-name>

プロジェクトフォルダーに「cd」し、「Dockerfile」と「docker-compose.yml」の両方を作成します

cd into the project folder and create both the Dockerfile and docker-compose.yml

Dockerfile

FROM node:12.13.1-alpine 

WORKDIR /app

RUN apk update && \
    apk add git && \
    npm install -g npm && \
    npm install -g @vue/cli \ 
    npm install --save nuxt

ENV HOST 0.0.0.0
EXPOSE 3000

問題がないように、Dockerコンテナの同じバージョンを最初から使用することを忘れないでください。

Remember to use the same version from the docker container from the beginning, as to not have issues.

docker-compose.yml

version: '3'

services:
  nuxt:
    build: .
    tty: true
    command: npm run dev
    volumes:
      - .:/app
    ports:
      - "3000:3000"

これにより、docker-composeを実行してプロジェクトをビルドおよび実行できます

With this, you can run docker-compose to build and run the project

sudo docker-compose up --build

コンテナーをダウンロードしてイメージをビルドするには、最初にしばらく時間がかかります。一度完了すると、プロジェクトのホームページがURL「localhost：3000」に表示されます

This will take a while the first time, in order to download the container and build the image, once done, you can see the project home page on the url localhost:3000