Flutter - インストールからAzure Web Appに登録まで超々入門！

最近Flutterがいい！

とかよく言われてるので触ってみました！

私の場合はFlutterを利用してモバイルとかPC用のWeb環境を作ろうと思いました。余裕があったらそのままモバイルアプリも作れるからいいなと思ってこれを選択しましたね。

ここではWindows環境でVSCodeを利用してAzureのサーバーレスのWeb Appを利用する書込みです。マイナー過ぎて本当に大変でした。AzureのWeb AppにはFlutterを基本でサポートしてないのでNode.jsを利用してアップすることになります。

では早速Flutter SDKをダウンロードしましょう。

https://flutter.dev/docs/get-started/install

私はWindowsを使ってるのでWindowsを選びました。最近モバイル開発環境でよくMacを使ってるユーザーが多いですが、Windowsはマイナーになって書込みがあまりありません。色々想像しながらやるしかありませんでした。

次はFlutterをいじるツールをインストールしないとですね。

https://code.visualstudio.com/download

私の場合はVSCodeをよく使うためVSCodeにしました。

特にAndroidとかiOS用開発はしないと思いましたがスマホの仮想マシンもVSCodeから起動できることを知りました！

次はFlutterをVSCodeに繋ぎこみ！

ViewメニューからCommand Paletteを選択

上にカーソルが移動したらInstallをタイプ

するとメニューが出てきてExtensions: Install Extensionsを選択

左にExtensionが出てきたらFlutterを検索

Dart CodeのFlutterを選択してください。FlutterのExtensionがいっぱい出てきて何が公式なのか分からなかったので色々やってみたらこれでした。

インストールが終わったらFlutterが正常にインストールされたか確認ができます。

同じくCommandPaletteを開いてもいいですが、私は下のTerminalからやってきました。

PS> flutter doctor

そしたら何がいっぱい出てきてAndroid Studioがありませんとかの警告が出ました。Android Studioをインストールしないとと思ってインストールしましたが、後で見たら要らなかったみたいでした。( ﾉД`)ｼｸｼｸ…

上のスクショはAndroid Studioをインストールした後取りました。

早速作ってみよう！

View>Command Paletteから

flutterを入力するとFlutter: New Application Projectメニューが見えるので選択！

フォルダーを選択してプロジェクト名を入力すると選択したフォルダの配下にプロジェクト名のフォルダが作成されるので2重にフォルダが作られないようにしてください。

何がいっぱい出てきました。

Webブラウザで起動しましょう。

VSCodeの下に現在の作成環境が見えます。

No Deviceのところをクリックしてみると見せたい環境が選択できます。

私はChromeを選択しました。

そしてmain.dartを開いた状態で左のDebugボタンを押してみます。

Run and Debugボタンが見えたらクリック！

すると勝手にコンパイルしてChromeが起動して表示されます！

おお！作れました！

これをAzureにアップしてみましょう！

まずterminalから

flutter channel beta

flutter upgrade

flutter config --enable-web

そしてnode.jsをインストール。

https://nodejs.org/ja/download/

私は最新バージョンをインストールしました。それからvscodeのextensionに行ってnpm extensionをインストールします

よくわからないのであれこれインストールしてみましたがこれっぽいでした。

またVSCodeのTeminalで

npm install -g express-generator

express

npm install

なにか動いたら正常にインストールされたことです。もしダメだったらVSCodeを再起動してやってみてください。

node.jsのexpress-generatorをインストールしてexpressというWeb環境をダウンロードすることです。何か色々フォルダが作られました！

まだコード1行も書いてなかったので最近はなんでもできますね！

ではFlutterコードをビルドしましょう。

flutter build web

次はnodeの起動位置をビルドされたFlutterのファイルに移し替えます。

mkdir public-flutter

xcopy /s build\web public-flutter

作業フォルダからやってます。

public-flutterフォルダを作成してbuildすると作成されるbuild/webの全てをpublic-flutterにコピーします。まあ、スタートフォルダをbuild/webに指定してもいいですが、間違ってbuildした場合に大変だから念のため！

スタートファイルを指定しないとですね。

app.jsを開きます。

//これが原本

app.use(express.static(path.join(__dirname, 'public')));

//このように修正

app.use(express.static(path.join(__dirname, 'public-flutter')));

さて、AzureでWeb Appを作りましょう。

Azureアカウントはお持ちである程度の使い方は分かっている前提で書きます。

Node 12 LTSを選択して作ります。

次は、Githubにレポジトリーを作成します。

Githubは問題なく作れると思うので説明はパスしますね。

そしてAzureのWeb AppのDeploymentからGithubを繋ぎ込みます。

完成！

ではPushしましょう！

git init

git add .

git commit -m "first commit"

git branch -M main

git remote add origin https://github.com/<アカウント>/<レポジトリー>.git

git push -u origin main

では待ってみましょう！

AzureのDeploymentにLogがあるのであそこで現状が見れます。

GithubのActionから見るとコンパイルとアップロード状況なども見れます。

完了したらブラウザで確認！

大変よくできました！

さらにブラウザのエミュレーター機能でモバイルバージョンも見れます！

ではでは！