使用docker 发布flutter web 流程

flutter web ，build之后本地使用流程

需要已经准备的环境：flutter，docker

本地运行flutter web的详细步骤：

1. 打包flutter web命令

• 1.1 flutter build web --web-renderer html
• 1.2 打包之后，会在项目的根目录下生成build/web/的文件夹

2. docker准备环境

• 2.1 下载nginx docker pull nginx[:版本号]，默认是最新的
• 2.2 启动nginx docker run -d --name nginx01 -p 9000:80 nginx // -d后台启动 -p把主机的9000端口映射到docker的80端口上(docker的默认端口是80) --name给容器命名
• 2.3 验证nginx是否正确运行 在浏览器中打开localhost:9000 或者curl localhost:9000

3. 需要重新创建一个容器，将本地的web项目映射到docker中的nginx中

• 3.1 运行docker run -d -v /Users/**/workspace/flutter/app/build/web:/usr/share/nginx/html -p 9001:80 --name nginx02 nginx // -v可以将本地的文件映射到docker中。所以这句-v的作用就是将本地web的项目，映射到docker中的html文件夹中
• 3.2 运行localhost:9001

4.修改docker中nginx配置文件，将本地的配置文件替换掉dokcer中默认的配置，优点：配置文件更改后重启容器即可生效

• 4.1 查找nginx位置 whereis nginx --结果：/etc/nginx
• 4.2 查找默认配置文件的文件 /etc/nginx/conf.d/default.conf
• 4.3 查看默认配置，在路径/etc/nginx/conf.d下，运行命令 cat default.conf
• 4.4 在本地创建一个nginx文件夹(我的是/Users/***/workspace/server/flutter_server/ngnix)
• 4.5 在本地的nginx文件夹下，创建2个文件夹data和help(…/flutter_server/ngnix/data和 …/flutter_server/ngnix/help)。data文件夹里面是配置数据，help是其他文件比如README.md。
• 4.6 data文件夹下创建conf.d文件夹和default.conf(…/flutter_server/nginx/data/conf.d/default.conf)
• 4.7 将4.3步中，docker的nginx的默认配置复制到本地的default.conf中，然后根据个人需求修改(我在 location中添加了 try_files $uri $uri/ /index.html;)
• 4.8 查看设置是否生效，需要新建一个docker容器。命令行：docker run -d -v /Users//workspace/server/flutter_server/ngnix/data/conf.d:/etc/nginx/conf.d -v /Users//workspace/flutter/app/build/web:/usr/share/nginx/html -p 9002:80 --name nginx03 nginx
• 4.9 如果没有启动成功可以查看日志：docker logs nginx03
• 4.10 将本地的data文件夹中创建html文件夹，把web项目放里面，删除docker 的nginx03容器，然后重新创建。docker run -d -v /Users//workspace/server/flutter_server/ngnix/data/conf.d:/etc/nginx/conf.d -v /Users//workspace/server/flutter_server/ngnix/data/html:/usr/share/nginx/html -p 9003:80 --name nginx04 nginx

docker 常见命令

• docker ps -a // 查看所有容器
• docker stop [容器名称] // 停止容器
• docker rm [容器名称] // 删除容器
• docker start [容器ID] // 启动已经存在的容器
• docker pull [镜像][:版本号]，默认是最新的
• docker run -d -p [port1]:[port2] --name [containerName] [imageName] -v [本地项目路径]:[docker中nginx路径] -v [本地配置文件]:[docker中nginx的配置文件]
• docker exec -it [镜像名称] bash 进入到某个容器内
• docker logs [容器名称] 查看某个容器的日志

linux常见命令

• pwd 显示当前路径
• ls 列出当前目录下的文件和文件夹
• find / -name foldername 在根目录下查找名为foldername的文件夹，并显示路径
• whereis flodername 查找名为foldername的文件夹，并显示路径

docker中的一些概念

container容器，image镜像

就以flutter web的项目来做简单说明。web项目需要运行在nginx下，那我们的image就是nginx。而container就是用来管理nginx的。打个比方，可以把image可以当作是一个vscode，作用是用来运行web的项目的软件，而container就是操作系统，可以用来运行vscode的容器。但这里是先有image才有container。