【Flutter】Flutter 编译 Web 网站 ① ( Tomcat 部署 Web 网站 )

文章目录

[一、Flutter 编译 Web 网站](#一、Flutter 编译 Web 网站)
[二、Tomcat 部署 Web 网站](#二、Tomcat 部署 Web 网站)
- [1、下载安装 Tomcat](#1、下载安装 Tomcat)
- 2、配置环境变量
- [3、部署 Web 网站并启动 Tomcat](#3、部署 Web 网站并启动 Tomcat)
- [4、防火墙配置 8080 入站规则](#4、防火墙配置 8080 入站规则)
- 5、路由器配置端口映射
- [6、Tomcat 命令行终端乱码](#6、Tomcat 命令行终端乱码)

参考文档 :

Flutter 官方文档 : https://docs.flutter.dev/install/quick
使用出现网络问题 , 参考在中国网络环境下使用 Flutter 文档 ;

一、Flutter 编译 Web 网站

先清空 Flutter 编译内容 , 然后编译 Flutter Web 版应用 , 并使用 --base-href 指定网站是放在域名的哪个 " 子文件夹 " 里运行 ;

shell 复制代码

flutter build web --release --base-href "/charging_password_generation_web/"

打包结果在 " D:\002_Project\001_Flutter\charging_password_generation\build\web " 目录中 ;

该目录就是网站的本体 , 将其部署到 http 服务器上即可进行访问 ;

之后在 Tomcat 的 webapps 目录下 , 将 web 程序放在 charging_password_generation_web 目录下 ;

Tomcat 的 webapps 目录是 D:\Tomcat9\apache-tomcat-9.0.117\webapps\ 目录 ;

Web 网站放在 D:\Tomcat9\apache-tomcat-9.0.117\webapps\charging_password_generation_web 目录中 ;

二、Tomcat 部署 Web 网站

1、下载安装 Tomcat

下载 Tomcat 10 , 下载地址 https://tomcat.apache.org/download-10.cgi ,

选择下载 " 64-bit Windows zip " 文件 ;

将下载的 " apache-tomcat-10.1.55-windows-x64.zip " 解压 , 解压后的目录为 " D:\Tomcat10\apache-tomcat-10.1.55 " ;

2、配置环境变量

配置 Java 地址 :

dart 复制代码

JAVA_HOME
D:\Program Files\Java\jdk1.8.0_144

配置 Tomcat 地址 :

dart 复制代码

CATALINA_HOME
D:\Tomcat10\apache-tomcat-10.1.55

配置 Path 环境变量 :

dart 复制代码

%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;%CATALINA_HOME%\bin;

注意 Tomcat 与 JDK 版本匹配 :

Tomcat 10 → 必须 JDK 11/17（不能用 JDK 8）
Tomcat 9 → JDK 8/11
Tomcat 8 → JDK 7/8

版本不匹配 , Tomcat 起不来 , 命令行终端一闪而过 ;

3、部署 Web 网站并启动 Tomcat

在 Tomcat 的 webapps 目录下 ,

创建 charging_password_generation_web 目录 , 这是 Flutter 编译导出时设置的 --base-href 参数 ;

dart 复制代码

flutter build web --release --base-href "/charging_password_generation_web/"

将 Flutter 项目根目录 " D:\002_Project\001_Flutter\charging_password_generation\ " 下的 " build\web " 编译结果拷贝到 " D:\Tomcat9\apache-tomcat-9.0.117\webapps\charging_password_generation_web " 目录中 ;

安装完毕后 , 执行 " D:\Tomcat9\apache-tomcat-9.0.117\bin\startup.bat " 启动 Tomcat ;

4、防火墙配置 8080 入站规则

开放 8080 端口 :

控制面板选择 " 更新和安全 " ,

在 Windows 安全中心 , 选择 " 防火墙和网络保护 " , 弹出对应对话框 ;

在 " 防火墙和网络保护 " 对话框中 , 下拉 , 选择 " 高级设置 " , 弹出 " 高级安全 Windows Defender " 设置 ;

" 高级安全 Windows Defender 防火墙 " 设置对话框中 , 选择 " 入站规则 " , 点击右侧的 " 新建规则 " , 然后选择创建的规则类型 " 端口 " ;

选择 TCP 协议 , 特定本地端口 8080 ;

选择允许链接操作 ;

配置文件全选 ;

设置一个名称 ;

5、路由器配置端口映射

进入路由器 , 为上述局域网内的服务器的 8080 端口映射一个外网端口 12000 ;

在服务器本身可以使用 http://localhost:8080/charging_password_generation_web/ 地址访问网站 ;

在局域网内的其它电脑端 , 可以通过局域网地址 http://192.168.0.6:8080/charging_password_generation_web/ 访问网站 ;

在外部网络 , 必须通过 http://http://183.242.233.88:12000/charging_password_generation_web/ 访问该网站 ;

6、Tomcat 命令行终端乱码

Windows cmd 默认编码是 GBK , 新版 Tomcat 日志默认输出 UTF-8 , 两边编码不一致 → 中文变问号 / 方块 ;

修改 D:\Tomcat9\apache-tomcat-9.0.117\conf\logging.properties 配置文件 ,

找到

dart 复制代码

java.util.logging.ConsoleHandler.encoding = UTF-8

配置 , 将其改为 :

dart 复制代码

java.util.logging.ConsoleHandler.encoding = GBK

保存配置文件 → 重启 Tomcat → 控制台中文正常 ;