小白问下用 Docker 同时部署前后端的问题

前端用的是 Vue+Webpack，后端 API 用的是 Flask

本地开发调试的时候，前端运行在 localhost:8080，后端运行在 localhost:5000

现在由于学校网络限制，外网只能访问 80 端口。所以我想让用户访问的时候，通过 example.com:80 来访问前端，然后通过 example:80/backend/XXXX_API 来访问后端

由于经验不足，我现在整个思路很混乱，整理一下大致有以下疑问：

1. 前端是在 docker 里面 git clone && npm install && npm run build，还是在开发环境中 npm run build 然后直接把生成好的网页复制进 docker image ？我倾向于第二种方法，因为我觉得这样速度快，不用 npm install。（后端也是同样的疑问，是在 docker 中 pip install python package_a package_b package_c && flask run，还是先 build 出.whl 文件然后复制进 docker image ）但是我看网上的 dockerfile 基本都是用第一种方法的？
2. 我自己乱想的方法是，让后端服务在 docker 中仍然运行在 5000 端口，然后将 example.com:80 映射到 index.html （ Vue ），将 example:80/backend 映射到 5000 端口（ Flask API ）？或者有没有更好的方法？
3. 是 build 成一个 docker image，还是分别 build 两个 docker image 然后再用 docker-compose 组织起来呢？

以上编程术语很可能使用不当，请见谅

大佬们请肆意拍砖，谢谢！