---
# System prepended metadata

title: 現有架構下切多個前端 app

---

#  現有架構下切多個前端 app



## :book: 遇到的問題
開發 AI Embedded 時，遇到 line liff 套件噴錯，影響UI無法嵌入致 iframe 下。
![](https://hackmd.io/_uploads/SJeGOdhBh.png)

### 原因
Omnisegment bundle 裡面有一堆 ai popup, Embedded 頁面用不到的東西。

## :book: 解法思路
1. 再弄一個 next.js 出來。 （但整個架構複雜&麻煩，又要想 build步驟 和 如何deploy
2. 單點突破，遇到問題一個一個解。 （未來無限量的bug吃到飽
3. 想辦法在現有架構上將前端做切分。


## :book: 現有 Front-End Artitechture

#### :small_blue_diamond: 並非前後端分離

![](https://hackmd.io/_uploads/B18eF0iH2.png)

## :book: 會面對什麼問題

不同目的前端頁面混在一起，統一由 site.html serve。
#### :small_blue_diamond: Omnisegment Application (Sass 服務)
#### :small_blue_diamond: AI page（Embedded, Popup）(To C頁面，在獨立的 iFrame環境下執行)
#### :small_blue_diamond: Liff page (To C頁面，在 line browser 環境執行)
#### :small_blue_diamond:  健康報表頁面 (CS 後台)



## :pencil: Webpack Multple Entry
https://webpack.js.org/concepts/entry-points/#multi-page-application

* 模組化開發：可以將不同的模組或頁面獨立開發，每個入口點代表著一個模組或頁面。
* 獨立打包：每個入口點都可以產生獨立的打包輸出，這意味著你可以針對不同的需求進行優化和配置。
* 分割代碼（Code Splitting）：多入口功能也為分割代碼提供了更多彈性。
* 多頁面應用（Multiple Page Application）：更好地管理和維護不同頁面之間的相依關係，同時保持每個頁面的獨立性。




webpack.config.js
```javascript
module.exports = {
  entry: {
    main: './src/client.js',
    aiPage: './ui/pages/ai',
  },
  ...,
}

```

url.py
```python
urlpatterns = [
    path("admin/", admin.site.urls),
    path("", HomePage.as_view(), {"themePath": "MainRouter"}),
    path("accounts/login/", HomePage.as_view(), {"themePath": "MainRouter"}),
    re_path(r"^features/", HomePage.as_view(), {"themePath": "MainRouter"}),
    ...
    ...
    re_path(r"^liff/", HomePage.as_view(), {"themePath": "MainRouter"}),
    re_path(r"^ai/", AIPage.as_view(), { "webpackBundleName": "aiPage"}),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

```

frontpage/view.py
```python
class HomePage(TemplateView):
    template_name = "site.html"

    def get_context_data(self, **kwargs):
        import json

        context = super().get_context_data(**kwargs)
        contextData = context.copy()
        del contextData['view']
        context['context_data'] = json.dumps(contextData)
        return context

class AIPage(TemplateView):
    template_name = 'ai.html'

    @method_decorator(never_cache)
    def dispatch(self, request, *args, **kwargs):
        response = super().dispatch(request, *args, **kwargs)
        response['Content-Security-Policy'] = "frame-ancestors 'self' *;"
        return response
```

ai.html
+
[django-webpack-loader](https://github.com/django-webpack/django-webpack-loader)
```typescript
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />

    {% load render_bundle from webpack_loader %} 
    {% render_bundle webpackBundleName attrs='defer' %}

    <meta name="description" content="AI Page" />
    <meta
      http-equiv="X-UA-Compatible"
      content="IE=edge; IE=11; IE=10; IE=9; IE=8;"
    />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

<script src="/static/cdn/moment.min.js"></script>

```

 ## :pencil: 什麼時候該切多個 entry
 依照不同目的想切就可以切，但 Sass 產品和 To C 的頁面得切開。

 

## :pencil: 結論
1. 在現有架構下，可以有多個 Front-End app，不會造成太高 cost. 
2. 未來To C 的頁面就直接切起來，不該與 To B的 OS 混在一起.
3. 找到更好的方法，做對的事情。