[Fluter] Google AppEngine에서 웹 애플리케이션을 디자인해 봤어요.

7442 단어 FlutterGCPtech
인터넷에서 계수기 응용 프로그램을 설계하려고 시도하다.
完成形

개시하다


Fluter 웹 응용 프로그램을 개발할 때 Firebase Hosting을 사용하는데 이번에는 Google AppEngine을 사용해 보십시오.일본어 기사가 거의 없으니 참고하면 좋을 것 같아요.

서비스 비교


Firebase hosting
왕도의 초대처입니다.징징거리면 기사가 많이 나와요.
Google Cloud Storage
대량 요금의 원가 우위가 매우 크기 때문에 규모화된 서비스를 추천합니다.따로 노력할 생각입니다.
Google App Engine
이른바 PaaS(Plaatform as a Service)다.GAE를 사용하면 시스템의 하중에 따라 GAE가 자동으로 측정됩니다.
자세한 차이를 알고 싶은 사람은 술자리를 모아 비교할 수 있는 사이트가 있으니 참고하세요.
https://medium.com/google-cloud-jp/정적 사이트 호스트의 gcs-gae-firebase-hosting 비교-e7d 406609f2e

할 일


구글 AppEngine을 사용하여 웹에 Fluter 웹 응용 프로그램 공개

개발 환경


マシン: Intel MacBook pro
エディタ: Android Studio
Flutter: 2.2.3
Python: 2.7.16   <- 意外と重要

일의 전반적 상황

  • Fluter 웹 응용 프로그램 만들기 프로젝트
  • FluterWeb 응용 프로그램에 적용됩니다.새 yaml
  • FluterWeb 응용프로그램의build
  • Google Cloud Plaatform 프로젝트 제작(이 글에서 생략)
  • Google Cloud SDK 설치
  • 설계
  • Fluter 웹 응용 프로그램 프로젝트 만들기


    Android Studio를 시작하여 Create New Fluter Project에서 새 Fluter 응용 프로그램을 만듭니다.
    나는 익숙한 카운터 프로그램이 일어설 것이라고 생각한다.

    FluterWeb 응용 프로그램에 적용됩니다.새로 만들기yaml


    프로젝트 산하 앱.새로 만들기yaml.pubspec.ymal을 복사하고 이름을 app로 변경한 후 만듭니다.

    app.yaml의 내용은 다음과 같습니다.runtime는 ptyhon이 아니어도 자바, PHP, Go, Node가 될 수 있습니다.js로 기다려도 돼요.이번에python을 사용합니다.
    app.yaml
    runtime: python27 #PCのpythonのバージョンに合わせる。2.7.16なのでpython27
    api_version: 1
    threadsafe: true
    
    handlers:
      - url: /
        static_files: build/web/index.html #deployしたあとの読み込みに行く場所なのでbuild/web/index.htmlとする
        upload: build/web/index.html
    
      - url: /(.*)
        static_files: build/web/\1
        upload: build/web/(.*)
    
    
    app.yaml의 설정이 잘못되면 프로그램이 잘 되고 있지만 웹 프로그램이 시작되지 않을 수 있으니 주의하십시오.

    FluterWeb 응용 프로그램의build


    터미널에서 다음을 수행합니다.
    command
    $ flutter web build
    
    만약, Missing indexhtml.나타나면 다음과 같이 하십시오.
    command
    $ flutter create .
    $ flutter build web
    
    프로젝트 아래에build 파일이 생성되었는지 확인하십시오.

    Google Cloud Platform 프로젝트 제작 (이 기사에서 생략)


    아래 공식 홈페이지 제작 프로젝트를 참고하세요.
    https://cloud.google.com/resource-manager/docs/creating-managing-projects?hl=ja

    Google Cloud SDK 설치


    Google Cloud SDK가 설치되어 있지 않은 경우 아래 기사를 참조하여 설치하십시오.
    https://qiita.com/G-awa/items/e6904b040caa0096fba0

    프로그램 설계


    Flutter 프로젝트 디렉토리에서 다음 작업을 수행합니다.
    command
    % gcloud app deploy
    
    욕을 먹었으면 참고이 보도로 경로를 지정해 주세요.
    command
    % source '/Users/ユーザー名/google-cloud-sdk/path.zsh.inc'
    
    프로그램 명령 다시 실행
    command
    % gcloud app deploy
    Services to deploy:
    
    descriptor:                  [/Users/ユーザー名/AndroidStudioProjects/flutter_counter_app/app.yaml]
    source:                      [/Users/ユーザー名/AndroidStudioProjects/flutter_counter_app]
    target project:              [GCPで作成したプロジェクト]
    target service:              [default]
    target version:              [数字が入る]
    target url:                  [公開されるwebのurl]
    target service account:      [App Engine default service account]
    
    
    Do you want to continue (Y/n)?  Y
    
    Beginning deployment of service [default]...
    ╔════════════════════════════════════════════════════════════╗
    ╠═ Uploading 1 file to Google Cloud Storage                 ═╣
    ╚════════════════════════════════════════════════════════════╝
    File upload done.
    Updating service [default]...done.                                                                                                       
    Setting traffic split for service [default]...done.                                                                                      
    Deployed service [default] to [公開されるwebのurl]
    
    You can stream logs from the command line by running:
      $ gcloud app logs tail -s default
    
    To view your application in the web browser run:
      $ gcloud app browse
    
    
    이렇게 하면 디버깅이 완료됩니다!
    다음 명령을 실행하면 프로그램이 시작됩니다.
    command
    $ gcloud app browse
    
    열심히 활동했어요!

    끝맺다


    사실 저는 Fluter 웹 응용 프로그램을 GCS로 설계하고 싶었지만 전혀 못해서 곤란할 때 긴장을 풀고 GAE 디자인을 해 봤습니다.초기 설정은 번거로웠지만 의외로 심플하게 디자인했다.

    참고 문장


    https://cloud.google.com/appengine/docs/standard/python/getting-started/hosting-a-static-website
    https://spltech.co.uk/how-to-deploy-flutter-webapp-using-google-appengine/
    https://spltech.co.uk/how-to-deploy-flutter-webapp-using-google-appengine/

    좋은 웹페이지 즐겨찾기