MonacaでPWAを作ってデプロイしよう！~MonacaでPWAをとりあえず公開したい！！~

1. 2019年9月13日
MonacaでPWAを作ってデプロイしよう！
～MonacaでPWAをとりあえず公開したい！！～
バルテス・モバイルテクノロジー株式会社

2. バルテス・モバイルテクノロジーの紹介
2
バルテス・モバイルテクノロジー株式会社（略称：ＶＭＴ）
VALTES MOBILE TECHNOLOGY CO.,LTD.
設立 2012年10月17日
代表取締役 田中 真史
株主 バルテス株式会社（100％）
資本金 5,000万円
拠点 大阪本社、東京本社
業務内容 ソフトウェア開発、セキュリティ診断
コンセプト 高品質でセキュアなアプリケーションの開発・提供
テスト専門会社である親会社と連携し、開発へテスト力を付加し、
「高品質」で「セキュア」をキーワードに、サービス提供を行う。

3. 自己紹介
3
名前 山下大輔（やました だいすけ）
所属 開発部 マネージャー
出身 横浜市青葉区（たまプラーザ）
住まい 宝塚市（兵庫県）
趣味 競馬、陸上
得意分野 ３D全般（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プラグインを利用できます。
– １ソースで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プランで無料で使えます。
- アプリ数１０で、ディスク領域１GBですが、試すには充分
安心してください、無料で出来ます。

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