preface

Vue projects built using vue-CLI scaffolding can be used at development time

npm run server
Copy the code

Develop happily, use devServer.proxy to complete the proxy configuration when the back-end interface needs cross-domain access.

How do you package your project and release it to production?

The following will use Docker+Nginx method to complete the release of the front-end project, and use Nginx reverse proxy to complete the cross-domain support.

Add the Dockerfile file to the project root directory

As follows:

FROM node:latest as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY ./ .
RUN npm run build

FROM nginx as production-stage
RUN mkdir /app
COPY --from=build-stage /app/dist /app
COPY nginx.conf /etc/nginx/nginx.conf
Copy the code

Add the. Dockerignore file to the project root directory

**/node_modules
**/dist
Copy the code

Setting the.dockerignore file prevents node_modules and other intermediate build artifacts from being copied to the image and causing build problems.

Add the Nginx configuration file to the project root directory

As follows:

user  nginx;
worker_processes  1;
error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;
events {
  worker_connections  1024;
}
http {
  include       /etc/nginx/mime.types;
  default_type  application/octet-stream;
  log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                    '$status $body_bytes_sent "$http_referer" '
                    '"$http_user_agent" "$http_x_forwarded_for"';
  access_log  /var/log/nginx/access.log  main;
  sendfile        on;
  keepalive_timeout  65;
  server {
    listen       80;
    server_name  localhost;
    location / {
      root   /app;
      index  index.html;
      try_files $uri $uri/ /index.html;
    }

    Proxy configuration to solve cross-domain problemsThe location/auth {proxy_pass http://36.155.113.204:19999; } error_page 500 502 503 504 /50x.html; location = /50x.html { root /usr/share/nginx/html; }}}Copy the code

Compile the mirror

Open Terminal Execution

docker build . -t my-app
Copy the code

Run the mirror

docker run -d -p 8080:80
Copy the code

Browser access

http://localhost:8080/
Copy the code