在我工作前，團隊 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 吧...