iT邦幫忙

2021 iThome 鐵人賽

DAY 3
0
Software Development

一個新鮮人如何完轉Spring boot與DevOps從0到101系列 第 3

前後端分離

在我工作前,團隊 CICD 中將後端與前端一起打包,每次建構都需要花 9 分鐘。這九分鐘觸發點是改了前端的程式碼但後端程式碼沒改,反之後端改了程式碼但前端沒改,不論怎樣都要九分鐘...。於是我和同仁提出前後端分離的想法,其優勢如下

  1. 前端建構時不必跟後端一起建構,因為他們關注點都不同,因此這可以縮短時間
  2. 除錯變得較方便一點
  3. 因為關注點不同所以開發時,CICD 不必相互等待

https://ithelp.ithome.com.tw/upload/images/20210903/20104688UR3e5ZGgHR.png

上圖是一個前後端分離的構想,在一台主機上,分別建立 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 吧...


上一篇
從設計 docker-compose 開始
下一篇
建構 Spring boot 容器 Image
系列文
一個新鮮人如何完轉Spring boot與DevOps從0到10130

尚未有邦友留言

立即登入留言