把三个文件以及前端的 dist 包放在同一个文件夹下，并准备好 nginx 的镜像。
#Dockerfile文件
基础镜像使用Nginx
FROM docker.1ms.run/library/nginx:1.27.0
添加时区环境变量，亚洲，上海
ENV TimeZone=Asia/Shanghai
将前端dist文件中的内容复制到nginx目录
COPY dist /usr/share/nginx/html/
用本地的nginx配置文件覆盖镜像的Nginx配置
COPY default.conf /etc/nginx/conf.d/default.conf
暴露端口
EXPOSE 7071
#docker-compose.yml文件version: '3.9'
services:
#name
asap-frontend-backend:
container_name: asap-frontend-backend
build:
context: .
dockerfile: Dockerfile
image: asap-frontend:1.0
restart: unless-stopped
ports:
外部访问端口
- "7071:7071"
networks:
- asap-frontend-net
#网络
networks:
asap-frontend-net:
driver: bridge
ipam:
config:
- subnet: 192.168.202.0/24
gateway: 192.168.202.1
#default.conf文件
server {
#修改端口
listen 7071;
server_name _;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files uri uri/ /index.html;
}
location /api/ {
#转发到后端 gatway
proxy_pass http://10.104.0.111:10186/;
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;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
#强制重新完整构建镜像，不使用任何之前缓存的文件docker compose build --no-cache
#一键关闭
docker compose down
#一键启动
docker compose up -d