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.

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

build:
 context:Dockerfile path
 dockerfile:file name

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.

FireShot Capture 133 - app - 192.168.33.10.png

Recommended Posts

Easily build a Vue.js environment with Docker + Vue CLI
Create a Vue3 environment with Docker!
Build a Node.js environment with Docker
Build environment with vue.js + rails + docker
Build a PureScript development environment with Docker
Build a Wordpress development environment with Docker
Build a Laravel / Docker environment with VSCode devcontainer
Build a WordPress development environment quickly with Docker
Build docker environment with WSL
[Note] Build a Python3 environment with Docker in EC2
Build Couchbase local environment with Docker
Build a Tomcat 8.5 environment with Pleiades 4.8
Build Rails environment with Docker Compose
Build docker + laravel environment with laradock
How to build [TypeScript + Vue + Express + MySQL] environment with Docker ~ Express ~
Build a Node-RED environment with Docker to move and understand
Build a SPA for Laravel 6.2 / Vue.js / Nginx / Mysql / Redis with Docker
How to build [TypeScript + Vue + Express + MySQL] environment with Docker ~ MySQL edition ~
Create a MySQL environment with Docker from 0-> 1
Build a WAS execution environment from Docker
How to build Rails + Vue + MySQL environment with Docker [2020/09 latest version]
Build a development environment for Django + MySQL + nginx with Docker Compose
[Docker] Build Jupyter Lab execution environment with Docker
Build an environment with Docker on AWS
How to build [TypeScript + Vue + Express + MySQL] environment with Docker ~ Sequelize ~
Build TensorFlow operation check environment with Docker
How to build Rails 6 environment with Docker
Build a simple Docker + Django development environment
I tried to build a Firebase application development environment with Docker in 2020
[Copy and paste] Build a Laravel development environment with Docker Compose Part 2
How to build a Ruby on Rails development environment with Docker (Rails 6.x)
Build a local development environment for Rails tutorials with Docker (Rails 6 + PostgreSQL + Webpack)
[Copy and paste] Build a Laravel development environment with Docker Compose Participation
How to build a Ruby on Rails development environment with Docker (Rails 5.x)
Template: Build a Ruby / Rails development environment with a Docker container (Ubuntu version)
Template: Build a Ruby / Rails development environment with a Docker container (Mac version)
Build a simple Docker Compose + Django development environment
[Win10] Build a JSF development environment with NetBeans
Prepare a scraping environment with Docker and Java
Build a development environment for Docker, java, vscode
Build mecab (NEologd dictionary) environment with Docker (ubuntu)
[Rails] How to build an environment with Docker
[First team development ②] Build an environment with Docker
Create a Spring Boot development environment with docker
Build a Java development environment with VS Code
How to build an environment of [TypeScript + Vue + Express + MySQL] with Docker ~ Vue edition ~
Build a development environment to create Ruby on Jets + React apps with Docker
How to build docker environment with Gradle for intelliJ
Build an environment of Ruby2.7.x + Rails6.0.x + MySQL8.0.x with Docker
Build Docker + Laravel PHP + Vue.js development environment in 5 minutes
[Note] Create a java environment from scratch with docker
Build Java development environment with WSL2 Docker VS Code
Build Rails (API) x MySQL x Nuxt.js environment with Docker
[Docker] Build a Wordpress environment locally (Win, Mac) quickly
[Environment construction] Build a Java development environment with VS Code!
Build WordPress environment with Docker (Local) and AWS (Production)
Try to build a Java development environment using Docker
[2021] Build a Docker + Vagrant environment for using React / TypeScript
[Rails] [Docker] Copy and paste is OK! How to build a Rails development environment with Docker
Build a local development environment for Open Distro for Elasticsearch with multiple nodes using Docker
How to quit Docker for Mac and build a Docker development environment with Ubuntu + Vagrant