12,673
回編集
差分
ナビゲーションに移動
検索に移動
→設定の確認
| [[Angular]] | [[Firebase]] | [[Google Cloud Platform]] |==[[Angular ]] [[Firebase ]] 構築手順==[https://www.typea.info/blog/index.php/2020/04/04/firebase-hosting-firestore-release/ Firebase Hosting に Angular を統合して Firestore に接続]
===[[Angular]]===
*project name : typea-info-service
===[[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>
© 2006 矢木浩人
