目标:把flutter web项目部署到自己的服务器上,可以使用自己的服务器IP访问

前提:服务器已经安装了nginx,

这是我的flutter配置

edz@lwqdeMacBook-Pro ~ % flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.0.1, on Mac OS X 10.15.6 19G2021 darwin-x64,
locale zh-Hans-CN)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
[✓] Xcode - develop for iOS and macOS
[✓] Chrome - develop for the web
[✓] Android Studio (version 3.5)
[✓] VS Code (version 1.54.1)
[✓] Connected device (1 available)

1.创建flutter web 和打包

$cd myfile      //到项目目录下
$flutter create myflutterwebappname //创建flutter web项目
$flutter run -d chrome // 运行项目到浏览器
$flutter web build // 打包
打包后,项目中xxx/build/web 文件中会有些文件,说明已经成功打包了,

2.上传打包文件到服务器,工具(Royal TSX: oopg)

1.打开工具,创建一个document,并再里面创建创建一个Terminal和File transfer(注意:创建时使用SFTP,端口默认22,)
2.使用自己的服务器ip和连接密码,在Terminal中连接服务器,启动nginx
3.File transfer 中把打包好的web目录下的文件上传到服务器的一个文件夹中,记下其中一个index.html路径,修改nginx的配置文件时要用

3.修改nginx的配置文件,

1.找到/etc/nginx/nginx.conf文件,把root 的路径改成 上面记下的index.html路径,
2.Terminal 中
$nginx -t //检查配置文件,(也可以用此方法找到nginx的配置文件路径)
$nginx -s reload //刷新nginx,就可以使用服务器ip访问了

我的nginx配置文件:

user  nginx;
worker_processes 1; error_log /var/log/nginx/error.log warn;
pid /var/run/nginx.pid; events {
worker_connections 1024;
} http {
include /etc/nginx/mime.types;
default_type application/octet-stream; log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"'; access_log /var/log/nginx/access.log main; sendfile on;
#tcp_nopush on; keepalive_timeout 65; #gzip on; include /etc/nginx/conf.d/*.conf; server {
listen 80 default_server;
server_name _; #root /lwq/ios/down;
root /lwq/flutterweb/testflutterweb; location / {
index index.html;
}
} }

Royal TSX界面:

FlutterWeb部署到服务器的更多相关文章

  1. Linux下部署FTP服务器

    Linux下部署FTP服务器 下载安装包 在这里介绍的是离线部署FTP,首先下载对应的rpm包,下载链接为: 下载vsftpd服务 下载FTP客户端 安装ftp服务器 关闭防火墙 service ip ...

  2. 部署openssh服务器

    1.安装服务器端软件包 先查看是否已经安装openSSH服务器软件包 # rpm -qa|grep openssh openssh-askpass-.3p1-.el6_6..x86_64 openss ...

  3. 将war包部署到服务器的详细步骤

    第一步: 先将项目打包成war文件,也就是将在项目上单击鼠标右键,选择Export: 选择WAR file,点击下一步: 会出现如下所示,选择你要保存的位置,点击完成: 在你所选择的地方会有个如下所示 ...

  4. 部署git服务器 gitServer 软件

    部署git服务器 gitServer 软件 搭建git服务器也并不是非常的难,有这么多优秀的软件,选择一个适合自己就行了 1. windows版本 http://gitstack.com/ 免费版本, ...

  5. Centos环境下部署游戏服务器-常用命令

         图1     在Linux的世界,如果你不玩命令,那你见了同行都不好意思和人家打招呼.同时服务器正常状况下放在远端,一般都是开ssh登录服务器,相信远程桌面的人很少见吧.这篇文章说说Linu ...

  6. Centos环境下部署游戏服务器-权限

    部署Web服务器的时候,在"DocumentRoot"指向的根目录新建一个文件夹,然后将网页和资源放在这个文件夹里,通过地址http://192.168.0.100/Res/ind ...

  7. debian7下部署nginx服务器

    笔者是在vmware中的Debian7下部署nginx服务器,采用离线部署方式.过程如下: 1.准备好需要的离线安装包 nginx-1.6.2.tar.gz,pcre-8.34.tar.gz,open ...

  8. Asp.Net 之 WebService部署到服务器后出现" The test form is only available for requests from the local machine "

    最近由于任务需要开发了一个WebService, 部署到服务器以后,出现上述问题,网上查找到如下解决方案: 问题原因: 从 NET Framework 1.1 起定义了一个名为 HttpPostLoc ...

  9. 单点登录CAS使用记(二):部署CAS服务器以及客户端

    CAS-Server下载地址:https://www.apereo.org/projects/cas/download-cas CAS-Client下载地址:http://developer.jasi ...

  10. 将网站部署到服务器上出现_STORAGE_WRITE_ERROR_问题

    用的thinkphp3.2的框架,在本地运行没有问题,部署到服务器上(基于centos的LAMP环境)即报错,报错信息如下(完全看不懂...):求大神帮帮忙~~~~(>_<)~~~~ :( ...

随机推荐

  1. 太坑了吧!一次某某云上的redis读超时排查经历

    一次排查某某云上的redis读超时经历 性能排查,服务监控方面的知识往往涉及量广且比较零散,如何较为系统化的分析和解决问题,建立其对性能排查,性能优化的思路,我将在这个系列里给出我的答案. 问题背景 ...

  2. 如何在2023年学习React

    在2023年学习React并不是一件容易的事情.自2019年React Hooks发布以来,我们已经拥有了很多稳定性,但现在形势正在再次变化.而这次变化可能比使用React Hooks时更加不稳定.在 ...

  3. openwrt开发使用-arping

    前言 IP冲突引起的网络异常,可以通过检查IP是否冲突,排除故障.我们可以用一些工具进行检查,例如arp-scan.arping软件进行查看. 这里使用arping进行检查设备的MAC地址,通过查查看 ...

  4. Pytorch实践模型训练(损失函数)

    一个深度学习项目包括了: 模型设计.损失函数设计.梯度更新方法.模型保存和加载和模型训练,其中损失函数就像一把衡量模型学习效果的尺子,训练模型的过程就是优化损失函数的过程,模型拿到数据之后有一个非常重 ...

  5. hackathon 复盘:niche 海外软件工具正确的方法 6 个步骤

    上周末,去参加了北京思否 hackathon,两天时间内从脑暴 & 挖掘软件 IDEA -> Demo 研发路演,这次经历让我难忘.这里我的看法是每个开发者圈友,都应该去参加一次 hac ...

  6. Django笔记二十七之数据库函数之文本函数

    本文首发于公众号:Hunter后端 原文链接:Django笔记二十七之数据库函数之文本函数 这篇笔记将介绍如何使用数据库函数里的文本函数. 顾名思义,文本函数,就是针对文本字段进行操作的函数,如下是目 ...

  7. Mac M1(arm 系列芯片)如何安装 Chromium | Puppeteer

    最近写个脚本用到 puppeteer,然后安装 Chromium 出现一点问题,这里记录一下解决方案. Puppeteer 自动安装失败 在 Puppeteer 安装时会自动安装 Chromium,然 ...

  8. VS 查看引用的DLL/Nuget包源码时,无法看到注释

    一.问题描述 在下面的截图中,我们发现,源码有添加一段注释. 然后通过Nuget包引用,在VS中用Reshaper反编译时,发现没有注释: 原来,DLL是默认不带注释的.即你生成一个DLL,给另一个项 ...

  9. 2022-09-15:Range模块是跟踪数字范围的模块。 设计一个数据结构来跟踪表示为 半开区间 的范围并查询它们。 半开区间 [left, right) 表示所有 left <= x < righ

    2022-09-15:Range模块是跟踪数字范围的模块. 设计一个数据结构来跟踪表示为 半开区间 的范围并查询它们. 半开区间 [left, right) 表示所有 left <= x < ...

  10. flutter系列之:使用AnimationController来控制动画效果

    目录 简介 构建一个要动画的widget 让图像动起来 总结 简介 之前我们提到了flutter提供了比较简单好用的AnimatedContainer和SlideTransition来进行一些简单的动 ...