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

[starvedcat]

前端用的是 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 组织起来呢？

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

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

[starvedcat]

现在还已知，我这台服务器的 IP 绑定了好几个域名，所以我想让 domain1.com 做前端，domain2.com 做后端（例如通过编辑 apache 的 conf ）。这样合理吗？或者说和“ domain1.com+domain1.com/backend ”的方案比哪个更合理？

[whileFalse]

1. 在 docker 里面 npm install && npm run build，不要在 docker 里面 git clone。使用合理的分层保证不会每次都 install。这是保证你的部署和代码一致的方法。
2. 这个方法没问题。除非你想额外部署一个 Nginx。如果你是个人使用的场景，没必要。
3. 用 docker-compose
4. 就你的场景，domain1.com+domain1.com/backend 比较合适。

[MonoLogueChi]

先问一个问题，你的前端和后端是跑在相同的机器上，还是不同的机器上。
前端可以用 Nginx 反代，或者是你提到的 Apache。
如果是在同一机器上，后端完全没必要去额外搞个反代啊，同机器上前端访问后端又不是外网，哪个端口无所谓啊。

在不同的机器上，你可能要每个机器加一层反向代理了。

[starvedcat]

@MonoLogueChi #3 谢谢，是在相同的机器上的

[starvedcat]

@whileFalse #2 谢谢！！

[cliberal]

@whileFalse 如何保证不会每次都 install 呢 🤔️

[gamexg]

如果还有其它网站，可以考虑启动个

https://github.com/jwilder/nginx-proxy

加上这个就能自动签发 https 证书
https://github.com/JrCs/docker-letsencrypt-nginx-proxy-companion

[starvedcat]

@gamexg #7 谢了，不过暂时用不上，学校的域名有 https