8
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Flutterで作ったweb app をGithub Pagesにデプロイする

Last updated at Posted at 2019-11-09

#下準備
##まずは最新版にする。
なにせflutter_webは正式サポートではないので、最新でないと動くかどうかもわからない。devのほうがよいというタイミングすらあります。

flutter channel master
flutter upgrade 

##web機能を有効化します

flutter config --enable-web

##flutterプロジェクトのテンプレ状態を作成します。
自分で作成したプロジェクトディレクトリに移動して、flutterプロジェクトのテンプレ状態を作成します。
現在、動作テストできる環境はchromeのみです
※注:すでに存在するiOSやAndoroid用のプロジェクトをwebで使おうとする場合には、それ用のマニュアルがあるそうなので、そちらを参照してください。

cd <あなたのプロジェクトディレクトリ>
flutter create .

##デフォルトの画面がchrome上に出てくるはずです

flutter run -d chrome

##web用のビルドを行います

flutter build web

##ビルド結果はこの位置にできます
プロジェクトフォルダの直下にbuildその中にwebができているはずです。

image.png

#Githubにデプロイ
##ログインしてレポジトリ作成
https://github.com/
にログインしてレポジトリを作成します。このとき、username.github.io の用になるようにしてください。
GitHub Pagesについての細かい話は公式を参照ください。https://pages.github.com/

私が作成する場合(すでに作った後なので警告が出ている)
image.png

##web公開するものを配置するディレクトリを作る
空っぽで構いません。とりあえずローカルにディレクトリを作ります。
ディレクトリを作成したら、そのディレクトリにデプロイ先をクローンします。
多分なにもないか、README.MDがあるかくらいだと思います。

cd <web公開するものを配置するディレクトリ>
git clone https://github.com/ClozedJP/ClozedJP.github.io.git

##クローンしたレポジトリのフォルダ内に公開したい内容を配置
buildフォルダ内のwebのフォルダごと投入します。
このときにwebのフォルダの名前を自分のプロジェクトの名前などに変更しておくと後でわかりやすいかもしれませんね

image.png

##配置した内容をpushする
配置した内容をGithub側にプッシュします。
※注:Github Desktopなどでpushする人もいると思いますので、その場合はGithub Desktopでpushしてください。

git add --all
git commit -m "Initial commit"
git push -u origin master

##Github側の状態を確認する
私がデプロイした先はこんな感じになります。

image.png

デプロイしたWeb App のURLは

https://username.github.io/フォルダ名

私の作成したappの動作状態はこちら。みなさんのURLも似たような形になると思います。
https://clozedjp.github.io/adventure/

8
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?