使用Docker部署Flutter web项目

2022-04-11 18:37:17 浏览数 (1)

Flutter web已经发展到稳定版了,之前开发的Qools项目现在准备打包,并部署到docker上。

Flutter web构建

在构建前,先run项目,确保项目在本地正常运行。

代码语言:javascript复制
fvm flutter build web

cd项目根目录,运行上面命令,这里使用了fvm管理flutter sdk版本,所以前面多了个fvm。

build文件下就会出现web文件夹,文件夹内就是构建好的web项目了,需要把这些部署到服务器。

Docker部署

Docker是用来做软件发布的一个软件,是一个工具。需要在自己服务器上安装docker,我的阿里云服务器系统:CentOS8。可以参考:https://www.runoob.com/docker/centos-docker-install.html

安装docker

先登入服务器,终端输入

代码语言:javascript复制
sudo yum install -y docker

启动docker服务

代码语言:javascript复制
sudo systemctl start docker

systemctl enable docker # 开机启动

获取nginx镜像

代码语言:javascript复制
docker pull nginx

运行 docker images 查看Nginx镜像是否获取成功,如下所示即为获取成功。

图片.png

继续运行如下命令,在本机80端口运行Nginx服务器:

代码语言:javascript复制
docker run -p 80:80 -d nginx

如图

列出容器

代码语言:javascript复制
docker ps

记住CONTAINER ID 或 NAMES ,后面会用到。

在服务器新建目录,用来存放前面构建好的web项目,拷贝项目到你的目录中。

  • 服务器存放项目路径:/usr/qson/nginx/html
  • 配置文件路径:/usr/qson/nginx/default.conf 如果不需要更改,可以省略这一步
将上面服务器2个路径下的文件拷贝到docker容器
  • 拷贝default.conf文件

如果不需要更改default.conf,可以省略这一步

代码语言:javascript复制
docker cp /usr/qson/nginx/default.conf ${CONTAINER ID}://etc/nginx/conf.d/default.conf

${CONTAINER ID}这个替换成前面的CONTAINER ID,这边的CONTAINER ID是f8e9bb900547,即

代码语言:javascript复制
docker cp /usr/qson/nginx/default.conf f8e9bb900547://etc/nginx/conf.d/default.conf
  • 拷贝项目文件,关键
代码语言:javascript复制
docker cp /usr/qson/nginx/html f8e9bb900547://usr/share/nginx/html

通过服务器终端更新docker nginx

代码语言:javascript复制
docker exec f8e9bb900547 nginx -s reload

然后浏览器直接输入ip地址访问,即可看到自己的项目

qools web项目地址:http://101.37.147.31/

0 人点赞