Nginx部署前段VUE---docker-compose编排方式

Dear 丶 2022-12-12 04:40 193阅读 0赞

# Nginx部署前端VUE—docker-compose编排方式 #

前段时间和甲方申请的机器到位了，目前有一台16核64g机器用于测试环境部署博客城市的微服务项目。全部使用docker-compose编排。后端就像之前的写的博客那样进行编排，前段用nginx进行部署。**因为vue跨越问题**，使用nginx转发的时候也遇到一些坑，再次记录一下。

往期文章：

1.  [Dokcer简介与安装以及Springcloud部署][Dokcer_Springcloud]
2.  [Docker Compose编排部署微服务项目][Docker Compose]

### 文章目录 ###

*  Nginx部署前端VUE---docker-compose编排方式
 *   *  1. 后端微服务部署
     *  2. 前端VUE部署
     *  3.结语

## 1. 后端微服务部署 ##

大体和[Dokcer简介与安装以及Springcloud部署][Dokcer_Springcloud] 介绍的一样。  
只不过有两个docker-compose的yml文件，docker-compose-env.yml 和 docker-compose-pook.yml

1.  **docker-compose-pook.yml ------>编排后端微服务项目**

version: '3'
    services:
      boke-packageserver:
        image: boke/boke-packageserver
        build: ./boke-packageserver
        container_name: boke-packageserver
        ports:
          - 13330:13330
        volumes:
          - /etc/localtime:/etc/localtime:ro 
          - /pook/PackageWebClient/client/android:/pook/PackageWebClient/client/android # 打包路径映射(读取宿主机文件)
          - /pook/PackageWebClient/data:/pook/PackageWebClient/data #  文件路径映射(读取宿主机文件)
        external_links:  
          - nacos:nacos  
        restart: always
      boke-official:
        image: boke/boke-official
        build: ./boke-official
        container_name: boke-official
        ports:
          - 9000:9000
        volumes:
          - /etc/localtime:/etc/localtime:ro
        external_links:  
          - nacos:nacos        
        restart: always
      boke-authcenter:
        image: boke/boke-authcenter  
        build: ./boke-authcenter  
        container_name: boke-authcenter  
        ports:
          - 8899:8899
        volumes:
          - /etc/localtime:/etc/localtime:ro
        external_links:  
          - nacos:nacos      
        depends_on:
          - boke-official
        restart: always
      boke-gateway:
        image: boke/boke-gateway
        build: ./boke-gateway
        container_name: boke-gateway
        ports:
          - 8888:8888
        volumes:
          - /etc/localtime:/etc/localtime:ro
        external_links:  
          - nacos:nacos        
        depends_on:
          - boke-authcenter

**docker-compose-env.yml------>微服务需要的中间件等**  
mysql和redis用的是阿里云的，这里用到nacos和nginx

version: '3'
    services:
      nginx:
        image: docker.io/nginx
        container_name: nginx 
        restart: always
        volumes:
          - /pook/nginx/html:/usr/share/nginx/html            # html 文件挂载（前面是服务器目录，后面是docker容器目录）
          - /pook/nginx/nginx.conf:/etc/nginx/nginx.conf    # conf  文件挂载
          - /pook/nginx/log:/var/log/nginx                        # 日志  文件挂载
        ports:
          - "80:80"
      nacos:
        image: nacos/nacos-server
        container_name: nacos
        environment:
          - MODE=standalone
        volumes:
          - /mydata/nacos/logs/:/home/nacos/logs
        ports:
          - "8848:8848"

docker-compose -f docker-compose-pook.yml up -d 微服务编排  
docker-compose -f docker-compose-ebv.yml up -d 环境中间件编排

## 2. 前端VUE部署 ##

1.  将前端打好包的vue文件丢到docker映射的服务器目录下  
    即 /pook/nginx/html
2.  修改 nginx.conf 文件  
    这里有个坑，博主微服务项目网管原本是 8888 端口，前端调用我们后台接口 就是 ip:8888,但是这样网页虽然能访问，但是接口会报 跨域问题，出现如：Access-Control-Allow-Origin，大概如下图  
    ![在这里插入图片描述][20201005204916925.png_pic_center]  
    **所以，这样就不能让前段访问 8888 端口，而是也访问ng的80端口，前端接口加上一个统一前缀，用 nginx 进行转发。**  
    比如，原本 前段直接访问 8888 网关，由网关再转发到各个微服务。现在，让前段访问nginx的80端口，写两个 location ：  
    第一个location / ，映射 到 vue的目录。  
    第二个location /pook/ , 凡是请求带 /pook 的 ，全部转发到 8888 的网关服务上去。  
    **这里**， proxy\_pass http://ip(写自己的):8888/ / 不要忘记 。  
    在nginx中配置proxy\_pass代理转发时，如果在proxy\_pass后面的url加/，表示绝对根路径；如果没有/，表示相对路径，把匹配的路径部分也给代理走。  
    即： **希望的 是 前端访问 ip:80/pook/xx 转发到 ip:8888/xx 上去**，所以用的绝对路径。如果不加 / ,就会变成 ip:8888/pook/xx ，多了个 pook 。  
    这里转载一篇关于nginx 的 proxy\_pass 博客 [nginx 之 proxy\_pass详解][nginx _ proxy_pass]，写的十分详细。

nginx.conf

worker_processes  1;
    
    events {
        worker_connections  1024;
    }
    
    
    http {
        include       mime.types;
        default_type  application/octet-stream;
    
        sendfile        on;
    
    	add_header Access-Control-Allow-Origin *;
    	add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
    	add_header Access-Control-Allow-Headers X-Requested-With;
    
        server {
            listen       80;
            server_name  vue;
             
    		 # 用于 vue 页面 
            location / {
                autoindex on;
                root    /usr/share/nginx/html;    # /usr/share/nginx/html docker容器里面的目录
                try_files $uri $uri/ /index.html;  #history 模式
                index  index.html index.htm;
            }
    	    # 用于 接口 访问
            location /pook/ {
    			proxy_pass http://ip(写自己的):8888/;  # 绝对路径，将 ip:80/pook/xx 转发到 ip:8888/xx 上去
    			proxy_redirect default;
            }
        }
    }

## 3.结语 ##

**世上无难事，只怕有心人，每天积累一点点，fighting！！！**  
之前对nginx理解不深，经过这次，以后不管前端后端都可以快速部署了~

[Dokcer_Springcloud]: https://blog.csdn.net/weixin_42437633/article/details/90278932
[Docker Compose]: https://blog.csdn.net/weixin_42437633/article/details/108089427
[20201005204916925.png_pic_center]: /images/20221123/9a1dfdc193714a11b4a3541692b3adf8.png
[nginx _ proxy_pass]: https://blog.csdn.net/u010433704/article/details/99945557