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

素颜马尾好姑娘i 2023-10-10 18:52 46阅读 0赞

## 前端工程构建镜像的思路 ##

*  前端工程编译后会生成`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`到云上。