Zenn
👻

Flutter プロジェクトをVercelでデプロイする方法 2023/7月版

2023/07/09に公開
Flutter
Vercel
tech

はじめに

Next.jsをやったことがある方ならVercelに聞き馴染みがあると思います。
VercelはNext.jsの開発元が提供しているサービスです。
GitHubのアカウントのみで簡単にデプロイできる優れたサービスです。
ここではVercelを使ってFlutterプロジェクトのWebデプロイのステップを共有していきます。

必要な準備

  • GitHubアカウント
  • GitHubにデプロイしたいFlutterプロジェクトのリポジトリ

デプロイの流れ

  • Vercelアカウントの作成
  • プロジェクトの作成
  • リポジトリの選択
  • Flutterの設定

Vercelアカウントの作成

はじめにVercelのサイトからアカウントの作成をしてください。
GitHubアカウントで簡単に作成できます

すでにアカウントをお持ちの方はログインをしてください。

プロジェクトの作成

「Add New」からプロジェクトを作成します

リポジトリの選択

自分のGitHubアカウントが選択されていることを確認して「Import」でリポジトリを選択してください。

Flutterの設定

ここでFlutterの専用設定を行います。
「Project Name」は初期値のままで問題ないです。変更したければご自由に。
「Framework Preset」はOtherを選択してください。（場合によっては今後こちらにFlutterの項目が追加されこれ以降の設定が不要になる可能性があります 2023年7月現在）

「Build and Output Settings」を一度クリックし中のネストを開いてください。

右の「OVERRIDE」を3つクリックした状態でそれぞれに以下のコマンドを追加してください。

Build Command
flutter/bin/flutter build web --release
Output directory
build/web
Install command
if cd flutter; then git pull && cd .. ; else git clone https://github.com/flutter/flutter.git; fi && ls && flutter/bin/flutter doctor && flutter/bin/flutter clean && flutter/bin/flutter config --enable-web

最後に「Deploy」をクリックしてデプロイ完了です。お疲れ様でした。

デプロイには少々時間がかかります。デプロイが完了したら「Continue to Dashboard」か中央のボックスからデプロイ先のリンクに行けます。

こちらが今回実際にデプロイしたものです。

試しにクリックしてページに飛んでみてください。

終わりに

そこまで難しい設定なしでこんなに簡単にFlutterのWebプロジェクトがデプロイできるのは感激です。今後Vercelの対応で設定が簡略される可能性もあるので今回とは少し手順が変わるかもしてないです。他のフレームワークで同様なこともできそうなのでぜひ調べてみてください。

最後まで読んでいただきありがとうございます。
何かあればコメントください( ´ ▽ ` )ﾉ

Discussion