In recent years, Docker has become very popular. As a front end, we also need to understand it, know what problems it solves and what is available to us.

Today I will use the Vue CLI to create a project, using the Docker, Docker Compose container to develop and deploy a Vue project.

We will achieve:

1. The development environment supports hot overloading of code

2. Configure multiple builds for mirroring in the production environment

The version I used

Docker: 20.10.5

Vue – CLI: 4.5.9

Node: v12.6.0

Source: Github: github.com/cmdfas/dock…

Project creation

Global Installation of Vue CLI:

npm install -g @vue/cli
Copy the code

Create a new Vue project, (select vue-Router, history mode, useful later)

vue create my-app
cd my-app
Copy the code

The development environment

Docker

Create a Dockerfile file in the project root directory

RUN NPM install # RUN CMD [" NPM ", "run", "serve"]Copy the code

Create the.dockerignore file

node_modules
.git
.gitignore
Copy the code

Build the Docker image

docker build -t my-app:dev .
Copy the code

run

docker run -v ${PWD}:/app -v /app/node_modules -p 8081:8080 -rm my-app:dev
Copy the code

Tips:

Docker run creates a container based on the my-app:dev image and runs it

-v ${PWD}:/app Mounts the current project directory to the /app folder in the container

For Windows users, ${PWD} may not be supported. Use an absolute path instead

-v /app/node_modules this is necessary because we want to use the node_modules dependency in the container. We have already mounted the project directory ${PWD}:/app, so we need to create this anonymous volume to prevent the use of the project directory node_modules.

4. -P 8081:8080 maps 8080 in the container to 8081 on the current machine

5.-rm The container will be deleted after exiting

Then we go to http://localhost:8081/ and try to modify the code in SRC/app.vue. The browser will refresh automatically, triggering a hot reload.

Docker Compose

Create the docker-comemage. yaml file in the root directory

version: '3.7'

services:

  my-app:
    container_name: my-app
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - '.:/app'
      - '/app/node_modules'
    ports:
      - '8081:8080'

Copy the code

Then build the image and start the container

docker-compose up -d --build
Copy the code

Also open a browser and visit http://localhost:8081/ to try to modify the code in SRC/app.vue. The browser will refresh automatically, triggering a hot reload.

Stop the docker – compose

docker-compose stop
Copy the code

The production environment

Docker

Create the dockerfile-prod file in the project root directory

# build container
FROM Node: 12.6.0 - alpine as build
WORKDIR /app

COPY package.json .
RUN npm install
COPY . /app
RUN npm run build

# Production container
FROM Nginx: 1.16.0 - alpine
COPY --from=build /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx"."-g"."daemon off;"]
Copy the code

Use the production Dockerfile to build the image

docker build -f Dockerfile-prod -t my-app:prod .
Copy the code

Run the container

docker run -it -p 80:80 --rm my-app:prod
Copy the code

Then go to http://localhost/ or http://your IP

Docker Compose

Create the docker-comement-prod. yaml file in the root directory

version: '3.7'

services:

  my-app-prod:
    container_name: my-app-prod
    build:
      context: .
      dockerfile: Dockerfile-prod
    ports:
      - '80:80'
Copy the code

Run the docker – compose

docker-compose -f docker-compose-prod.yaml up -d --build
Copy the code

stop

docker-compose -f docker-compose-prod.yaml stop
Copy the code

Then go to http://localhost/ or http://your IP

Vue Router history mode Nginx configuration

We switched the route and refreshed the page to find 404, we need to modify the corresponding nginx configuration

Create the nginx configuration folder

└ ─ ─ nginx └ ─ ─ nginx. ConfCopy the code

nginx:conf

server { listen 80; location / { root /usr/share/nginx/html; index index.html index.htm; try_files $uri $uri/ /index.html; } error_page 500 502 503 504 /50x.html; location = /50x.html { root /usr/share/nginx/html; }}Copy the code

We need to add configuration to the new nginx configuration file

RUN rm /etc/nginx/conf.d/default.conf
COPY nginx/nginx.conf /etc/nginx/conf.d
Copy the code

New dockerfile-prod file

# build container FROM node:12.6.0-alpine as build WORKDIR /app COPY package.json Production of container FROM nginx: 1.16.0 - alpine COPY - FROM = build/app/dist/usr/share/nginx/HTML RUN rm/etc/nginx/conf. D/default. Conf COPY nginx/nginx.conf /etc/nginx/conf.d EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]Copy the code

Rebuild the image and run the container or Docker-compose.

You are welcome to discuss your problems.