全系列
- Flutter Web網(wǎng)站之主頁(yè)框架搭建
- Flutter Web網(wǎng)站之Jetpack成型
- Flutter Web網(wǎng)站之ScrollView+GridView優(yōu)化
- Flutter Web網(wǎng)站之最簡(jiǎn)方式實(shí)現(xiàn)暗黑主題無(wú)縫切換
- Flutter Web網(wǎng)站之Markdown展示與博客列表
簡(jiǎn)述
曾幾何時(shí)，你有沒(méi)有一個(gè)搭個(gè)人網(wǎng)站的沖動(dòng)，我這個(gè)想法在我第一次開(kāi)始寫(xiě)博客就有了，可就是沒(méi)有搭起來(lái)，直到我看到flutter有了web支持，我就在想，是時(shí)候了，必須且一定要做，于是乎我就搭建了現(xiàn)在的網(wǎng)站ibaozi.cn，代碼開(kāi)源至https://github.com/ibaozi-cn/ibaozi，而這次我要做的并不是基于這個(gè)網(wǎng)站開(kāi)發(fā)，我再次申請(qǐng)了一個(gè)新域名jetpack.net.cn，讀過(guò)我之前的博客可能直到，我做了一個(gè)Android Jetpack模版項(xiàng)目在線生成工具，我申請(qǐng)這個(gè)就是為了將Android Jetpack整合進(jìn)來(lái)，提供一個(gè)好記的域名，當(dāng)然我還有另一項(xiàng)計(jì)劃，就是做一個(gè)Flutter 生態(tài)的Jetpack，這次博客就是計(jì)劃的第一步，完全開(kāi)源給大家，讓讀我博客的同學(xué)們，跟我一起搭建一個(gè)網(wǎng)站，順便學(xué)習(xí)Flutter技術(shù)，好了不多說(shuō)了，接下來(lái)，讓我們看看如何搭建這個(gè)網(wǎng)站。
環(huán)境要求
- Flutter
需要切換beta版本來(lái)支持web開(kāi)發(fā)
環(huán)境搭建跳至之前博客：Flutter系列之環(huán)境搭建 - Node
下載跳至： 下載| Node.js
入門(mén)跳至： 指南
環(huán)境配置： Node.js 安裝配置| 菜鳥(niǎo)教程
腳手架：Express 生成器
具體操作步驟請(qǐng)往下看
Flutter 項(xiàng)目創(chuàng)建
假裝你已經(jīng)搭建好環(huán)境
- step 1
打開(kāi)終端，切換Flutter 分支
flutter channel beta
flutter upgrade
flutter config --enable-web
flutter devices
Chrome ? chrome ? web-javascript ? Google Chrome 78.0.3904.108
一行一行執(zhí)行命令，最后看到Chrome，祝賀你成功了。
-
step 2
打開(kāi)Android Studio
項(xiàng)目名字、描述簡(jiǎn)單修改一下，next下一步
修改一下包名，然后Finish，需要等待一會(huì)兒。
項(xiàng)目創(chuàng)建成功了。這里就到這，后期博客慢慢介紹每次開(kāi)發(fā)的細(xì)節(jié)。
Node 項(xiàng)目創(chuàng)建
我們直接打開(kāi)Flutter項(xiàng)目的Terminal
mkdir node
mkdir server
cd node/server
進(jìn)入server目錄，現(xiàn)在你的node環(huán)境應(yīng)該也可以了吧，好開(kāi)始用Express 生成器生成項(xiàng)目
npm install express-generator -g //安裝好了略過(guò)
express --view=pug myapp
接下來(lái)
cd myapp
npm i
npm start
瀏覽器試下http://localhost:3000看到如下就ok了
開(kāi)始項(xiàng)目關(guān)聯(lián)
- step 1
在Flutter項(xiàng)目中執(zhí)行
flutter build web
-
step 2
copy web包下的文件到node項(xiàng)目的public文件下
我創(chuàng)建了一個(gè)public_flutter_web，為了是以后文件區(qū)分，也建議你做一樣的操作
-
step 3
改造express，因?yàn)槟J(rèn)express是展示 views包下的網(wǎng)頁(yè)的，而且默認(rèn)不是html實(shí)現(xiàn)。將下圖中文件全部刪除即可
打開(kāi) app.js文件，刪除delete標(biāo)記部分，添加add標(biāo)記部分
- step 4
保存修改，重新將服務(wù)npm start，再打開(kāi)http://localhost:3000
看到如下：
大功告成，這樣就行了嗎，nono，對(duì)于一個(gè)懶惰的人來(lái)說(shuō)，我們要寫(xiě)一些腳本，輔助項(xiàng)目自動(dòng)構(gòu)建。 -
step 5
由于node項(xiàng)目目錄太深，在命令行運(yùn)行也很麻煩，我們寫(xiě)個(gè)shell腳本，來(lái)幫我搞定。在flutter項(xiàng)目根目錄創(chuàng)建bin文件夾，用來(lái)放置我們的腳本
右鍵New File 命名為 test_start_node.sh，內(nèi)容如下
#!/usr/bin/env bash
node node/server/bin/www
也很簡(jiǎn)單。這個(gè)腳本就是輔助我們開(kāi)啟node服務(wù)。當(dāng)然我們還會(huì)有flutter項(xiàng)目構(gòu)建的一些腳本，自動(dòng)copy文件到指定目錄等等，這些之后慢慢補(bǔ)全哦。
最后
將代碼上傳至github
ibaozi-cn/flutter-jetpack
最后的最后
登上你的云服務(wù)器，通過(guò)git 將項(xiàng)目下載到服務(wù)器上，這里我們需要工具輔助我們服務(wù)部署
我選擇pm2+nginx來(lái)將我的服務(wù)啟動(dòng)起來(lái)
pm2：環(huán)境搭建
nginx：環(huán)境搭建
這里不詳細(xì)說(shuō)了，網(wǎng)上有一片大海，需要你去浪。有問(wèn)題的留言我，我可以協(xié)助你。
最終通過(guò)pm2 和 nginx ，項(xiàng)目完美運(yùn)行
jetpack.net.cn，沒(méi)錯(cuò)你看到的是jetpack.ibaozi.cn，哈哈，域名還沒(méi)下來(lái)，先用了之前的ibaozi.cn,后面我們會(huì)遷移到j(luò)etpack.net.cn。
總結(jié)
下期我們就開(kāi)發(fā)Flutter 主頁(yè)，遇到什么，需要借助什么，怎么寫(xiě)，為什么這么寫(xiě)，我們將在未來(lái)的博客中，帶你一步步實(shí)現(xiàn)一個(gè)完整的網(wǎng)站，隨我寫(xiě)下去。如果你想?yún)⑴c開(kāi)發(fā)，請(qǐng)私聊我，合作共贏，加油。
