Submit Search
Upload
MonacaでPWAを作ってデプロイしよう!~MonacaでPWAをとりあえず公開したい!!~
•
2 likes
•
2,038 views
Daisuke Yamashita
Follow
MonacaでPWAを作ってデプロイしよう!~MonacaでPWAをとりあえず公開したい!!~
Read less
Read more
Engineering
Report
Share
Report
Share
1 of 66
Download now
Download to read offline
Recommended
【16-E-4】残業ゼロで開発スピードが10倍に!もう元の開発体制には戻れないデンソー流のアジャイル開発
【16-E-4】残業ゼロで開発スピードが10倍に!もう元の開発体制には戻れないデンソー流のアジャイル開発
Developers Summit
Azure Data Box Family Overview and Microsoft Intelligent Edge Strategy
Azure Data Box Family Overview and Microsoft Intelligent Edge Strategy
Takeshi Fukuhara
[Cloud OnAir] クラウドからエッジまで!進化する GCP の IoT サービス 2018年11月22日 放送
[Cloud OnAir] クラウドからエッジまで!進化する GCP の IoT サービス 2018年11月22日 放送
Google Cloud Platform - Japan
WebRTC開発者向けプラットフォーム SkyWayの裏側
WebRTC開発者向けプラットフォーム SkyWayの裏側
Yusuke Naka
⼤企業で実現するイマドキの内製開発
⼤企業で実現するイマドキの内製開発
NTT Communications Technology Development
Kubernetesによる機械学習基盤への挑戦
Kubernetesによる機械学習基盤への挑戦
Preferred Networks
プロダクション環境でオンラインで機械学習を動かすにあたってツライ話 #MLCT
プロダクション環境でオンラインで機械学習を動かすにあたってツライ話 #MLCT
Tokoroten Nakayama
正しいものを正しくつくる
正しいものを正しくつくる
toshihiro ichitani
Recommended
【16-E-4】残業ゼロで開発スピードが10倍に!もう元の開発体制には戻れないデンソー流のアジャイル開発
【16-E-4】残業ゼロで開発スピードが10倍に!もう元の開発体制には戻れないデンソー流のアジャイル開発
Developers Summit
Azure Data Box Family Overview and Microsoft Intelligent Edge Strategy
Azure Data Box Family Overview and Microsoft Intelligent Edge Strategy
Takeshi Fukuhara
[Cloud OnAir] クラウドからエッジまで!進化する GCP の IoT サービス 2018年11月22日 放送
[Cloud OnAir] クラウドからエッジまで!進化する GCP の IoT サービス 2018年11月22日 放送
Google Cloud Platform - Japan
WebRTC開発者向けプラットフォーム SkyWayの裏側
WebRTC開発者向けプラットフォーム SkyWayの裏側
Yusuke Naka
⼤企業で実現するイマドキの内製開発
⼤企業で実現するイマドキの内製開発
NTT Communications Technology Development
Kubernetesによる機械学習基盤への挑戦
Kubernetesによる機械学習基盤への挑戦
Preferred Networks
プロダクション環境でオンラインで機械学習を動かすにあたってツライ話 #MLCT
プロダクション環境でオンラインで機械学習を動かすにあたってツライ話 #MLCT
Tokoroten Nakayama
正しいものを正しくつくる
正しいものを正しくつくる
toshihiro ichitani
『モビリティ・インテリジェンス』の社会実装 [DeNA TechCon 2019]
『モビリティ・インテリジェンス』の社会実装 [DeNA TechCon 2019]
DeNA
AR / VR / MRの世界に、置けるUI、置けないUI、置くべきUI
AR / VR / MRの世界に、置けるUI、置けないUI、置くべきUI
Koichi Tanaka
ドコモオープンイノベーションの取り組みと提供APIのIoT展開について
ドコモオープンイノベーションの取り組みと提供APIのIoT展開について
API Meetup
オーバーエンジニアリングって何? #devsumi #devsumiA
オーバーエンジニアリングって何? #devsumi #devsumiA
Ore Product
CEDEC2019 大規模モバイルゲーム運用におけるマスタデータ管理事例
CEDEC2019 大規模モバイルゲーム運用におけるマスタデータ管理事例
sairoutine
プログラマが欲しい仕様書とは
プログラマが欲しい仕様書とは
Katsutoshi Makino
大規模オンプレミス環境はGitOpsの夢を見るか(CI/CD Conference 2021 by CloudNative Days 発表資料)
大規模オンプレミス環境はGitOpsの夢を見るか(CI/CD Conference 2021 by CloudNative Days 発表資料)
NTT DATA Technology & Innovation
ライセンスを理解してますか?知っておきたいWordPressとGPLライセンス
ライセンスを理解してますか?知っておきたいWordPressとGPLライセンス
Jun Nogata
マイクロサービスっぽい感じの話
マイクロサービスっぽい感じの話
Makoto Haruyama
良くわかるMeta
良くわかるMeta
daichi horio
UnityでUI開発を高速化した件
UnityでUI開発を高速化した件
Grenge, Inc.
(Fix)Azure Network Security Group(NSG)のおさらい
(Fix)Azure Network Security Group(NSG)のおさらい
Yoshimasa Katakura
LTを支える技術(LLD'11 Winter)
LTを支える技術(LLD'11 Winter)
masayoshi takahashi
【Unity道場スペシャル 2017幕張】続 あそびのデザイン講座
【Unity道場スペシャル 2017幕張】続 あそびのデザイン講座
Unity Technologies Japan K.K.
OpenXR + XR Interaction Toolkit使ったHoloLensコンテンツ開発検証 ~ (私が)完全に理解できたらちゃんと作れて、いろ...
OpenXR + XR Interaction Toolkit使ったHoloLensコンテンツ開発検証 ~ (私が)完全に理解できたらちゃんと作れて、いろ...
Takahiro Miyaura
WebRTCの技術解説 第二版 公開版 本編
WebRTCの技術解説 第二版 公開版 本編
Contest Ntt-west
コンシューマゲーム開発におけるHansoftの活用事例
コンシューマゲーム開発におけるHansoftの活用事例
Hiroyuki Tanaka
絶対に止まらないバックボーン
絶対に止まらないバックボーン
IIJ
Unity dojo amplifyshadereditor101_jpn-jp
Unity dojo amplifyshadereditor101_jpn-jp
小林 信行
SharePoint Online を JavaScript でイジる。
SharePoint Online を JavaScript でイジる。
Hirofumi Ota
Monacaを使ってアプリ開発ビジネスを加速させ、そして色々と苦労した話~
Monacaを使ってアプリ開発ビジネスを加速させ、そして色々と苦労した話~
Daisuke Yamashita
Monaca X PWA X 3D
Monaca X PWA X 3D
Daisuke Yamashita
More Related Content
What's hot
『モビリティ・インテリジェンス』の社会実装 [DeNA TechCon 2019]
『モビリティ・インテリジェンス』の社会実装 [DeNA TechCon 2019]
DeNA
AR / VR / MRの世界に、置けるUI、置けないUI、置くべきUI
AR / VR / MRの世界に、置けるUI、置けないUI、置くべきUI
Koichi Tanaka
ドコモオープンイノベーションの取り組みと提供APIのIoT展開について
ドコモオープンイノベーションの取り組みと提供APIのIoT展開について
API Meetup
オーバーエンジニアリングって何? #devsumi #devsumiA
オーバーエンジニアリングって何? #devsumi #devsumiA
Ore Product
CEDEC2019 大規模モバイルゲーム運用におけるマスタデータ管理事例
CEDEC2019 大規模モバイルゲーム運用におけるマスタデータ管理事例
sairoutine
プログラマが欲しい仕様書とは
プログラマが欲しい仕様書とは
Katsutoshi Makino
大規模オンプレミス環境はGitOpsの夢を見るか(CI/CD Conference 2021 by CloudNative Days 発表資料)
大規模オンプレミス環境はGitOpsの夢を見るか(CI/CD Conference 2021 by CloudNative Days 発表資料)
NTT DATA Technology & Innovation
ライセンスを理解してますか?知っておきたいWordPressとGPLライセンス
ライセンスを理解してますか?知っておきたいWordPressとGPLライセンス
Jun Nogata
マイクロサービスっぽい感じの話
マイクロサービスっぽい感じの話
Makoto Haruyama
良くわかるMeta
良くわかるMeta
daichi horio
UnityでUI開発を高速化した件
UnityでUI開発を高速化した件
Grenge, Inc.
(Fix)Azure Network Security Group(NSG)のおさらい
(Fix)Azure Network Security Group(NSG)のおさらい
Yoshimasa Katakura
LTを支える技術(LLD'11 Winter)
LTを支える技術(LLD'11 Winter)
masayoshi takahashi
【Unity道場スペシャル 2017幕張】続 あそびのデザイン講座
【Unity道場スペシャル 2017幕張】続 あそびのデザイン講座
Unity Technologies Japan K.K.
OpenXR + XR Interaction Toolkit使ったHoloLensコンテンツ開発検証 ~ (私が)完全に理解できたらちゃんと作れて、いろ...
OpenXR + XR Interaction Toolkit使ったHoloLensコンテンツ開発検証 ~ (私が)完全に理解できたらちゃんと作れて、いろ...
Takahiro Miyaura
WebRTCの技術解説 第二版 公開版 本編
WebRTCの技術解説 第二版 公開版 本編
Contest Ntt-west
コンシューマゲーム開発におけるHansoftの活用事例
コンシューマゲーム開発におけるHansoftの活用事例
Hiroyuki Tanaka
絶対に止まらないバックボーン
絶対に止まらないバックボーン
IIJ
Unity dojo amplifyshadereditor101_jpn-jp
Unity dojo amplifyshadereditor101_jpn-jp
小林 信行
SharePoint Online を JavaScript でイジる。
SharePoint Online を JavaScript でイジる。
Hirofumi Ota
What's hot
(20)
『モビリティ・インテリジェンス』の社会実装 [DeNA TechCon 2019]
『モビリティ・インテリジェンス』の社会実装 [DeNA TechCon 2019]
AR / VR / MRの世界に、置けるUI、置けないUI、置くべきUI
AR / VR / MRの世界に、置けるUI、置けないUI、置くべきUI
ドコモオープンイノベーションの取り組みと提供APIのIoT展開について
ドコモオープンイノベーションの取り組みと提供APIのIoT展開について
オーバーエンジニアリングって何? #devsumi #devsumiA
オーバーエンジニアリングって何? #devsumi #devsumiA
CEDEC2019 大規模モバイルゲーム運用におけるマスタデータ管理事例
CEDEC2019 大規模モバイルゲーム運用におけるマスタデータ管理事例
プログラマが欲しい仕様書とは
プログラマが欲しい仕様書とは
大規模オンプレミス環境はGitOpsの夢を見るか(CI/CD Conference 2021 by CloudNative Days 発表資料)
大規模オンプレミス環境はGitOpsの夢を見るか(CI/CD Conference 2021 by CloudNative Days 発表資料)
ライセンスを理解してますか?知っておきたいWordPressとGPLライセンス
ライセンスを理解してますか?知っておきたいWordPressとGPLライセンス
マイクロサービスっぽい感じの話
マイクロサービスっぽい感じの話
良くわかるMeta
良くわかるMeta
UnityでUI開発を高速化した件
UnityでUI開発を高速化した件
(Fix)Azure Network Security Group(NSG)のおさらい
(Fix)Azure Network Security Group(NSG)のおさらい
LTを支える技術(LLD'11 Winter)
LTを支える技術(LLD'11 Winter)
【Unity道場スペシャル 2017幕張】続 あそびのデザイン講座
【Unity道場スペシャル 2017幕張】続 あそびのデザイン講座
OpenXR + XR Interaction Toolkit使ったHoloLensコンテンツ開発検証 ~ (私が)完全に理解できたらちゃんと作れて、いろ...
OpenXR + XR Interaction Toolkit使ったHoloLensコンテンツ開発検証 ~ (私が)完全に理解できたらちゃんと作れて、いろ...
WebRTCの技術解説 第二版 公開版 本編
WebRTCの技術解説 第二版 公開版 本編
コンシューマゲーム開発におけるHansoftの活用事例
コンシューマゲーム開発におけるHansoftの活用事例
絶対に止まらないバックボーン
絶対に止まらないバックボーン
Unity dojo amplifyshadereditor101_jpn-jp
Unity dojo amplifyshadereditor101_jpn-jp
SharePoint Online を JavaScript でイジる。
SharePoint Online を JavaScript でイジる。
Similar to MonacaでPWAを作ってデプロイしよう!~MonacaでPWAをとりあえず公開したい!!~
Monacaを使ってアプリ開発ビジネスを加速させ、そして色々と苦労した話~
Monacaを使ってアプリ開発ビジネスを加速させ、そして色々と苦労した話~
Daisuke Yamashita
Monaca X PWA X 3D
Monaca X PWA X 3D
Daisuke Yamashita
Pwa night vol.20~初めてのPWA開発で学んだ事~
Pwa night vol.20~初めてのPWA開発で学んだ事~
Daisuke Yamashita
ARVRを始める前の3Dの基本的な事~3つの壁に挑もう!!~
ARVRを始める前の3Dの基本的な事~3つの壁に挑もう!!~
Daisuke Yamashita
PWANight Vol.31 Flutterで簡単PWA
PWANight Vol.31 Flutterで簡単PWA
Daisuke Yamashita
Monaca ug osaka_20190522
Monaca ug osaka_20190522
Daisuke Yamashita
コミュニティの楽しみ方~私はこうやって楽しんでる~
コミュニティの楽しみ方~私はこうやって楽しんでる~
Daisuke Yamashita
スマートロック「Akerun」が考える IoTの可能性と乗り越えるべき壁@CEATEC 2015
スマートロック「Akerun」が考える IoTの可能性と乗り越えるべき壁@CEATEC 2015
Hiroaki Watanabe
Dear one moduleapps2.0_sh
Dear one moduleapps2.0_sh
Hidetoshi Takiyanagi
フィードテイラー紹介(2014.11.15版)
フィードテイラー紹介(2014.11.15版)
feedtailor
Feedtailor portfolio 20141115
Feedtailor portfolio 20141115
feedtailor
たかがAPI,されどAPI、シナジーで広がるビジネスチャンス
たかがAPI,されどAPI、シナジーで広がるビジネスチャンス
Osaka University
Enterpriseでもモバイル開発
Enterpriseでもモバイル開発
Mitch Okamoto
「IoTで広がる未来への可能性」熊本IoTアライアンスキックオフセミナー 170112
「IoTで広がる未来への可能性」熊本IoTアライアンスキックオフセミナー 170112
知礼 八子
3分でわかるMobileApps
3分でわかるMobileApps
Entermotion Inc.,
UTアンチパターン
UTアンチパターン
ryoheiseki1
20180215 devsumi-base
20180215 devsumi-base
真一 藤川
API MeetUp Online#8 セッション3 ツクレル馬場さん
API MeetUp Online#8 セッション3 ツクレル馬場さん
Nihei Tsukasa
「IoTで創造する新しい産業」高知家フューチャーセミナー 161107
「IoTで創造する新しい産業」高知家フューチャーセミナー 161107
知礼 八子
スマートデバイスを意識したECサイト構築 等
スマートデバイスを意識したECサイト構築 等
Kamo Souichi
Similar to MonacaでPWAを作ってデプロイしよう!~MonacaでPWAをとりあえず公開したい!!~
(20)
Monacaを使ってアプリ開発ビジネスを加速させ、そして色々と苦労した話~
Monacaを使ってアプリ開発ビジネスを加速させ、そして色々と苦労した話~
Monaca X PWA X 3D
Monaca X PWA X 3D
Pwa night vol.20~初めてのPWA開発で学んだ事~
Pwa night vol.20~初めてのPWA開発で学んだ事~
ARVRを始める前の3Dの基本的な事~3つの壁に挑もう!!~
ARVRを始める前の3Dの基本的な事~3つの壁に挑もう!!~
PWANight Vol.31 Flutterで簡単PWA
PWANight Vol.31 Flutterで簡単PWA
Monaca ug osaka_20190522
Monaca ug osaka_20190522
コミュニティの楽しみ方~私はこうやって楽しんでる~
コミュニティの楽しみ方~私はこうやって楽しんでる~
スマートロック「Akerun」が考える IoTの可能性と乗り越えるべき壁@CEATEC 2015
スマートロック「Akerun」が考える IoTの可能性と乗り越えるべき壁@CEATEC 2015
Dear one moduleapps2.0_sh
Dear one moduleapps2.0_sh
フィードテイラー紹介(2014.11.15版)
フィードテイラー紹介(2014.11.15版)
Feedtailor portfolio 20141115
Feedtailor portfolio 20141115
たかがAPI,されどAPI、シナジーで広がるビジネスチャンス
たかがAPI,されどAPI、シナジーで広がるビジネスチャンス
Enterpriseでもモバイル開発
Enterpriseでもモバイル開発
「IoTで広がる未来への可能性」熊本IoTアライアンスキックオフセミナー 170112
「IoTで広がる未来への可能性」熊本IoTアライアンスキックオフセミナー 170112
3分でわかるMobileApps
3分でわかるMobileApps
UTアンチパターン
UTアンチパターン
20180215 devsumi-base
20180215 devsumi-base
API MeetUp Online#8 セッション3 ツクレル馬場さん
API MeetUp Online#8 セッション3 ツクレル馬場さん
「IoTで創造する新しい産業」高知家フューチャーセミナー 161107
「IoTで創造する新しい産業」高知家フューチャーセミナー 161107
スマートデバイスを意識したECサイト構築 等
スマートデバイスを意識したECサイト構築 等
MonacaでPWAを作ってデプロイしよう!~MonacaでPWAをとりあえず公開したい!!~
1.
2019年9月13日 MonacaでPWAを作ってデプロイしよう! ~MonacaでPWAをとりあえず公開したい!!~ バルテス・モバイルテクノロジー株式会社
2.
バルテス・モバイルテクノロジーの紹介 2 バルテス・モバイルテクノロジー株式会社(略称:VMT) VALTES MOBILE TECHNOLOGY
CO.,LTD. 設立 2012年10月17日 代表取締役 田中 真史 株主 バルテス株式会社(100%) 資本金 5,000万円 拠点 大阪本社、東京本社 業務内容 ソフトウェア開発、セキュリティ診断 コンセプト 高品質でセキュアなアプリケーションの開発・提供 テスト専門会社である親会社と連携し、開発へテスト力を付加し、 「高品質」で「セキュア」をキーワードに、サービス提供を行う。
3.
自己紹介 3 名前 山下大輔(やました だいすけ) 所属
開発部 マネージャー 出身 横浜市青葉区(たまプラーザ) 住まい 宝塚市(兵庫県) 趣味 競馬、陸上 得意分野 3D全般(OpenGL、DirectX、Unity) 得意だった言語 C++/C# ※プログラミングはみりゃわかる。 資格 Android技術者Basic、JSTQB FL Monacaソムリエ
4.
4 自己紹介
5.
5 早速始めたいと思います。 自己紹介-終わり
6.
6 • 今日のテーマ • 今日のゴール •
Monacaについて • MonacaでPWAをFirebaseにデプロイする • MonacaでPWAをAzureにデプロイする • 最後に アジェンダ
7.
7 今日のテーマ 今日のテーマ
8.
8 今日のテーマ PWAは作りたい(作った)けど、 どうやってデプロイするの? どんな方法があるの?
9.
9 とりあえず、Monacaで PWAのデプロイ方法を学習 する。 今日のゴール
10.
10 Monacaとは? Monacaについて
11.
【Monacaの特徴】 ■Monacaとは? – 日本で最も普及しているハイブリッドアプリ開発環境の一つです。 – Cordovaベースなので、多種多様のCordovaプラグインを利用できます。 –
1ソースでiOS/Androidが同時に開発出来ます。 – Web技術(HTML5+CSS+JavaScript)で開発出来ます。 – PWAも開発出来ます。 11 Monacaについて
12.
12 はい、次 Monacaについて
13.
13 MonacaでPWAを Firebaseにデプロイする MonacaでPWAをFirebaseにデプロイする
14.
14 MonacaでPWAをFirebaseにデプロイする 【デプロイを始める前に。。。】 ■事前準備 - Monacaのアカウントを作成 - フリーで作れます。(フリーだと、Cordovaプラグイン使えないけど) -
Firebaseのアカウントを作成 - Sparkプランで無料で使えます。 - PWA等の簡単なWebアプリを試すのにうってつけ環境です。 安心してください、無料で出来ます。
15.
15 MonacaでPWAをFirebaseにデプロイする MonacaクラウドIDEで新規プロジェクト作成 「サンプルアプリケーション」→「最小限のPWAテンプレート」を選択
16.
16 MonacaでPWAをFirebaseにデプロイする MonacaでPWAのプロジェクトが作れました。
17.
17 MonacaでPWAをFirebaseにデプロイする Firebaseのアカウントを作って 「プロジェクト追加」を押下し、プロジェクトの追加を行う。
18.
18 MonacaでPWAをFirebaseにデプロイする 任意のプロジェクト名、地域/ロケーションをセットしプロジェクトの作成を行う
19.
19 MonacaでPWAをFirebaseにデプロイする 下記画面が表示されたら、『次へ』を押下し『Project Overview』へ移動する。
20.
20 MonacaでPWAをFirebaseにデプロイする 『歯車アイコン』を押下し、『プロジェクトの設定』画面を表示する。
21.
21 MonacaでPWAをFirebaseにデプロイする HTMLのScriptタグに下記内容を貼りつけます。
22.
22 MonacaでPWAをFirebaseにデプロイする Firebase:API トークンの取得の為、 Firebase CLI
ガイド に沿ってFirebase CLI をインストールします。
23.
23 MonacaでPWAをFirebaseにデプロイする Firebase CLIをインストールした後、次のコマンドにてトークンを取得する。 firebase login:ci
--no-localhost 下記画面が表示されるので、アカウント選択し、『許可』を押下するし、表示されたコードをコピーします。
24.
24 MonacaでPWAをFirebaseにデプロイする コピーしたコードを下記の赤枠部分に張り付けします。 表示された青枠のコードがAPIトークンキーとなる。
25.
25 MonacaでPWAをFirebaseにデプロイする Monacaでデプロイサービスの登録 メニューの設定→デプロイサービス を選択する。
26.
26 MonacaでPWAをFirebaseにデプロイする 「新しく追加する」を押下
27.
27 MonacaでPWAをFirebaseにデプロイする サービス名:Firebaseを選択
28.
28 MonacaでPWAをFirebaseにデプロイする 下記値を入力して、「追加」ボタンを押下 エイリアス名=任意に値 APIトークン=P.23で取得したAPIトークンキー プロジェクトID=P.19プロジェクトID
29.
29 MonacaでPWAをFirebaseにデプロイする MonacaクラウドIDEのメニューから、 ビルド → PWA
アプリのビルド を選択する
30.
30 MonacaでPWAをFirebaseにデプロイする ビルド開始を押下する
31.
31 MonacaでPWAをFirebaseにデプロイする ビルドが終わったら、先ほど設定したデプロイサービスを選択し、 「デプロイボタン」を押下する。 完了したら、右下の絵のようになります。
32.
32 MonacaでPWAをFirebaseにデプロイする FirebaseのHosting画面でも、デプロイされていることを確認 無事デプロイ出来ました。
33.
33 お疲れ様でした。 これで、MonacaでPWAを Firebaseにデプロイ完了です! MonacaでPWAをFirebaseにデプロイする
34.
34 MonacaでPWAを Azureにデプロイする MonacaでPWAをAzureにデプロイする
35.
35 MonacaでPWAをAzureにデプロイする 【デプロイを始める前に。。。】 ■事前準備 - GitHubのアカウントを作成 - フリーで作れます。) -
Azureのアカウントを作成 - FREEプランで無料で使えます。 - アプリ数10で、ディスク領域1GBですが、試すには充分 安心してください、無料で出来ます。
36.
36 MonacaでPWAをAzureにデプロイする MonacaクラウドIDEのダッシュボードから、 デプロイ>継続的インテグレーション:アカウントの接続 を押下する。
37.
37 MonacaでPWAをAzureにデプロイする 『GitHubアカウント連携する』のメニューを選択し 「GitHubと連携する」押下する
38.
38 MonacaでPWAをAzureにデプロイする 『GitHubアカウント連携する』のメニューを選択し 「GitHubと連携する」押下する 右の画面で「Authorize monaca」を押下する
39.
39 MonacaでPWAをAzureにデプロイする これで、MonacaとGitHubと連携が出来ました。
40.
40 MonacaでPWAをAzureにデプロイする MonacaクラウドIDEでPWAのプロジェクトを開いて プロジェクト>バージョン管理設定を開く
41.
41 MonacaでPWAをAzureにデプロイする Gitサービスの選択モーダルにて、GitHubを選択する
42.
42 MonacaでPWAをAzureにデプロイする リモートリポジトリ設定モーダルにて、赤枠内の情報を入力し、 『設定する』を押下する(※設定値は連携させる任意の値)
43.
43 MonacaでPWAをAzureにデプロイする GitHubにて連携さえていることを確認します。
44.
44 MonacaとGitHubと連携 出来たので、次はAzureの 設定です。 MonacaでPWAをAzureにデプロイする
45.
45 MonacaでPWAをAzureにデプロイする Azureにログインし、『App Service』を押下する
46.
46 MonacaでPWAをAzureにデプロイする App Serviceの「追加」ボタンを押下する 検索キーに『Mobile App』、公開元を『Microsoft』に セットし検索し、表示された『モバイルアプリ』を押下する
47.
47 MonacaでPWAをAzureにデプロイする モバイル アプリで『作成』を押下する
48.
48 MonacaでPWAをAzureにデプロイする 赤枠内に任意の値を入力する
49.
49 MonacaでPWAをAzureにデプロイする 赤枠部分を押下し、プランを設定を行う
50.
50 MonacaでPWAをAzureにデプロイする 『新規作成』を押下する (※新規作成しない場合は、表示されているプランより選択も可能)
51.
51 MonacaでPWAをAzureにデプロイする 赤枠内の設定を任意の値で設定する
52.
52 MonacaでPWAをAzureにデプロイする 赤枠部分を押下し、価格レベルの設定を行う
53.
53 MonacaでPWAをAzureにデプロイする 設定したプランが表示されている事を確認し、『作成』を押下する
54.
54 MonacaでPWAをAzureにデプロイする ダッシュボードに戻り、先程作成したサービスとサービスプランが 一覧に表示されていることを確認します。
55.
55 MonacaでPWAをAzureにデプロイする 作成したサービスを一覧より選択する
56.
56 MonacaでPWAをAzureにデプロイする デプロイセンターを押下します。 下記赤枠部分「Github」を選択する
57.
57 MonacaでPWAをAzureにデプロイする 表示された画面にて、 『Authorize AzureAppService』を押下する
58.
58 MonacaでPWAをAzureにデプロイする デプロイセンターを押下します。 下記赤枠内『Azure Pipelines』を選択し、『続行』を押下する
59.
59 MonacaでPWAをAzureにデプロイする 下記赤枠内に連携させるGitHubの情報を設定する。 また、青枠内にビルド情報を任意の値で設定する ※Azure DevOps組織に関しては 下記QRコードのURLを参照
60.
60 MonacaでPWAをAzureにデプロイする 下記赤枠内を確認して、「続行」ボタンを押下します。 設定値を確認して「完了」ボタンを押下します。
61.
61 MonacaでPWAをAzureにデプロイする 『概要』を押下し、赤枠内のURLを表示する PWAアプリが表示出来ました。
62.
62 お疲れ様でした。 これで、MonacaでPWAを Azureにデプロイ完了です! MonacaでPWAをAzureにデプロイする
63.
63 MonacaでPWAをAzureにデプロイする 【Azureでデプロイする上での注意事項】 - PWAに必須のManifestファイル(JSONファイル)は、Azure Web Appsの仕様で、web.configというXMLを作成して設定し ないとJSONが配信できず403
Forbiddenとなる。 - アプリケーションのルートディレクトリに Web.config という整形済 みのXMLファイルである必要があります。 - Web.config ファイルには、最低でも <configuration> 要素と <system.web> 要素を含める必要があります。これらの要素には、 個別の構成要素が含まれます。
64.
64 MonacaでPWAをAzureにデプロイする 【Azureでデプロイする上での注意事項】 - web.config <?xml version="1.0"
encoding="UTF-8" ?> <configuration> <system.webServer> <staticContent> <remove fileExtension=".json" /> <mimeMap fileExtension=".json" mimeType="application/json" /> </staticContent> </system.webServer> </configuration>
65.
65 最後に 【最後に】 - Monacaを使ってPWAをFirebase、Azureに無料でデプロイ出 来る! - Azureにデプロイするには別途GitHubとの連携とルートディレクトリ に
Web.config(*.xml)を作成する必要あり! - MonacaでPWAを作るのはちょっとめんどくさい - Azureにデプロイするのはもっとめんどくさい - MonacaでPWAをFirebaseにデプロイするのはちょっと便利 - MonacaじゃなくてもPWAは作れる。だからMonacaがもっと便利 なればいいのに。
66.
ご清聴ありがとうございました。 66
Download now