docker采用nginx部署vue，把后端的端口映射成了前端的端口

在 Docker 中部署前后端分离的应用，可以使用 Nginx 作为反向代理服务器，将前端和后端应用部署在不同的容器中，然后通过 Nginx 配置将后端的端口映射成前端的端口。

下面是一些简单的步骤：

1. 编写 Dockerfile。

编写前端、后端的 Dockerfile，将前端和后端应用打包到 Docker 镜像中。

2. 编写 docker-compose.yml。

在 docker-compose.yml 中指定前端、后端的容器，以及 Nginx 的容器，然后通过 links 或 networks 等方式将容器连接起来。

例如：

   version: '3'
   services:
     frontend:
       build:
         context: ./frontend
       ports:
         - 80:80
     backend:
       build:
         context: ./backend
       ports:
         - 8000:8000
     nginx:
       build:
         context: ./nginx
       ports:
         - 80:80
       links:
         - frontend
         - backend

3. 编写 Nginx 配置文件。

在 Nginx 的配置文件中，配置反向代理服务器，将后端的端口映射成前端的端口。

例如：

   server {
       listen       80;
       server_name  example.com;  # 前端域名
       root         /usr/share/nginx/html;  # 前端目录

       location / {
           try_files $uri $uri/ /index.html;
       }
   }

   server {
       listen       80;
       server_name  api.example.com;  # 后端域名

       location / {
           proxy_pass http://backend:8000;  # 后端实际地址
           proxy_set_header Host $host;
           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;
       }
   }

这里假设前端文件在 `/usr/share/nginx/html` 目录下，后端监听的端口号是 8000。

4. 启动 Docker。

使用 docker-compose 启动 Docker 容器。

   docker-compose up -d

这样就完成了前后端分离应用的部署。在浏览器中访问前端页面，可以输入 `http://example.com`，在浏览器中访问后端 API 接口，可以输入 `http://api.example.com/api/xxx`。

需要注意的是，如果前端和后端使用的是不同的域名，需要在 DNS 解析中添加相应的解析记录，使域名能够正确解析到服务器的 IP 地址。