【Docker】前后端分离前端工程构建镜像

最新推荐文章于 2026-05-18 17:19:18 发布

原创最新推荐文章于 2026-05-18 17:19:18 发布 · 904 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端 #docker #nginx #镜像 #前后端分离

云原生专栏收录该内容

10 篇文章

订阅专栏

前端工程构建镜像的思路

前端工程编译后会生成dist目录
dist下的静态文件全部放到nginx下
访问nginx的根路径/，加载前端资源
后端设置上下文content-path，这样后端接口有一个统一的前缀
前端根据/content-path路由转发到后端
nginx也是根据/content-path转发到后端

准备前端镜像需要的nginx转发配置文件

创建文件default.conf.template，内容如下

upstream demo {
    # 可以通过环境变量设置指定后端地址，比如DEMO_SERVER=127.0.0.1
    server ${DEMO_SERVER};
}

# 开启gzip
gzip on;
# 启用gzip压缩的最小文件；小于设置值的文件将不会被压缩
gzip_min_length 1k;
# gzip 压缩级别 1-10 
gzip_comp_level 2;
# 进行压缩的文件类型。
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;
# 是否在http header中添加Vary: Accept-Encoding，建议开启
gzip_vary on;
# 隐藏nginx版本号
server_tokens off;

server {
	  # 1024以下的端口需要root权限，如果要以非root用户启动需要修改端口大于1024
    listen       8080;
    server_name  localhost;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        proxy_redirect off;
    }

    location /demo {
        proxy_pass http://demo;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

编写前端镜像的Dockerfile

FROM harbor.csair.com/library/nginx:1.22
LABEL maintainer="Tang Heng tangheng@wintelia.com"

COPY ./dist /usr/share/nginx/html
COPY default.conf.template /etc/nginx/templates/

ENV APP_USER=nginx

RUN chown -R $APP_USER.$APP_USER /usr/sbin/nginx /usr/lib/nginx /etc/nginx /usr/share/nginx /var/cache/nginx
RUN touch /var/run/nginx.pid
RUN chown $APP_USER.$APP_USER /var/run/nginx.pid

USER $APP_USER

CMD ["nginx", "-g", "daemon off;"]

执行docker构建命令

default.conf.template和Dockerfile都在前端工程的根路径下面

执行以下命令

docker image build --tag harbor.demo.com/demo/demo-front:latest .
docker image push harbor.demo.com/demo/demo-front:latest

这样镜像就构建好了，最后会push到私有harbor仓库，如果有公有云镜像仓库，也可以直接push到云上。