Saltar al contenido

¿Cómo implementar Flutter Web en el servidor?

Solución:

[UPDATE]

Para crear una compilación de producción para web ahora, Flutter admite flutter build web comando similar a otras plataformas (android e ios) y verá

build/web

carpeta generada con los archivos de origen principalmente index.html,main.dart.js y la carpeta de activos y simplemente puede implementarlo en su servidor,

[OLD ANSWER STEP 1 & 2 No longer required ]

simplemente necesita hacer una compilación de producción utilizando un webdev herramienta. instalar webdev necesitas una herramienta de pub,

  1. así que ve a la ubicación donde tienes dardo SDK instalado y dentro de la carpeta bin debe tener un archivo por lotes pub. Debe proporcionar la ruta de la carpeta bin a la variable de entorno para poder usar pub desde cmd.

  2. ahora abra cmd y presione el siguiente comando para instalar webdev

    pub global activate webdev

    // en su terminal intelliJ Idea

  3. ahora ve a la carpeta raíz de tu proyecto y haz una compilación en modo de lanzamiento

    flutter build web

  4. debería ver una carpeta de compilación (/build/web) en el directorio raíz, simplemente copie esa carpeta y alójela en un servidor web.

Usé la misma forma para implementarlo en las páginas de GitHub, aquí se explica cómo en una guía detallada.

Algún enlace útil: https://dart.dev/tools/webdev#build

Aquí está la aplicación flutterweb en ejecución

Puede implementar su aplicación web flutter en un alojamiento compartido con Nodejs o en VPS servidor con Pitón Siga esta publicación de blog mediana

ingrese la descripción de la imagen aquí

Después de crear su aplicación web flutter con “flutter build web” y desea alojarla en un plan de alojamiento compartido, prepare su aplicación nodejs como un servidor simple para su aplicación web flutter, aquí hay un código de muestra

app.js

var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var app = express();

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public-flutter')));


module.exports = app;

package.json

{
  "name": "flutter-web-app",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "cookie-parser": "~1.4.4",
    "debug": "~2.6.9",
    "express": "~4.16.1",
    "morgan": "~1.9.1"
  }
}

Cree una carpeta y asígnele un nombre (“public-flutter”) y luego coloque su aplicación web flutter en la carpeta que acaba de crear para que nodejs pueda servirla a través de su servidor si se encuentra en un alojamiento compartido, simplemente continúe con la publicación del blog aquí.

y si está en un servidor VPS, ejecute este comando si desea servidor la aplicación nodejs

node app.js

o si no desea nodejs, simplemente use python en su aplicación web flutter para servirlo como un servidor http simple con este comando

nohup python -m SimpleHTTPServer 8000 &

Solo asegúrese de estar en la carpeta de su aplicación web cuando ejecute el comando. “Nohub” permitirá que el comando siga ejecutándose incluso si cerró la sesión SSH en Linux. O puede servir su aplicación a través de las herramientas Dart pub / webdev usando el paquete dhttpd.

Esta es la forma sencilla de implementar su aplicación web flutter en el servidor web de Amazon.

A continuación se muestra el sencillo proceso que sigo.

  1. Construye una telaraña de aleteo: flutter build web —release
  2. Crear instancia en el servidor aws ec2: significa asignar algo de memoria para su sitio web en el servidor. La instancia es el servidor virtual en la nube de AWS.
  3. Conéctese a su servidor (instancia) con la ayuda de putty:
  4. Instale el panel de control Vesta en su servidor. (también puede instalar otro panel de control si no le gusta vesta).
  5. Cargue su contenido (sitio web) en el servidor (con la ayuda de FileZilla puede cargar fácilmente el contenido de su sitio web en el servidor)

Aquí está el video tutorial simple: https://youtu.be/htuHNO9JeRU

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *