Linux 使用Nginx反向代理一个Flutter web

进入在Linux安装的 nginx/conf 目录

cd /usr/local/nginx/conf

配置 nginx.conf 文件

vi nginx.conf

在http {} 下添加内容：

# 被代理的服务器IP和端口
upstream macflutter01{
    # 这是在自己Mac上用tomcat部署的flutter项目，Mac ip为192.168.1.143，tomcat监听的端口为9091
    server 192.168.1.143:9091;
}
# 添加一个server来代理
server {
    # 默认端口
    listen 80; 
    #Linux ip地址 192.168.1.101，以后可以把ip地址改为域名
    server_name 192.168.1.101; 
    
    #配置路由访问信息
    location / {
        #此处的 “macflutter01” 对应上边upstream的 “macflutter01”
        proxy_pass http://macflutter01;
        
        #在不指定访问具体资源时，默认的展示资源的列表
        #index index.html;
    }

    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root html;
    }
}

这样nginx算是配置好了。

以下是配置 Mac上的tomcat flutter

修改 tomcat的 server.xml 配置文件

这表示监听了9091端口。

在 <Engine> 下的 <Host>里 添加 <Context>，

<Context path="/" docBase="/Users/mac/Desktop/Projects/Demos/tomcat_flutterweb" />

这样tomcat算是配置好了。

配置flutter项目

去到根路由对应的文件夹下（ /Users/mac/Desktop/Projects/Demos/tomcat_flutterweb ）

修改 index.html  文件，修改其中的<base>标签，如下：

<base href="http://192.168.1.101">

其中 192.168.1.101 是Nginx所在的Linux服务器的IP地址

（不修改<base>的 href，则部署后显示不出flutter页面）

去到另一个路由对应的文件夹下（ /Users/mac/Desktop/Projects/Demos/flutter_musicplayer）

修改 index.html  文件，如下：

<base href="http://192.168.1.101/musicPlayer">

此时就可以启动Linux上的Nginx。

在浏览器输入：http://192.168.1.101

在浏览器输入：http://192.168.1.101/musicPlayer/

这就是使用Nginx反向代理的例子。flutter部署在另一台机器上，并且监听的端口是9091，使用Nginx反向代理之后，在浏览器上访问时就可输入Nginx所在的ip地址，并且默认端口为80。