Create a Vue3 environment with Docker!

Introduction

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.

Prerequisites

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!

environment

macOS Catalina : 10.15.7 Visual Studio Code : 1.42.1

Terminal

$ docker --version
Docker version 19.03.13
$ node --version
v14.14.0
$ npm --version
6.14.8

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.

Terminal

$ sudo npm uninstall vue-cli -g

Install new version

Reinstall the new version.

Terminal

$ sudo npm install -g @vue/cli

(Abbreviation)

$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

dockerApp
├──docker-compose.yml ← not created
└──vue
├── 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.

Terminal

$ 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 ↑ key↓key and confirm with the ʻEnter` key)

Terminal

? 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.

Terminal

$ npm run serve

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

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.

Dockerfile

FROM node:14.14.0

WORKDIR /vue_app

RUN npm install

COPY ./vue_app/ .

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

• FROM node: 14.14.0: Docker Select the image on which to base the image. After :, specify the version. Is it safe to align with the local environment?
• WORKDIR / vue_app: Specify the directory to work in the container with an absolute path. If the specified directory does not exist, it will be created automatically.
• RUN npm install: Install npm.
• COPY ./vue_app/ .: Copy the source. Describe in the order of [Source path of local environment] and [Path to be placed in container].
• CMD ["npm", "run", "serve"] : Start Vue server.

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.

Terminal

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

• -t myvueapp: 0.0.1: Can be tagged. Let's add it because it will make the subsequent operations easier. You can specify the versions by separating them with :.
• .: Specifies the path where Dockerfile is located.

After building, check if the image is created.

Terminal

$ 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.

Terminal

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

• --name vue_app_container: Starts with the name vue_app_container. As with building the container image, specifying the image name makes it easier to manage, so specify it.
• --rm: Automatically deletes the container when it is stopped.
• --it: It inputs and outputs terminal commands nicely.
• -d: Run the container in the background.
• -p 8080: 8080: Forwards the local port to the container's port.
• vueapp: 0.0.1: Starts version 0.0.1 of the vueapp image.

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

Confirmation of startup on the terminal

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   0.0.0.0:8080->8080/tcp   vue_app_container

Stop it with the docker stop command.

Terminal

docker stop vue_app_container

Create docker-compose

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

docker-compose.yml

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

• build: Specify the directory where dockerfile is located.
• ʻImages: Specify the image name. You can specify the version after :`.
• container_name: Specify the container name.
• ports: Specify port forwarding.

Launching a container using docker-compose

Start with the docker-compose up command.

Terminal

$ docker-compose up　-d

• -d: Starts in the background.

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

It's working properly!

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

Terminal

$ 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.

vue/vue_app/src/components/HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>
    <h3>Installed CLI Plugins</h3>
    <ul>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
    </ul>
    <h3>Essential Links</h3>
    <ul>
      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
    </ul>
    <h3>Ecosystem</h3>
    <ul>
      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
    </ul>
    <div>
Postscript!
    </div>
  </div>
</template>

Start after hitting the docker-compose build command.

Terminal

$ docker-compose build

(Abbreviation)

$ docker-compose up　-d

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 ...