Said in the previous

I searched a lot of tutorials of Docker vue project deployment on the Internet, many of which are about packing the NPM run build of THE VUE project locally and uploading it to our warehouse, then pulling our code to the server, obtaining dist file, and then mounting the file into the DockR container. In fact, this operation should be defective, we should also put the packaging operation into the docker image to operate.

Deployment steps

Create a new Dockerfile under the project root directory:

  # resum Dockerfile

  # specify node image dependencies for installation and packaging of the project
  FROM node:10.16.0 AS builder
  # set the working directory of the container to /app.
  WORKDIR /app 
  COPY package.json /app/ 
  RUN npm config set registry "https://registry.npm.taobao.org/" \
      && npm install
  
  COPY . /app   
  RUN npm run build 

  # Specify nginx configuration project, --from= Builder means to extract the compilation result from the last build (from node: Alpine as Builder), i.e. to put the newly generated dist into nginx
  FROM nginx
  COPY --from=builder app/dist /usr/share/nginx/html/
  COPY --from=builder app/nginx.conf /etc/nginx/nginx.conf

  Expose container port 80
  EXPOSE 80
Copy the code

As you can see, here I’ve also put the packaging operation into Dokcerfile.

COPY --from=builder app/dist /usr/share/nginx/html/
Copy the code

This command is to place the dist file we generated in the image into the nginx Web directory in the container.

COPY --from=builder app/nginx.conf /etc/nginx/
Copy the code

This command overwrites the nginx configuration file by copying the nginx.conf file from our project directory to the nginx configuration file directory in the container. nginx.conf:

 #user nobody;
 worker_processes  1;
 events {
     worker_connections  1024;
 }
 http {
     include       mime.types;
     default_type  application/octet-stream;
     sendfile        on;
     keepalive_timeout  65;

     #gzip on;
     gzip on;
     gzip_min_length  5k;
     gzip_buffers     4 16k;
     # gzip_http_version 1.0;
     gzip_comp_level 3;
     gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
     gzip_vary on;
     
     Set your resume items
     server {
         listen  80;
         server_name www.xieyezi.com;
         location / {
             root /usr/share/nginx/html;   # site directory
             index index.html index.htm;   # Add attributes.
         }
     
         location = /50x.html {
             root/usr/share/nginx/html; }}}Copy the code

Go to your server (ubuntu 18.04 is mine) and create a Web directory under the root directory. Then go to that directory and use Git to pull our project code into it.

  1. Clone’s own projects:git clone xxxx;
  2. In the root directory of the project, create a new text file:.dockerignore:
 .git
 node_modules
 npm-debug.log
Copy the code

This file will exclude the files in the above three paths, telling Docker not to package these three into the image file. 3. Create an image

Docker image build-t [imageName]:1.0Copy the code

After making the image, we can run our image against the container:

docker run -p 8080:80 -d --name [containerName] [iamgeName]
Copy the code

Then enter the docker ps command on the console to see the container information we just started. Then enter the domain name to test, normal operation.