How to deploy Vue project using Docker image + nginx

1. Packaging Vue project

Enter the following name in the developed vue project and package it to generate a dist folder

yarn build / npm run build

At this point, there will be an extra folder in the root directory: the dist folder, which contains what we want to publish.

If you transfer the entire dist directory to the server and deploy it as a static resource site, you can directly access the project.

2. Get the nginx image

nginx is a high-performance HTTP and reverse proxy server. Here we use the nginx image as the basis to build our vue application image.

Type in the terminal:

docker pull nginx

You can get the nginx image.

A Docker image is a special file system that, in addition to providing the programs, libraries, resources, configurations, and other files required for the container to run, also contains some configuration parameters prepared for runtime (such as anonymous volumes, environment variables, users, etc.). Images do not contain any dynamic data, and their contents will not be changed after they are built.

Enter the following command in the terminal to see the nginx image

docker image ls

The mirroring result is as follows:

3. Create nginx config configuration file

Create an nginx folder in the project root directory and create a new file default.conf in the folder

server {
  listen 80;
  server_name localhost;

  #charset koi8-r;
  access_log /var/log/nginx/host.access.log main;
  error_log /var/log/nginx/error.log error;

  location / {
    root /usr/share/nginx/html;
    index index.html index.htm;
    try_files $uri $uri/ /index.html;
  }

  #error_page 404 /404.html;

  # redirect server error pages to the static page /50x.html
  #
  error_page 500 502 503 504 /50x.html;
  location = /50x.html {
    root /usr/share/nginx/html;
  }
}

Note ⚠️: If vue-router is using history mode, try_files $uri $uri/ /index.html; is very important! ! !

Because our application is a single-page client application, if the background is not configured correctly, when the user accesses the address in the browser, 404 will be returned.

Therefore, you need to add a candidate resource on the server side to cover all situations. If the URL does not match any static resource, the same index.html page should be returned. This page is the page that your app depends on.

The above file defines the homepage as /usr/share/nginx/html/index.html, so we can put the constructed index.html file and related static resources into the /usr/share/nginx/html directory later.

4. Create a Dockerfile

# Set the base image FROM nginx
# Define the author MAINTAINER lihui <[email protected]>
#Copy the contents of the dist file to the /usr/share/nginx/html/ directory COPY dist/ /usr/share/nginx/html/
#Replace the default configuration in the nginx image with the local default.conf configuration COPY nginx/default.conf /etc/nginx/conf.d/default.conf

5. Build a Vue application image based on the Dockerfile

Run the following command, and make sure not to miss the last “.”

docker build -t test .

-t is used to name the image, test is the name of the generated image, and . is used to build the image based on the Dockerfile in the current directory.

The vue-based image is generated!

The above is the detailed content of the method of deploying Vue project with Docker image + nginx. For more information about Docker deployment of Vue project, please pay attention to other related articles on 123WORDPRESS.COM!