un Lim
un Lim

Reputation: 85

flutter web built release but nginx route 404

Similar case: flutter-web-app-blank-screen-in-release-mode

I have an AWS EC2 cloud server. and I built a flutter web build in my EC2 Server. and cross-connect the flutter web index.html to Nginx.

> $ flutter build web

💪 Building with sound null safety 💪

Compiling lib/main.dart for the Web...                           1,491ms

so EC2 can 200 OK. enter image description here

and routed navigate another page and refreshed. enter image description here enter image description here

my EC2 Server nginx config is:

server {
        listen 80 default_server;
        listen [::]:80 default_server;

        root /var/www/flutter_web_project/build/web; # <- the flutter build web released result folder

        index index.html index.htm index.nginx-debian.html;

        server_name _;

        location / {
                try_files $uri $uri/ =404;
        }
}

and i used url_strategy dependency

dependencies:
  flutter:
    sdk: flutter

    url_strategy: ^0.2.0

and main.dart source:

...
import 'package:url_strategy/url_strategy.dart';

void main() {
  setPathUrlStrategy();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'flutter web sample',
      theme: ThemeData(
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: locationPlatform(),
      onGenerateRoute: WebRouter.generate,
      initialRoute: '/',
    );
  }
...

Upvotes: 6

Views: 6773

Answers (2)

dab246
dab246

Reputation: 11

Try update nginx config. It will work for direct url.

location / {
   try_files $uri $uri/ /index.html;
}

Addition comment the following line:

# include /etc/nginx/conf.d/*.conf;

Upvotes: 1

Try update nginx config. It will work for direct url.

 location / {
    try_files $uri $uri/ /index.html;
 }

Upvotes: 19

Related Questions