flutter1.9 나중에 웹 앱을 만들어서 Firebase hosting에 deploy를 올려주세요.
6389 단어 FlutterForWebFirebaseHosting
개시하다
※ 최초 기술은'fluter clean'Firebase입니다.제이슨 등이 사라져서 수정했어요.
flutter1.9부터 웹 응용 제작 기능이 호스트 통합Web support for Flutter으로 바뀌었고 다른 창고에 비해 방법이 좀 달라졌다.나는 가능한 한 간결하게 기재하고 싶다.
나는 유닉스계 사람들이 재독에 익숙해져서 윈도우즈를 대상으로 기술하고 있다고 생각한다.
전제는 flutter와 Firebase 명령을 가져왔습니다.
웹 응용 프로그램 만들기
웹 응용 프로그램을 만드는 데 유효한 명령이 있습니다.flutter config --enable-web
실행하면 프로젝트를 만들 때android와ios를 제외하고 웹 폴더를 생성합니다.D:\git>flutter create proj_qiita
Creating project proj_qiita... androidx: true
(略)
Running "flutter pub get" in proj_qiita... 6.7s
Wrote 69 files.
All done!
[√] Flutter: is fully installed. (Channel dev, v1.10.6, on Microsoft Windows [Version 10.0.17134.950], locale
ja-JP)
[√] Android toolchain - develop for Android devices: is fully installed. (Android SDK version 28.0.3)
[√] Chrome - develop for the web: is fully installed.
[√] Android Studio: is fully installed. (version 3.5)
[√] IntelliJ IDEA Community Edition: is fully installed. (version 2018.2)
[√] IntelliJ IDEA Community Edition: is fully installed. (version 2019.2)
[√] VS Code, 64-bit edition: is fully installed. (version 1.38.1)
[√] Connected device: is fully installed. (2 available)
In order to run your application, type:
$ cd proj_qiita
$ flutter run
Your application code is in proj_qiita\lib\main.dart.
D:\git>
완성된 항목에 들어가다.D:\git>cd proj_qiita
D:\git\proj_qiita>
그럼 이렇게 웹 애플리케이션을 구축합시다.D:\git\proj_qiita>flutter build web
Compiling lib\main.dart for the Web... 56.3s
D:\git\proj_qiita>
다 됐습니다.
잘하면dart_도구라는 폴더와build이라는 폴더가 완성되었습니다.
build에서 웹 폴더는 프로젝트의 바로 아래에 있는 웹 페이지와 분리되어 있습니다.D:\git\proj_qiita>dir build\web /w
ドライブ D のボリューム ラベルは ボリューム です
ボリューム シリアル番号は 8865-827E です
D:\git\proj_qiita\build\web のディレクトリ
[.] [..] [assets] index.html main.dart.js
main.dart.js.map 3 個のファイル (ノイズ除去)バイト
3 個のディレクトリ (ノイズ除去)バイトの空き領域
D:\git\proj_qiita>
deploy 이build\web이 있었으면 좋겠어요.
hosting 준비.
Firebase에 계정이 있고 firebase login으로 기술을 끝냅니다.
D:\git\proj_현재 디렉토리로 qita\build 을 firebase init 로 만듭니다.D:\git\proj_qiita>firebase init
######## #### ######## ######## ######## ### ###### ########
## ## ## ## ## ## ## ## ## ## ##
###### ## ######## ###### ######## ######### ###### ######
## ## ## ## ## ## ## ## ## ## ##
## #### ## ## ######## ######## ## ## ###### ########
You're about to initialize a Firebase project in this directory:
D:\git\proj_qiita
? Are you ready to proceed? Yes
? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter
to confirm your choices. Hosting: Configure and deploy Firebase Hosting sites
=== Project Setup
First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.
? Please select an option: Create a new project
i If you want to create a project in a Google Cloud organization or folder, please use "firebase projects:create" instead, and return to this command when you've created the project.
? Please specify a unique project id (warning: cannot be modified afterward) [6-30 characters]:
proj-qiita
? What would you like to call your project? (defaults to your project ID)
√ Creating Google Cloud Platform project
√ Adding Firebase resources to Google Cloud Platform project
=== Your Firebase project is ready! ===
Project information:
- Project ID: proj-qiita
- Project Name: proj-qiita
Firebase console is available at
https://console.firebase.google.com/project/proj-qiita/overview
i Using project proj-qiita (proj-qiita)
=== Hosting Setup
Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.
? What do you want to use as your public directory? build\web
? Configure as a single-page app (rewrite all urls to /index.html)? No
+ Wrote web/404.html
? File web/index.html already exists. Overwrite? No
i Skipping write of web/index.html
i Writing configuration info to firebase.json...
i Writing project information to .firebaserc...
i Writing gitignore file to .gitignore...
+ Firebase initialization complete!
D:\git\proj_qiita>
fluter 프로젝트 이름의projqita와 Firebase 프로젝트 이름의proj-qita의 차이는 기호의 제한 때문이다.
맞춤법이 틀린 것도 아니고 무의미한 것도 아니다.
? What do you want to use as your public directory? build\web
구문을 사용합니다.qita\build\web의 컨텐트가hosting으로 대칭복사됩니다.
앞으로 index.작업 중에 "}"을 덮어쓰지 마십시오.
마지막으로 deploy.D:\git\proj_qiita>firebase deploy
=== Deploying to 'proj-qiita'...
i deploying hosting
i hosting[proj-qiita]: beginning deploy...
i hosting[proj-qiita]: found 9 files in web
+ hosting[proj-qiita]: file upload complete
i hosting[proj-qiita]: finalizing version...
+ hosting[proj-qiita]: version finalized
i hosting[proj-qiita]: releasing new version...
+ hosting[proj-qiita]: release complete
+ Deploy complete!
Project Console: https://console.firebase.google.com/project/proj-qiita/overview
Hosting URL: https://proj-qiita.firebaseapp.com
D:\git\proj_qiita>
나는 정상적으로 끝났다고 생각한다.
등록된 웹 사이트 열기
그럼 https://proj-qiita.firebaseapp.com열어 보세요.
가장 작은 절차는 이렇게 간단하다.
부기
hosting 이외의 프로젝트를 사용하더라도build 폴더에서 Firebase 프로젝트를 만들어서 활용할 수 있을 것 같습니다.
난독화 등 발행 빌딩으로 만들면 마음대로 할 수 있을 것 같다(미검증).
appendix:
Preparing a web app for release
Reference
이 문제에 관하여(flutter1.9 나중에 웹 앱을 만들어서 Firebase hosting에 deploy를 올려주세요.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/kendji/items/e24089fa55c06806eaa1
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
웹 응용 프로그램을 만드는 데 유효한 명령이 있습니다.
flutter config --enable-web
실행하면 프로젝트를 만들 때android와ios를 제외하고 웹 폴더를 생성합니다.D:\git>flutter create proj_qiita
Creating project proj_qiita... androidx: true
(略)
Running "flutter pub get" in proj_qiita... 6.7s
Wrote 69 files.
All done!
[√] Flutter: is fully installed. (Channel dev, v1.10.6, on Microsoft Windows [Version 10.0.17134.950], locale
ja-JP)
[√] Android toolchain - develop for Android devices: is fully installed. (Android SDK version 28.0.3)
[√] Chrome - develop for the web: is fully installed.
[√] Android Studio: is fully installed. (version 3.5)
[√] IntelliJ IDEA Community Edition: is fully installed. (version 2018.2)
[√] IntelliJ IDEA Community Edition: is fully installed. (version 2019.2)
[√] VS Code, 64-bit edition: is fully installed. (version 1.38.1)
[√] Connected device: is fully installed. (2 available)
In order to run your application, type:
$ cd proj_qiita
$ flutter run
Your application code is in proj_qiita\lib\main.dart.
D:\git>
완성된 항목에 들어가다.D:\git>cd proj_qiita
D:\git\proj_qiita>
그럼 이렇게 웹 애플리케이션을 구축합시다.D:\git\proj_qiita>flutter build web
Compiling lib\main.dart for the Web... 56.3s
D:\git\proj_qiita>
다 됐습니다.잘하면dart_도구라는 폴더와build이라는 폴더가 완성되었습니다.
build에서 웹 폴더는 프로젝트의 바로 아래에 있는 웹 페이지와 분리되어 있습니다.
D:\git\proj_qiita>dir build\web /w
ドライブ D のボリューム ラベルは ボリューム です
ボリューム シリアル番号は 8865-827E です
D:\git\proj_qiita\build\web のディレクトリ
[.] [..] [assets] index.html main.dart.js
main.dart.js.map 3 個のファイル (ノイズ除去)バイト
3 個のディレクトリ (ノイズ除去)バイトの空き領域
D:\git\proj_qiita>
deploy 이build\web이 있었으면 좋겠어요.hosting 준비.
Firebase에 계정이 있고 firebase login으로 기술을 끝냅니다.
D:\git\proj_현재 디렉토리로 qita\build 을 firebase init 로 만듭니다.D:\git\proj_qiita>firebase init
######## #### ######## ######## ######## ### ###### ########
## ## ## ## ## ## ## ## ## ## ##
###### ## ######## ###### ######## ######### ###### ######
## ## ## ## ## ## ## ## ## ## ##
## #### ## ## ######## ######## ## ## ###### ########
You're about to initialize a Firebase project in this directory:
D:\git\proj_qiita
? Are you ready to proceed? Yes
? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter
to confirm your choices. Hosting: Configure and deploy Firebase Hosting sites
=== Project Setup
First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.
? Please select an option: Create a new project
i If you want to create a project in a Google Cloud organization or folder, please use "firebase projects:create" instead, and return to this command when you've created the project.
? Please specify a unique project id (warning: cannot be modified afterward) [6-30 characters]:
proj-qiita
? What would you like to call your project? (defaults to your project ID)
√ Creating Google Cloud Platform project
√ Adding Firebase resources to Google Cloud Platform project
=== Your Firebase project is ready! ===
Project information:
- Project ID: proj-qiita
- Project Name: proj-qiita
Firebase console is available at
https://console.firebase.google.com/project/proj-qiita/overview
i Using project proj-qiita (proj-qiita)
=== Hosting Setup
Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.
? What do you want to use as your public directory? build\web
? Configure as a single-page app (rewrite all urls to /index.html)? No
+ Wrote web/404.html
? File web/index.html already exists. Overwrite? No
i Skipping write of web/index.html
i Writing configuration info to firebase.json...
i Writing project information to .firebaserc...
i Writing gitignore file to .gitignore...
+ Firebase initialization complete!
D:\git\proj_qiita>
fluter 프로젝트 이름의projqita와 Firebase 프로젝트 이름의proj-qita의 차이는 기호의 제한 때문이다.
맞춤법이 틀린 것도 아니고 무의미한 것도 아니다.
? What do you want to use as your public directory? build\web
구문을 사용합니다.qita\build\web의 컨텐트가hosting으로 대칭복사됩니다.
앞으로 index.작업 중에 "}"을 덮어쓰지 마십시오.
마지막으로 deploy.D:\git\proj_qiita>firebase deploy
=== Deploying to 'proj-qiita'...
i deploying hosting
i hosting[proj-qiita]: beginning deploy...
i hosting[proj-qiita]: found 9 files in web
+ hosting[proj-qiita]: file upload complete
i hosting[proj-qiita]: finalizing version...
+ hosting[proj-qiita]: version finalized
i hosting[proj-qiita]: releasing new version...
+ hosting[proj-qiita]: release complete
+ Deploy complete!
Project Console: https://console.firebase.google.com/project/proj-qiita/overview
Hosting URL: https://proj-qiita.firebaseapp.com
D:\git\proj_qiita>
나는 정상적으로 끝났다고 생각한다.
등록된 웹 사이트 열기
그럼 https://proj-qiita.firebaseapp.com열어 보세요.
가장 작은 절차는 이렇게 간단하다.
부기
hosting 이외의 프로젝트를 사용하더라도build 폴더에서 Firebase 프로젝트를 만들어서 활용할 수 있을 것 같습니다.
난독화 등 발행 빌딩으로 만들면 마음대로 할 수 있을 것 같다(미검증).
appendix:
Preparing a web app for release
Reference
이 문제에 관하여(flutter1.9 나중에 웹 앱을 만들어서 Firebase hosting에 deploy를 올려주세요.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/kendji/items/e24089fa55c06806eaa1
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
D:\git\proj_qiita>firebase init
######## #### ######## ######## ######## ### ###### ########
## ## ## ## ## ## ## ## ## ## ##
###### ## ######## ###### ######## ######### ###### ######
## ## ## ## ## ## ## ## ## ## ##
## #### ## ## ######## ######## ## ## ###### ########
You're about to initialize a Firebase project in this directory:
D:\git\proj_qiita
? Are you ready to proceed? Yes
? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter
to confirm your choices. Hosting: Configure and deploy Firebase Hosting sites
=== Project Setup
First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.
? Please select an option: Create a new project
i If you want to create a project in a Google Cloud organization or folder, please use "firebase projects:create" instead, and return to this command when you've created the project.
? Please specify a unique project id (warning: cannot be modified afterward) [6-30 characters]:
proj-qiita
? What would you like to call your project? (defaults to your project ID)
√ Creating Google Cloud Platform project
√ Adding Firebase resources to Google Cloud Platform project
=== Your Firebase project is ready! ===
Project information:
- Project ID: proj-qiita
- Project Name: proj-qiita
Firebase console is available at
https://console.firebase.google.com/project/proj-qiita/overview
i Using project proj-qiita (proj-qiita)
=== Hosting Setup
Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.
? What do you want to use as your public directory? build\web
? Configure as a single-page app (rewrite all urls to /index.html)? No
+ Wrote web/404.html
? File web/index.html already exists. Overwrite? No
i Skipping write of web/index.html
i Writing configuration info to firebase.json...
i Writing project information to .firebaserc...
i Writing gitignore file to .gitignore...
+ Firebase initialization complete!
D:\git\proj_qiita>
D:\git\proj_qiita>firebase deploy
=== Deploying to 'proj-qiita'...
i deploying hosting
i hosting[proj-qiita]: beginning deploy...
i hosting[proj-qiita]: found 9 files in web
+ hosting[proj-qiita]: file upload complete
i hosting[proj-qiita]: finalizing version...
+ hosting[proj-qiita]: version finalized
i hosting[proj-qiita]: releasing new version...
+ hosting[proj-qiita]: release complete
+ Deploy complete!
Project Console: https://console.firebase.google.com/project/proj-qiita/overview
Hosting URL: https://proj-qiita.firebaseapp.com
D:\git\proj_qiita>
그럼 https://proj-qiita.firebaseapp.com열어 보세요.
가장 작은 절차는 이렇게 간단하다.
부기
hosting 이외의 프로젝트를 사용하더라도build 폴더에서 Firebase 프로젝트를 만들어서 활용할 수 있을 것 같습니다.
난독화 등 발행 빌딩으로 만들면 마음대로 할 수 있을 것 같다(미검증).
appendix:
Preparing a web app for release
Reference
이 문제에 관하여(flutter1.9 나중에 웹 앱을 만들어서 Firebase hosting에 deploy를 올려주세요.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/kendji/items/e24089fa55c06806eaa1
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(flutter1.9 나중에 웹 앱을 만들어서 Firebase hosting에 deploy를 올려주세요.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/kendji/items/e24089fa55c06806eaa1텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)