前後端分离

在我工作前，团队 CICD 中将後端与前端一起打包，每次建构都需要花 9 分钟。这九分钟触发点是改了前端的程序码但後端程序码没改，反之後端改了程序码但前端没改，不论怎样都要九分钟...。於是我和同仁提出前後端分离的想法，其优势如下

1. 前端建构时不必跟後端一起建构，因为他们关注点都不同，因此这可以缩短时间
2. 除错变得较方便一点
3. 因为关注点不同所以开发时，CICD 不必相互等待

上图是一个前後端分离的构想，在一台主机上，分别建立 Nginx、前端和後端的容器。红色方块 Nginx 负责接收来自 Client 的请求，利用反向代理将请求发送至前端容器或後端容器。

前端搭配一个 Nginx 并配置静态档案。

server {
        listen 80;
        location / {
                root /usr/share/nginx/html;
                index index.html index.htm;
                try_files $uri $uri/ /index.html;
        }
        location ^~ /static/ {
                autoindex off;
                alias /usr/share/nginx/html/static/;
                expires 30d;
    }
}

红色方块 Nginx 容器，反向代理配置，frontend、web_server 都是指向容器名称。

    location / {
      proxy_pass http://frontend;
    }

    location ^~ /api/ {
      proxy_pass http://web_server:8080/;
      proxy_connect_timeout 300s;
      proxy_read_timeout 300s;
      proxy_send_timeout 300s;
      proxy_set_header   Host             $host:$proxy_port;
      proxy_set_header   X-Real-IP        $remote_addr;
      proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
      proxy_set_header Via    "nginx";
    }

今天就这样吧...，明天来个建构 Image 吧...