zoukankan      html  css  js  c++  java
  • FlutterWeb部署到服务器

    目标:把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界面:

  • 相关阅读:
    F. Xor-Paths 题解(折半搜索)
    Integers Have Friends 2.0 题解(随机+同余)
    3-爬虫框架-大规模异步并发爬虫
    2-爬虫框架-网址池的实现
    1-爬虫框架-download和MySQL封装
    [gym102220I]Temperature Survey
    [atAGC034F]RNG and XOR
    [luogu5564]Say Goodbye
    [cf1349D]Slime and Biscuits
    [bzoj3569]DZY Loves Chinese II
  • 原文地址:https://www.cnblogs.com/liuwenqiang/p/14511987.html
Copyright © 2011-2022 走看看