Nginx|前端工程容器化部署

需求

最大的需求其实还是前端的工程每次调试都需要 npm start 占用内存太大，能有1个多G，加上电脑本身内存就16，应用又是需要多个调试，经常出现爆内存的情况。第一时间想到改动最少的前端进行容器化打包

技术方案

前端目前工程打包完是一个 dist 文件夹，以往部署都是托管在 ng 上进行访问

本地也采用 ng 来进行部署， docker 容器运行 nginx 镜像，通过容器数据卷的方式挂载打包后的 dist 目录到容器内进行转发

整体架构大致如下，我们假设后端的接口全局前缀为 prefix ，部署在 address:port 上

+-------------------+       +-----------------+       +------------------+
|                   |       |                 |       |                  |
|    用户浏览器      |       |     Nginx 容器   |       |   后端服务 (port)|
|                   |       |                 |       |                  |
|  http://localhost:8000 |<->|     :80         |<------>|     :port        |
|                   |       |                 |       |                  |
+-------------------+       +-----------------+       +------------------+

                             | 静态资源请求 / |
                             v                |
                     +-------------------------+
                     |                        |
                     |  提供静态资源          |
                     |  (HTML, CSS, JS等)     |
                     +-------------------------+

                             | API 请求 /prefix/ |
                             v                |
                     +-------------------------+
                     |                        |
                     |  反向代理到后端服务       |
                     |  (http://address:port/prefix/) |
                     +-------------------------+

• 浏览器 8000 端口访问页面，发出请求
• 请求被 nginx 配置文件中定义的 location ^~/prefix 代理，反向代理到后端服务上
• 后端接受请求返回数据给 nginx
• nginx 收到响应后返回给客户端数据

具体实现

启动容器的 Dockerfile

# 使用官方的 Nginx 镜像作为基础镜像
FROM nginx:latest

# 拷贝自定义的 Nginx 配置文件
COPY ./nginx.conf /etc/nginx/conf.d/default.conf

# 暴露 80 端口
EXPOSE 80

# 启动 Nginx
CMD ["nginx", "-g", "daemon off;"]

由于需要转发我们需要进行自定义配置文件

nginx.conf

server {
    listen       80;
    server_name  localhost;

    client_max_body_size 100m;

    # 后端接口的全局前缀
    location ^~/prefix {
    	   # 后端服务的 ip + 端口
        proxy_pass http://address:port;
        proxy_next_upstream error timeout invalid_header http_500 http_503 http_404;
        proxy_connect_timeout 6000s;
        proxy_read_timeout 6000s;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $http_host;
    }

    location / {
        root   /usr/share/nginx/html; # 前端打包后的静态资源位置
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}

其中 location ^~/prefix {} 指定了请求前缀转发，prefix 可以更换为后端接口的全局前缀

proxy_pass http://address:port 中指定后端服务的 ip + 端口

启动容器

# 根据 Dockerfile 构建镜像
docker build -t frontend .
# 1. -p 容器80端口映射到宿主机8000端口进行访问
# 2. -v 挂载 dist 目录到容器指定位置，需要和上面的 nginx.conf location.root 的 value 匹配上
docker run -d -p 8000:80 --name my-frontend-container -v xxx\dist:/usr/share/nginx/html frontend

之后本机访问 localhost:8000 即可访问前端工程

每次更新前端代码，更新 dist 目录包后重启容器即可