Easily build a Vue.js environment with Docker + Vue CLI

Overview

Easily install Vue CLI with docker and build a vue development environment (* I created a Docker environment on Vagrant and worked there, but I will omit it this time)

file organization

vue
 ├ src
│ ├ app → Here is the source code of vue
 │  └ scripts
 │     └ startup.sh → Script you want to execute when the container starts
 ├ Dockerfile
 └ docker-compose.yml

Preparation of Dockerfile

First, prepare a Dockerfile.

FROM node:lts-alpine

WORKDIR /src                                                                                                                                                                                                

#Run on image creation Install Vue CLI
RUN npm install -g @vue/cli

#Copy sh file to container
#This time, start up what you want to execute when starting the container.Described collectively in sh (described later)
COPY ./src/scripts/startup.sh /scripts/startup.sh

#sh file permission change
RUN chmod +x /scripts/*

#Execute at the timing of container startup This is commented out first
#ENTRYPOINT ["/scripts/startup.sh"]

WORKDIR /src/app

FORM Specify the base image name This time I used lightweight alpine

WORKDIR Specify the working directory in the container.

RUN Specify the command to be executed when building the image. Here we have the Vue CLI installed.

COPY Add files to the image. This time, I want to put together the scripts I want to execute when starting the container in one file, so Copy this file to the container. (The contents of the script will be described later)

ENTRYPOINT Executed when the container is started (docker start, docker run, etc.). Here, it is specified to execute startup.sh copied above.

Prepare the script you want to execute when starting the container

Prepare the startup.sh specified in the Dockerfile earlier. Since I want to start the application at the same time as starting the container, I am trying to execute npm install and npm run serve inside the container.

src/scripts/startup.sh

#!/bin/sh
                                                                                                                                                                                                            
#package.Install the package described in json
echo "npm install..."
npm install

#Launch the app
echo "npm run serve"
npm run serve

Prepare docker-compose.yml

docker-compose.yml

version: '3' 
services:                                                                                                                                                                                                   
  app:
   build: .
   ports:
    - 8080:80
   volumes:
    - ./src:/src
    - vue-cli-node-modules-volume:/src/app/node_modules
volumes:
  vue-cli-node-modules-volume:

version Format version of docker-compose.

services Describe the definition of a service (think of it as a container). In the above example, various settings are made with the service name app.

• build

Specify the path of Dockerfile. You can also specify as follows.

build:
 context:Dockerfile path
 dockerfile:file name

• ports Specifying the port. In the above example, 8080 of the Docker host is specified as 80 of the container.

• volumes ./src:/src Synchronize the host's src directory and below with the src in the container.

vue-cli-node-modules-volume:/src/app/node_modules Specify what you do not want to copy to the host side. The volume vue-cli-node-modules-volume to put node_modules is specified, and node_modules is out of synchronization. Volumes are described below.

volumes Specify the volume used by the container. This time it's named vue-cli-node-modules-volume. If the volume does not exist, it will be created, so you do not need to create it first.

That's all for preparation! !!

Image construction

Based on the Dockerfile created first, build an image with the following command.

Terminal

$ docker-compose build

Just in case, make sure that the image is created.

Terminal

 $ docker images
REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE
vue_app             latest              784a3fd0ee9a        1 hours ago         433MB

Project creation

Create a project with the following command. Specify the service name app.

Terminal

$ docker-compose run app vue create .

Create a project in the current directory. Since it was described as WORKDIR/src/app at the end of the Dockerfile, it will be created in the app directory. (* You will be asked variously, but please select as appropriate and create a project) When completed successfully, your application should be in vue/src/app on your host.

Dockerfile fix

Before starting the container, uncomment the part that was commented out earlier.

Dockerfile

#Execute at the timing of container startup This is commented out first
ENTRYPOINT ["/scripts/startup.sh"]

The reason I comment it out first is that when I build the image above, the project file doesn't exist, so it doesn't make sense to run npm run serve.

Image reconstruction

I modified the Dockerfile, so I'll rebuild it.

Terminal

$ docker-composer build

Now when you start the container, npm install and npm run serve will run.

Container startup

Finally start the container. You can start it in the background by adding the -d option. If you remove the option, you can see that the script is running with the npm install ... and npm run serve that you echoed in startup.sh.

Terminal

$ docker-compose up -d

By the way, if you try to enter the container with the following command, you can confirm that the project under src and startup.sh are synchronized.

Terminal

$ docker-compose exec app 

Check with browser

If you enter the host side port (8080 this time) specified in docker-composer.yml and check it with a browser, the following page should be displayed safely.