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界面: