Flutter Web网站搭建教程

简介: 曾几何时,你有没有一个搭个人网站的冲动,我这个想法在我第一次开始写博客就有了,可就是没有搭起来,直到我看到flutter有了web支持,我就在想,是时候了,必须且一定要做,于是乎我就搭建了现在的网站ibaozi.cn

全系列

简述

曾几何时,你有没有一个搭个人网站的冲动,我这个想法在我第一次开始写博客就有了,可就是没有搭起来,直到我看到flutter有了web支持,我就在想,是时候了,必须且一定要做,于是乎我就搭建了现在的网站ibaozi.cn代码开源至https://github.com/ibaozi-cn/ibaozi接下来,让我们看看如何搭建这个网站。

环境要求

Flutter 项目创建

假装你已经搭建好环境

  • step 1
    打开终端,切换Flutter 分支

flutter channel beta
flutter upgrade
flutter config --enable-web
flutter devices
Chrome     • chrome     • web-javascript • Google Chrome 78.0.3904.108

一行一行执行命令,最后看到Chrome,祝贺你成功了。

  • step 2
    打开Android Studioimage.png
  • image.png
  • image.png
  • image.png
  • image.png

项目名字、描述简单修改一下,next下一步

image.png修改一下包名,然后Finish,需要等待一会儿。

image.png

项目创建成功了。这里就到这,后期博客慢慢介绍每次开发的细节。

Node 项目创建

我们直接打开Flutter项目的Terminal

image.png

mkdir node
mkdir server
cd node/server

进入server目录,现在你的node环境应该也可以了吧,好开始用Express 生成器生成项目

npm install express-generator -g //安装好了略过
express --view=pug myapp

修改myapp为你自己的项目名。执行完你会看到

image.png

接下来

cd myapp
npm i
npm start

浏览器试下http://localhost:3000看到如下就ok了

image.png

开始项目关联

  • step 1
    在Flutter项目中执行
flutter build web

构建web包,最终会在build文件夹下生成web包,web包下就是网站的相关文件。

image.png

  • step 2

copy web包下的文件到node项目的public文件下

image.png

我创建了一个public_flutter_web,为了是以后文件区分,也建议你做一样的操作

  • step 3
    改造express,因为默认express是展示 views包下的网页的,而且默认不是html实现。将下图中文件全部删除即可

image.png

打开 app.js文件,删除delete标记部分,添加add标记部分

image.png

  • step 4

保存修改,重新将服务npm start,再打开http://localhost:3000

看到如下:

image.png

大功告成,这样就行了吗,nono,对于一个懒惰的人来说,我们要写一些脚本,辅助项目自动构建。

  • step 5

由于node项目目录太深,在命令行运行也很麻烦,我们写个shell脚本,来帮我搞定。在flutter项目根目录创建bin文件夹,用来放置我们的脚本

image.png

右键New File 命名为 test_start_node.sh,内容如下

#!/usr/bin/env bash
node node/server/bin/www

也很简单。这个脚本就是辅助我们开启node服务。当然我们还会有flutter项目构建的一些脚本,自动copy文件到指定目录等等,这些之后慢慢补全哦。

最后

将代码上传至github

ibaozi-cn/flutter-jetpack

最后的最后

登上你的云服务器,通过git 将项目下载到服务器上,这里我们需要工具辅助我们服务部署

我选择pm2+nginx来将我的服务启动起来

pm2:环境搭建

nginx:环境搭建

这里不详细说了,网上有一片大海,需要你去浪。有问题的留言我,我可以协助你。

最终通过pm2 和 nginx ,项目完美运行

jetpack.net.cn,没错你看到的是jetpack.ibaozi.cn,哈哈,域名还没下来,先用了之前的ibaozi.cn,后面我们会迁移到jetpack.net.cn。

总结

下期我们就开发Flutter 主页,遇到什么,需要借助什么,怎么写,为什么这么写,我们将在未来的博客中,带你一步步实现一个完整的网站,随我写下去。如果你想参与开发,请私聊我,合作共赢,加油。

目录
相关文章
|
16天前
|
XML 网络架构 数据格式
Ruby 教程 之 Ruby Web Service 应用 - SOAP4R 2
Ruby Web Service 应用 - SOAP4R
19 5
|
17天前
|
XML Linux 网络架构
Ruby 教程 之 Ruby Web Service 应用 - SOAP4R 1
Ruby Web Service 应用 - SOAP4R
14 3
|
23天前
|
Web App开发 Ubuntu 应用服务中间件
Flutter笔记:Web支持原理与实践
Flutter笔记:Web支持原理与实践
63 0
|
23天前
Flutter笔记:使用Flutter构建响应式PC客户端/Web页面-案例
Flutter笔记:使用Flutter构建响应式PC客户端/Web页面-案例
29 0
|
23天前
|
Dart 小程序 前端开发
WebSocket 解析与应用(包含web前端、服务端、小程序、dart/flutter中的用法)
WebSocket 解析与应用(包含web前端、服务端、小程序、dart/flutter中的用法)
114 0
|
1月前
|
存储 中间件 Go
7天用Go从零实现Web框架Gee教程
7天用Go从零实现Web框架Gee教程
46 0
|
1月前
|
安全 应用服务中间件 nginx
百度搜索:蓝易云【使用Debian、Docker和Nginx部署Web应用教程】
这些是在Debian上使用Docker和Nginx部署Web应用的基本步骤。根据您的需求和具体环境,可能还需要进行其他配置和调整。请确保在进行任何与网络连接和安全相关的操作之前,详细了解您的网络环境和安全需求,并采取适当的安全措施。
36 0
|
2月前
|
Devops 网络安全 Docker
百度搜索:蓝易云【DevOps系列文章之Docker部署web ssh工具sshwifty教程。】
同时,了解DevOps和Docker的基本原理和概念也对你进行部署和管理这样的工具非常有帮助。你可以进一步研究Docker容器化技术和相关的DevOps实践,以更好地理解和应用这些概念。
37 0
|
2月前
|
移动开发 前端开发 JavaScript
零基础带你飞web前端教程带你探究web前端趋势
零基础带你飞web前端教程带你探究web前端趋势
27 0
|
2月前
|
移动开发 前端开发 JavaScript
web前端移动端课程之canvas教程系列
web前端移动端课程之canvas教程系列
38 0

相关产品

  • 云迁移中心