| ページ一覧 | ブログ | twitter |　 書式 | 書式(表) |

MyMemoWiki

「Angular Firebase 構築手順」の版間の差分

提供: MyMemoWiki
ナビゲーションに移動 検索に移動
 
(同じ利用者による、間の15版が非表示)
1行目: 1行目:
−
| [[Angular]] | [[Firebase]] |
+
| [[Angular]] | [[Firebase]] | [[Google Cloud Platform]] |
−
==Angular Firebase 構築手順==
+
==[[Angular]] [[Firebase]] 構築手順==
−
 
+
[https://www.typea.info/blog/index.php/2020/04/04/firebase-hosting-firestore-release/ Firebase Hosting に Angular を統合して Firestore に接続]
−
===[[Angluar]]===
+
===[[Angular]]===
 
*project name : typea-info-service
 
*project name : typea-info-service
 
<pre>
 
<pre>
16行目: 16行目:
  
 
===[[Firebase]]===
 
===[[Firebase]]===
 +
*必要なモジュールなどを対話で選択
 +
<pre>
 +
$ cd typea-info-service
 +
$ firebase init
 +
</pre>
 +
 +
====Config====
 +
*https://www.typea.info/blog/index.php/2020/04/04/firebase-hosting-firestore-release/
 +
*Firebase Consoleの以下から取得
 +
[[File:fire_base_condig01.png|400px]]
 +
 +
[[File:fire_base_condig02.png|400px]]
 +
<pre>
 +
Config
 +
export const environment = {
 +
  production: false,
 +
  firebase: {
 +
    apiKey: '<your-key>',
 +
    authDomain: '<your-project-authdomain>',// {project-id}.firebaseapp.com
 +
    databaseURL: '<your-database-URL>',// https://{project-id}.firebaseio.com
 +
    projectId: '<your-project-id>',
 +
    storageBucket: '<your-storage-bucket>',// {project-id}.appspot.com
 +
    messagingSenderId: '<your-messaging-sender-id>'
 +
  }
 +
};
 +
</pre>
 +
====設定の確認====
 +
*firebase.json の hosting/public デプロイ対象のフォルダを、Angularのビルド先の フォルダ(angular.json の outputPath)、distに変更する
 +
<pre>
 +
“hosting”: {
 +
    “public”: “dist”,
 +
</pre>
 +
 +
*Hostingの設定/設定解除
 +
<pre>
 +
$ firebase target:apply hosting typea-info-service
 +
$ firebase target:clear hosting typea-info-service
 +
</pre>
 +
*確認
 +
<pre>
 +
$ firebase target
 +
Resource targets for typea-info-service:
 +
 +
[ hosting ]
 +
typea-info-service (typea-info-service)
 +
</pre>
 +
 +
===Angular Fire===
 +
*https://github.com/angular/angularfire/blob/master/docs/install-and-setup.md
 +
<pre>
 +
$ ng add @angular/fire@next
 +
$ npm install firebase @angular/fire --save
 +
</pre>
 +
 +
===Angular Material===
 +
*https://material.angular.io/
 +
<pre>
 +
$ ng add @angular/material
 +
</pre>

2020年10月31日 (土) 03:01時点における最新版

| Angular | Firebase | Google Cloud Platform |

Angular Firebase 構築手順

Firebase Hosting に Angular を統合して Firestore に接続

Angular

  • project name : typea-info-service
$ npm install -g @angular/cli
$ ng new typea-info-service
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS   [ https://sass-lang.com/documentation/syntax#scss               
 ]
CREATE typea-info-service/README.md (1035 bytes)
            :
$ ng serve

Firebase

  • 必要なモジュールなどを対話で選択
$ cd typea-info-service
$ firebase init

Config

Fire base condig01.png

Fire base condig02.png 

Config 
export const environment = {
  production: false,
  firebase: {
    apiKey: '<your-key>',
    authDomain: '<your-project-authdomain>',// {project-id}.firebaseapp.com
    databaseURL: '<your-database-URL>',// https://{project-id}.firebaseio.com 
    projectId: '<your-project-id>',
    storageBucket: '<your-storage-bucket>',// {project-id}.appspot.com
    messagingSenderId: '<your-messaging-sender-id>'
  }
};

設定の確認

  • firebase.json の hosting/public デプロイ対象のフォルダを、Angularのビルド先の フォルダ(angular.json の outputPath)、distに変更する
“hosting”: {
     “public”: “dist”,
  • Hostingの設定/設定解除
$ firebase target:apply hosting typea-info-service
$ firebase target:clear hosting typea-info-service
  • 確認
$ firebase target
Resource targets for typea-info-service:

[ hosting ]
typea-info-service (typea-info-service)

Angular Fire

$ ng add @angular/fire@next
$ npm install firebase @angular/fire --save

Angular Material

$ ng add @angular/material
「https://www.typea.info/tips_/index.php?title=Angular_Firebase_構築手順&oldid=30755」から取得

© 2006 矢木浩人