Flutter Web網站搭建教程

簡述

曾幾什麼時候，你有沒有一個搭我的網站的衝動，我這個想法在我第一次開始寫博客就有了，可就是沒有搭起來，直到我看到flutter有了web支持，我就在想，是時候了，必須且必定要作，因而乎我就搭建瞭如今的網站ibaozi.cn，代碼開源至https://github.com/ibaozi-cn/ibaozi，而此次我要作的並非基於這個網站開發，我再次申請了一個新域名jetpack.net.cn，讀過我以前的博客可能直到，我作了一個Android Jetpack模版項目在線生成工具，我申請這個就是爲了將Android Jetpack整合進來，提供一個好記的域名，固然我還有另外一項計劃，就是作一個Flutter 生態的Jetpack，此次博客就是計劃的第一步，徹底開源給你們，讓讀我博客的同窗們，跟我一塊兒搭建一個網站，順便學習Flutter技術，好了很少說了，接下來，讓咱們看看如何搭建這個網站。

環境要求

• Flutter

須要切換beta版原本支持web開發
環境搭建跳至以前博客：Flutter系列之環境搭建

• Node

下載跳至： 下載| Node.js
入門跳至： 指南
環境配置： Node.js 安裝配置| 菜鳥教程
腳手架：Express 生成器
具體操做步驟請往下看

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 Studio



項目名字、描述簡單修改一下，next下一步

修改一下包名，而後Finish，須要等待一下子。

項目建立成功了。這裏就到這，後期博客慢慢介紹每次開發的細節。

Node 項目建立

咱們直接打開Flutter項目的Terminal

mkdir node
mkdir server
cd node/server

進入server目錄，如今你的node環境應該也能夠了吧，好開始用Express 生成器生成項目

npm install express-generator -g //安裝好了略過
express --view=pug myapp

修改myapp爲你本身的項目名。執行完你會看到
接下來

cd myapp
npm i
npm start

瀏覽器試下http://localhost:3000看到以下就ok了

開始項目關聯

• step 1

在Flutter項目中執行

flutter build web

構建web包，最終會在build文件夾下生成web包，web包下就是網站的相關文件。

• step 2

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

我建立了一個public_flutter_web，爲了是之後文件區分，也建議你作同樣的操做

• step 3

改造express，由於默認express是展現 views包下的網頁的，並且默認不是html實現。將下圖中文件所有刪除便可

打開 app.js文件，刪除delete標記部分，添加add標記部分

• step 4

保存修改，從新將服務npm start，再打開http://localhost:3000
看到以下：

大功告成，這樣就好了嗎，nono，對於一個懶惰的人來講，咱們要寫一些腳本，輔助項目自動構建。

• step 5

因爲node項目目錄太深，在命令行運行也很麻煩，咱們寫個shell腳本，來幫我搞定。在flutter項目根目錄建立bin文件夾，用來放置咱們的腳本
右鍵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 主頁，遇到什麼，須要藉助什麼，怎麼寫，爲何這麼寫，咱們將在將來的博客中，帶你一步步實現一個完整的網站，隨我寫下去。若是你想參與開發，請私聊我，合做雙贏，加油。