據外媒報道,在世界各地嚴格執行「封城」措施,促使遠程工做和學習激增後,全球對我的電腦(PC)的需求在2020年第一季度飆升。但這場危機也致使生產和物流問題嚴重延誤,最終致使全球PC出貨量同比降低8%,蘋果Mac更是狂降21%。javascript
本篇文章來自i校長的投稿,分享了他對用Flutter 搭建我的網站的過程,相信會對你們有所幫助!同時也感謝做者貢獻的精彩文章。html
i校長的博客地址:java
曾幾什麼時候,你有沒有一個搭我的網站的衝動,我這個想法在我第一次開始寫博客就有了,可就是沒有搭起來,直到我看到flutter有了web支持,我就在想,是時候了,必須且必定要作,因而乎我就搭建瞭如今的網站ibaozi.cn,代碼開源至nginx
而此次我要作的並非基於這個網站開發,我再次申請了一個新域名jetpack.net.cn,讀過我以前的博客可能直到,我作了一個Android Jetpack模版項目在線生成工具,我申請這個就是爲了將Android Jetpack整合進來,提供一個好記的域名。github
固然我還有另外一項計劃,就是作一個Flutter 生態的Jetpack,此次博客就是計劃的第一步,徹底開源給你們,讓讀我博客的同窗們,跟我一塊兒搭建一個網站,順便學習Flutter技術,好了很少說了,接下來,讓咱們看看如何搭建這個網站。web
Flutter面試
須要切換beta版原本支持web開發。環境搭建跳至以前博客:Flutter系列之環境搭建。chrome
Node
下載跳至:下載| Node.js。
環境配置:Node.js 安裝配置。
腳手架:Express 生成器。
具體操做步驟請往下看。
僞裝你已經搭建好環境。
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,須要等待一下子。
項目建立成功了。這裏就到這,後期博客慢慢介紹每次開發的細節。
咱們直接打開Flutter項目的Terminal。
mkdir node mkdir server cd node/server
進入server目錄,如今你的node環境應該也能夠了吧,好開始用Express 生成器生成項目。
npm install express-generator -g //安裝好了略過 express --view=pug myapp
</pre>
修改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文件到指定目錄等等,這些以後慢慢補全哦。
若是你正在尋找 Flutter 的學習資源,下面我整理了一些關於 Flutter的資料,須要的私信( Flutter)我分享給你。這份資料能夠幫助新手開始 Flutter 的旅程,也能夠幫已經瞭解過這方面的朋友更進一步。但願能幫到大家。
若是你有其餘須要的話,也能夠在 GitHub 上查看,下面的資料也會陸續上傳到Github
將代碼上傳至github:
登上你的雲服務器,經過git 將項目下載到服務器上,這裏咱們須要工具輔助咱們服務部署。我選擇pm2+nginx來將個人服務啓動起來。
這裏不詳細說了,網上有一片大海,須要你去浪。有問題的留言我,我能夠協助你。最終經過pm2 和 nginx ,項目完美運行。沒錯你看到的是jetpack.ibaozi.cn,哈哈,域名還沒下來,先用了以前的ibaozi.cn,後面咱們會遷移到jetpack.net.cn。