/DegaVu

Deploy the Golang app to AppEngine. With Vue.

Primary LanguageVueMIT LicenseMIT

DegaVu

Deploy the Golang app to AppEngine. With Vue.

Description

DegaVu は、Golang のバックエンドと Vue.js のフロントエンドを持つアプリケーションを、AppEngine 上へ簡単に構築できるアプリケーション用テンプレートです。

Vue を採用するメリットである単一ファイルコンポーネンの良さを活かしつつ、GAE の開発用サーバーである dev_appserver を立ち上げながら開発できるよう、Vue の都度ビルドと事前ビルド無しで開発やデプロイが出来ます。

screen

DEMO:

DegaVu で提供される機能については以下で確認出来ます。

DEMO

Features

  • 単一ファイルコンポーネントっぽく Vue を使える
  • Webpack 等での事前ビルド不要でデプロイできる
  • 今時の Web アプリでよく使われる機能を実装済み
    • Google アカウントによるユーザー認証(別途 Firebase の設定が必要)
    • 検索対応
    • 切り替え可能なカード表示とリスト表示の両方をサポートしたコンテンツ表示
    • マテリアルデザインライクなコンテンツ追加ボタン
    • GoogleAnalytics
    • AdSense のインフィード広告
  • GAE 用にスタティックファイルハンドラ設定済み
  • CSS フレームワークとして Bulma.io を採用

Requipment

  • GCP アカウント
  • GAE プロジェクト
  • Firebase プロジェクト
  • Gcloud ライブラリ

Usage

  1. GCP の設定

    1. GoogleCloudConsoleで新しいプロジェクトを作成

    2. CloudShellを開く

    3. gcloud app create を実行し、適当なリージョンを選択

      • 速度優先なら asia-northeast1 を選択
      • FireStore を使うなら us-central を選択（2018/02 時点）

  2. Firebase の設定

    1. FirebaseConsoleでプロジェクトを追加して GCP と紐付ける
    2. Firebase の「Web アプリに Firebase を追加」からスニペットをコピーし、 web/static/js/firebase.js.sample を参考にして web/static/js/firebase.js を作成
    3. Firebase の Authentication を開き、ログイン方法 から Google を有効にする
    4. 承認済みドメイン に、 GAE の URL（ProjectID.appspot.com）もしくは独自ドメインを追加する

  3. ローカル PC での開発

    1.ターミナルから dev_appserver.py web/app.yaml を実行して開発用サーバーを立ち上げながら各ファイル(*.go, *.vue, *.html 等)を編集

  1. ローカル PC から GAE へデプロイ

    1. ターミナルで gcloud auth login を実行して GCP にログイン
    2. ターミナルで gcloud app deploy web/app.yaml --project=XXXXXX を実行して GAE にデプロイ（ProjectID は firebase.js 等を参照）

TODO

  • PWA の設定を追加
    • HomeScreen へのアイコン追加
    • Push 通知
    • OffLine 化

Thanks

Author

nobuihto.sato@gmail.com

License

MIT