Create a Vue3 environment with Docker!


This article describes how to build a Vue3.0 environment using Docker. Since it is a beginner, I would appreciate it if you could point out any mistakes.


You have Docker, node, and npm installed. If you have not installed Docker, please install it by referring to the link below. Maybe it works! Let's get started with Docker!


macOS Catalina : 10.15.7 Visual Studio Code : 1.42.1


$ docker --version
Docker version 19.03.13
$ node --version
$ npm --version

Vue version upgrade

Build the environment of Vue3.0 on the PC. Since the old Vue2.0 was included, uninstall it once and then install the latest version.

Delete old version

Only do this if you have an older version of Vue installed globally.


$ sudo npm uninstall vue-cli -g

Install new version

Reinstall the new version.


$ sudo npm install -g @vue/cli


$vue --version
@vue/cli 4.5.8

Local environment construction

Let's run a project using Vue3.0 locally.

Creating a Vue project in your local environment

Create a working directory. Since we plan to add containers other than Vue later, we assume the following directory structure.

Directory structure

├──docker-compose.yml ← not created
├── Dockerfile ← Not created
    └── vue_app ← Create this folder from now on. Vue work place.
└── ・ ・ ・ ← Here is the source of Vue.

Create a folder for vue_app and create a Vue project.


$ mkdir vue_app        #Directory creation
$ cd vue_app           #Move into the directory
$ vue create vue_app   #Create a Vue project

Please give your own directory name and project name.

Hit the command to start the initial settings. You'll be asked if you want to use Vue 2 or Vue 3, so of course choose Vue 3. Select Default (Vue 3 Preview) ([Vue 3] babel, eslint). (Select with the keykey and confirm with the ʻEnter` key)


? Please pick a preset: 
  Default ([Vue 2] babel, eslint) 
❯ Default (Vue 3 Preview) ([Vue 3] babel, eslint) 
  Manually select features 

After a while, the Vue3 project will be created.

Let's check the operation once. Try running the server with the npm run serve command.


$ npm run serve

After starting, try accessing http: // localhost: 8080 /.

Screenshot 2020-10-21 19.38.17.png

It's running properly!

Stop the server with control + c on the terminal.

Container environment construction

Next, we will build a Vue environment with a container.

Creating a Dockerfile

Create Dockerfile in the location described in the directory structure as shown below.


FROM node:14.14.0

WORKDIR /vue_app

RUN npm install

COPY ./vue_app/ .

CMD ["npm", "run", "serve"]

Starting a container using Dockerfile

In the terminal, go to the directory where Dockerfile is located and start the container. First, build the image with the docker build command.


cd {Placed path of Dockerfile}
docker build -t vueapp:0.0.1 .

After building, check if the image is created.


$ docker images
REPOSITORY              TAG                 IMAGE ID            CREATED             SIZE
vueapp                  0.0.1               fc7cabc1fe35        22 minutes ago      1.06GB

It has been created!

Now let's start it with the docker run command.


$ docker run --name vue_app_container --rm -it -d -p 8080:8080 vueapp:0.0.1

After starting, access http: // localhost: 8080 / to confirm the startup.

Confirmation of startup on the terminal


$ docker ps
CONTAINER ID        IMAGE               COMMAND                  CREATED              STATUS              PORTS                    NAMES
388c1dfe015b        vueapp:0.0.1        "docker-entrypoint.s…"   About a minute ago   Up About a minute>8080/tcp   vue_app_container

Stop it with the docker stop command.


docker stop vue_app_container

Create docker-compose

Create docker-compose.yml in the location described in the directory structure as shown below.


version: '3'
    build: ./vue
    image: vueapp:0.0.2
    container_name: "vue_app_container"
      - "8080:8080"

Launching a container using docker-compose

Start with the docker-compose up command.


$ docker-compose up -d

After starting, access http: // localhost: 8080 / to confirm the startup.

Screenshot 2020-10-23 10.22.32.png

It's working properly!

Use the docker-compose down command to terminate the container.


$ docker-compose down

Use the docker-compose build command to reflect file changes in the container. As a test, add it to the last line in the template tag of HelloWorld.vue that was created when the Vue project was automatically generated.


  <div class="hello">
    <h1>{{ msg }}</h1>
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="" target="_blank" rel="noopener">vue-cli documentation</a>.
    <h3>Installed CLI Plugins</h3>
      <li><a href="" target="_blank" rel="noopener">babel</a></li>
      <li><a href="" target="_blank" rel="noopener">eslint</a></li>
    <h3>Essential Links</h3>
      <li><a href="" target="_blank" rel="noopener">Core Docs</a></li>
      <li><a href="" target="_blank" rel="noopener">Forum</a></li>
      <li><a href="" target="_blank" rel="noopener">Community Chat</a></li>
      <li><a href="" target="_blank" rel="noopener">Twitter</a></li>
      <li><a href="" target="_blank" rel="noopener">News</a></li>
      <li><a href="" target="_blank" rel="noopener">vue-router</a></li>
      <li><a href="" target="_blank" rel="noopener">vuex</a></li>
      <li><a href="" target="_blank" rel="noopener">vue-devtools</a></li>
      <li><a href="" target="_blank" rel="noopener">vue-loader</a></li>
      <li><a href="" target="_blank" rel="noopener">awesome-vue</a></li>

Start after hitting the docker-compose build command.


$ docker-compose build


$ docker-compose up -d
Screenshot 2020-10-23 10.37.19.png

You can see the words "Addition!"!

At the end

I hope it will be helpful for creating a container using Vue. At the end of the previous article, I said that I wanted to write docker-compose with multiple containers added, but in the end it ended up being an article with one container. Next time, next time will surely ...

Recommended Posts

Create a Vue3 environment with Docker!
Create a MySQL environment with Docker from 0-> 1
[Memo] Create a CentOS 8 environment easily with Docker
Create a Spring Boot development environment with docker
Build a Node.js environment with Docker
Easily build a Vue.js environment with Docker + Vue CLI
Create SolrCloud verification environment with Docker
Create Laravel environment with Docker (docker-compose)
[Note] Create a java environment from scratch with docker
I tried to create a padrino development environment with Docker
Create a web environment quickly using Docker
Build a PureScript development environment with Docker
Create Rails 6 + MySQL environment with Docker compose
Create Spring Boot-gradle-mysql development environment with Docker
[Docker] Create Node.js + express + webpack environment with Docker
Build a Wordpress development environment with Docker
Create a Privoxy + Tor environment instantly using Docker
[Windows] [IntelliJ] [Java] [Tomcat] Create a Tomcat9 environment with IntelliJ
Build a Laravel / Docker environment with VSCode devcontainer
Build a WordPress development environment quickly with Docker
Prepare a scraping environment with Docker and Java
Create a docker environment for Oracle 11g XE
Create a java web application development environment with docker for mac part2
[Docker] Create Elasticsearch, Kibana environment!
Create a playground with Xcode 12
[Docker] Rails 5.2 environment construction with docker
Build docker environment with WSL
React environment construction with Docker
Create an E2E test environment with Docker x Cypress
[Note] Build a Python3 environment with Docker in EC2
Create Chisel development environment with Windows10 + WSL2 + VScode + Docker
Build a development environment to create Ruby on Jets + React apps with Docker
Rails + MySQL environment construction with Docker
Node.js environment construction with Docker Compose
Deploy a Docker application with Greengrass
I tried to create a java8 development environment with Chocolatey
Build Couchbase local environment with Docker
I made a development environment with rails6 + docker + postgreSQL + Materialize.
Create a lightweight STNS Docker image
Build a Tomcat 8.5 environment with Pleiades 4.8
Let's create Ubuntu environment with vmware
Environment construction with Docker for beginners
Create RUNTEQ's environment with Windows DockerDesktop
Create a Docker image with the Oracle JDK installed (yum
Build PlantUML environment with VSCode + Docker
Build environment with vue.js + rails + docker
How to build [TypeScript + Vue + Express + MySQL] environment with Docker ~ Express ~
Create a database in a production environment
Build Rails environment with Docker Compose
Operate a honeypot (Dionaea) with Docker
Build a Node-RED environment with Docker to move and understand
[Environment construction with Docker] Rails 6 & MySQL 8
Create exceptions with a fluid interface
Create Rails5 and postgresql environment with Docker and make pgadmin available
Docker command to create Rails project with a single blow in environment without Ruby
Create a Maven project with a command
Build docker + laravel environment with laradock
Procedure for building a Rails application development environment with Docker [Rails, MySQL, Docker]
How to build [TypeScript + Vue + Express + MySQL] environment with Docker ~ MySQL edition ~
Prepare a transcendentally simple PHP & Apache environment on Mac with Docker
(For myself) Try creating a C # environment with docker + code-server, cloud9