docker-compose安装nginx实现vue项目部署

1. docker-compose安装nginx

version: '3'
services:
	nginx:
    restart: always
    container_name: mynginx
    image: nginx
    ports:
      - 80:80
      - 8081:8081
      - 8082:8082
      - 8083:8083
      - 443:443
    volumes:
      # 有可能会出现不能挂载，这个时候用手动拷贝配置文件就行
      - /home/docker-compose/docker_container/nginx/nginx.conf:/etc/nginx/nginx.conf
      # vue项目存放路径(其实我也不明白为什么挂载这里要写两次存放路径,
      #按照我的理解,冒号后面应该是容器内的路径,但是不这样写,我成功不了,有大佬路过求指点!!!)
      - /home/blog/vue:/home/blog/vue
      # 这是我的文件上传路径,可以不要
      - /home/blog/upload:/home/blog/upload
    environment:
      - NGINX_PORT=80
      - TZ=Asia/Shanghai
    privileged: true

2. 编写nginx.conf文件

events {
    worker_connections  1024;
}


http {
     include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    client_max_body_size     50m;
    client_body_buffer_size  10m; 
    client_header_timeout    1m;
    client_body_timeout      1m;

    gzip on;
    gzip_min_length  1k;
    gzip_buffers     4 16k;
    gzip_comp_level  5;
    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;

server {
  listen 80;
  server_name 121.36.198.90;
  location / {
    root /home/blog/vue/protal;
    index index.html index.htm;
    try_files $uri $uri/ /index.html;
  }
  location ^~ /api/ {
    proxy_pass http://121.36.198.90:8211/;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  }
}
server {
  listen 8081;
  server_name 121.36.198.90;
  location / {
    root /home/blog/vue/admin;
    index index.html index.htm;
    try_files $uri $uri/ /index.html;
  }
  location ^~ /api/ {
    proxy_pass http://121.36.198.90:8211/;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  }
}
server {
  listen 8082;
  server_name 121.36.198.90;
  location / {
    proxy_pass http://121.36.198.90:8211/websocket;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "Upgrade";
    proxy_set_header Host $host:$server_port;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
  }
}
server {
  listen 8083;
  server_name 121.36.198.90;
  location / {
    root /home/blog/upload/;
  }
  }
}

2. 前端项目打包后将dist文件移至对应目录