docker+nginx部署前端的dist

docker+nginx部署前端的dist

1、编写Dockerfile：

# 设置基础镜像
FROM nginx:alpine
# 将dist文件中的内容复制到 /app/dist 这个目录下面
COPY dist/  /app/dist
#用本地的 default.conf 配置来替换nginx镜像里的默认配置
COPY default.conf /etc/nginx/conf.d/default.conf

2、编写nginx配置文件default.conf:

upstream backendapi {
    server backend-api:9527;
}

server {
    listen       80;
    server_name  localhost;
    access_log  /var/log/nginx/host.access.log  main;
    error_log  /var/log/nginx/error.log  error;
    location / {
        root   /app/dist;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
  
    error_page   500 502 503 504  /50x.html;
    location /api/ {  # 匹配api接口，进行转发配置
        rewrite  /api/(.*)  /$1  break;
        proxy_pass http://backendapi;  #转发到后端接口
    }

3、制作镜像：

# 把Dockerfile、default.conf、dist放在同级目录下
# 创建容器
docker build -t frontend/web .
# 给容器打上标签
docker tag frontend/web:latest harbor/frontend/web:latest
# 登录harbor容器仓库
docker login harbor
# 输入账号密码
# 推送打上标签的容器到harbor仓库
docker push harbor/frontend/web:latest