Vue Js Nginx Docker 连接到后端

Posted 2023-02-27

【中文标题】Vue Js Nginx Docker 连接到后端

【英文标题】：Vue Js Nginx Docker connect to Backend

【发布时间】：2020-12-27 17:31:53

【问题描述】：

我开发了 vue js 前端，我可以使用 axios 调用与后端通信，当我调用时，我需要指定后端服务端口和端点。如何使用 nginx 和 docker，然后在使用 nginx 和 docker 之后，应用程序如何与后端通信？最终我需要在 Kubernetes 集群上部署前端和后端服务。

我已经阅读了很多关于此的教程，但我没有明确的概念，也需要实施解决方案。我以前从未使用过 nginx

后端：http://localhost:8084

这是我的 axios 调用

import axios from 'axios'



const API_URL = 'http://localhost:8084'



    class NotificationDataService 
    
        
        retrieveAllNotifications() 
            
            return axios.get(`$API_URL/notification/getall`);
        
    
    
    
    
    
    
    export default new NotificationDataService()  

【参考方案1】：

使用 Docker（以及 Kubernetes）方法，您必须将容器与前端以及容器与后端分开。

在 Kubernetes 中，您可以使用 Ingress。它是一个反向代理，所以你不需要 Nginx。 https://kubernetes.io/docs/concepts/services-networking/ingress/

在你的Vue.js应用中配置Backend的URL，我建议你不要像你一样使用常量变量，而是使用Framework的配置系统：https://cli.vuejs.org/guide/mode-and-env.html#modes。

您需要通过 Ingress 公开您的前端和后端，因为您的 Axios 调用是从客户端发送到后端的。所以你可以：

www.mydomain.com/ 用于您的前端

www.mydomain.com/api 用于您的后端

现在你的前端只调用了www.mydomain.com/api。

翻译为www.DeepL.com/Translator（免费版）