Setup Vue/Nuxt development with Docker and docker-compose

Goal of this article

Display the welcome page for the Nuxt application.

See below for setting up Next.js. ↓

Setup React.js/Next.js development with Docker and docker-compose

It is very easy to set up a development setup with docker and docker-compose. Node.js 14.15.4 is installed. On top of that, we have Next.js installed.

niwakatech.info

2021.10.04

Development tools to be prepared

• Docker 20.10
• docker-compose 1.27.4
• git 2.25

If you have not installed Docker and docker-compose

MacOS

Install Docker from the official website.

Docker Desktop for Mac

Windows

Setting Up Docker and docker-compose on WSL2

Setting Up Docker and docker-compose on WSL2.Installing WSL2. Installing Docker 20.10.1 . Installing docker-compose 1.27.4

niwakatech.info

2021.09.28

Version of Node.js

• Node.js: 14.15.4

Clone the Dockerfile repository

The Dockerfile for Nuxt development is available on github, so please clone it!

GitHub - E-handson/docker-nuxt

Contribute to E-handson/docker-nuxt development by creating an account on GitHub.

github.com

Start a terminal and run the clone command.

$ git clone https://github.com/E-handson/docker-nuxt.git

After the clone is complete, the “docker-nuxt” directory will be created.
Execute the cd command.

$ cd docker-nuxt

You will find docker-compose.yml under the docker-nuxt directory.
The docker-compose command can be executed directly under the directory where docker-compose.yml exists.

Building Docker

First, execute the following command to build the Docker service.

$ docker-compose build

Install the Nuxt application

Execute the following command.

$ docker-compose run --rm nuxt npx create-nuxt-app

You will be asked to configure settings to create a Nuxt app.

Setting the Project Name

? Project name: nuxt_app  

Setting the Programming language

? Programming language: TypeScript

Setting the Package Manager

? Package manager: Yarn　

Setting the UI framework

? UI framework: Vuetify.js #今回はVuetify.jsしました（有名どころだとBootstrap-vue,Buefyあたり）

Setting the Nuxt.js modules

? Nuxt.js modules: Axios - Promise based HTTP client, Progressive Web App (PWA) 

Setting the Linting tools

? Linting tools: ESLint, Prettier

Setting the Testing framework

? Testing framework: Jest

Setting the Rendering mode

? Rendering mode: Single Page App 

Setting the Deployment target

? Deployment target: Static (Static/JAMStack hosting)

Setting the Development tools

? Development tools: jsconfig.json (Recommended for VS Code if you're not using typescript)

Setting the Continuous integration

? Continuous integration: GitHub Actions (GitHub only)

What is your GitHub username

? What is your GitHub username? user

Setting the Version control

? Version control system: Git 

This completes the configuration and installation.
The settings can be changed later.

Running Docker

First, execute the following command to build the Docker service.

$ docker-compose up

I have set “command: yarn run dev” in docker-compose.yml, so when I run docker-compose up, I can immediately see that it is running in the browser.

http://localhost:9000/

localhost

Docker Container Configuration

Repository configuration

docker-nuxt
├── docker-compose.yml
├── docker
│    └── nuxt
│         └── Dockerfile
└── src

“src” directory does not exist when you do a git clone.
It will be created after Nuxt is installed.

Container configuration

1. nuxt container – Node.js: 14.15.4 installed

nuxt container

This is the container where Nuxt is installed.
The Nuxt source installed in the “/workspace” of the app container is mounted under the local src/ distribution.