Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

848 views

Published on

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

Published in: Engineering
  • Be the first to comment

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

  1. 1. 2019年9月13日 MonacaでPWAを作ってデプロイしよう! ~MonacaでPWAをとりあえず公開したい!!~ バルテス・モバイルテクノロジー株式会社
  2. 2. バルテス・モバイルテクノロジーの紹介 2 バルテス・モバイルテクノロジー株式会社(略称:VMT) VALTES MOBILE TECHNOLOGY CO.,LTD. 設立 2012年10月17日 代表取締役 田中 真史 株主 バルテス株式会社(100%) 資本金 5,000万円 拠点 大阪本社、東京本社 業務内容 ソフトウェア開発、セキュリティ診断 コンセプト 高品質でセキュアなアプリケーションの開発・提供 テスト専門会社である親会社と連携し、開発へテスト力を付加し、 「高品質」で「セキュア」をキーワードに、サービス提供を行う。
  3. 3. 自己紹介 3 名前 山下大輔(やました だいすけ) 所属 開発部 マネージャー 出身 横浜市青葉区(たまプラーザ) 住まい 宝塚市(兵庫県) 趣味 競馬、陸上 得意分野 3D全般(OpenGL、DirectX、Unity) 得意だった言語 C++/C# ※プログラミングはみりゃわかる。 資格 Android技術者Basic、JSTQB FL Monacaソムリエ
  4. 4. 4 自己紹介
  5. 5. 5 早速始めたいと思います。 自己紹介-終わり
  6. 6. 6 • 今日のテーマ • 今日のゴール • Monacaについて • MonacaでPWAをFirebaseにデプロイする • MonacaでPWAをAzureにデプロイする • 最後に アジェンダ
  7. 7. 7 今日のテーマ 今日のテーマ
  8. 8. 8 今日のテーマ PWAは作りたい(作った)けど、 どうやってデプロイするの? どんな方法があるの?
  9. 9. 9 とりあえず、Monacaで PWAのデプロイ方法を学習 する。 今日のゴール
  10. 10. 10 Monacaとは? Monacaについて
  11. 11. 【Monacaの特徴】 ■Monacaとは? – 日本で最も普及しているハイブリッドアプリ開発環境の一つです。 – Cordovaベースなので、多種多様のCordovaプラグインを利用できます。 – 1ソースでiOS/Androidが同時に開発出来ます。 – Web技術(HTML5+CSS+JavaScript)で開発出来ます。 – PWAも開発出来ます。 11 Monacaについて
  12. 12. 12 はい、次 Monacaについて
  13. 13. 13 MonacaでPWAを Firebaseにデプロイする MonacaでPWAをFirebaseにデプロイする
  14. 14. 14 MonacaでPWAをFirebaseにデプロイする 【デプロイを始める前に。。。】 ■事前準備 - Monacaのアカウントを作成 - フリーで作れます。(フリーだと、Cordovaプラグイン使えないけど) - Firebaseのアカウントを作成 - Sparkプランで無料で使えます。 - PWA等の簡単なWebアプリを試すのにうってつけ環境です。 安心してください、無料で出来ます。
  15. 15. 15 MonacaでPWAをFirebaseにデプロイする MonacaクラウドIDEで新規プロジェクト作成 「サンプルアプリケーション」→「最小限のPWAテンプレート」を選択
  16. 16. 16 MonacaでPWAをFirebaseにデプロイする MonacaでPWAのプロジェクトが作れました。
  17. 17. 17 MonacaでPWAをFirebaseにデプロイする Firebaseのアカウントを作って 「プロジェクト追加」を押下し、プロジェクトの追加を行う。
  18. 18. 18 MonacaでPWAをFirebaseにデプロイする 任意のプロジェクト名、地域/ロケーションをセットしプロジェクトの作成を行う
  19. 19. 19 MonacaでPWAをFirebaseにデプロイする 下記画面が表示されたら、『次へ』を押下し『Project Overview』へ移動する。
  20. 20. 20 MonacaでPWAをFirebaseにデプロイする 『歯車アイコン』を押下し、『プロジェクトの設定』画面を表示する。
  21. 21. 21 MonacaでPWAをFirebaseにデプロイする HTMLのScriptタグに下記内容を貼りつけます。
  22. 22. 22 MonacaでPWAをFirebaseにデプロイする Firebase:API トークンの取得の為、 Firebase CLI ガイド に沿ってFirebase CLI をインストールします。
  23. 23. 23 MonacaでPWAをFirebaseにデプロイする Firebase CLIをインストールした後、次のコマンドにてトークンを取得する。 firebase login:ci --no-localhost 下記画面が表示されるので、アカウント選択し、『許可』を押下するし、表示されたコードをコピーします。
  24. 24. 24 MonacaでPWAをFirebaseにデプロイする コピーしたコードを下記の赤枠部分に張り付けします。 表示された青枠のコードがAPIトークンキーとなる。
  25. 25. 25 MonacaでPWAをFirebaseにデプロイする Monacaでデプロイサービスの登録 メニューの設定→デプロイサービス を選択する。
  26. 26. 26 MonacaでPWAをFirebaseにデプロイする 「新しく追加する」を押下
  27. 27. 27 MonacaでPWAをFirebaseにデプロイする サービス名:Firebaseを選択
  28. 28. 28 MonacaでPWAをFirebaseにデプロイする 下記値を入力して、「追加」ボタンを押下 エイリアス名=任意に値 APIトークン=P.23で取得したAPIトークンキー プロジェクトID=P.19プロジェクトID
  29. 29. 29 MonacaでPWAをFirebaseにデプロイする MonacaクラウドIDEのメニューから、 ビルド → PWA アプリのビルド を選択する
  30. 30. 30 MonacaでPWAをFirebaseにデプロイする ビルド開始を押下する
  31. 31. 31 MonacaでPWAをFirebaseにデプロイする ビルドが終わったら、先ほど設定したデプロイサービスを選択し、 「デプロイボタン」を押下する。 完了したら、右下の絵のようになります。
  32. 32. 32 MonacaでPWAをFirebaseにデプロイする FirebaseのHosting画面でも、デプロイされていることを確認 無事デプロイ出来ました。
  33. 33. 33 お疲れ様でした。 これで、MonacaでPWAを Firebaseにデプロイ完了です! MonacaでPWAをFirebaseにデプロイする
  34. 34. 34 MonacaでPWAを Azureにデプロイする MonacaでPWAをAzureにデプロイする
  35. 35. 35 MonacaでPWAをAzureにデプロイする 【デプロイを始める前に。。。】 ■事前準備 - GitHubのアカウントを作成 - フリーで作れます。) - Azureのアカウントを作成 - FREEプランで無料で使えます。 - アプリ数10で、ディスク領域1GBですが、試すには充分 安心してください、無料で出来ます。
  36. 36. 36 MonacaでPWAをAzureにデプロイする MonacaクラウドIDEのダッシュボードから、 デプロイ>継続的インテグレーション:アカウントの接続 を押下する。
  37. 37. 37 MonacaでPWAをAzureにデプロイする 『GitHubアカウント連携する』のメニューを選択し 「GitHubと連携する」押下する
  38. 38. 38 MonacaでPWAをAzureにデプロイする 『GitHubアカウント連携する』のメニューを選択し 「GitHubと連携する」押下する 右の画面で「Authorize monaca」を押下する
  39. 39. 39 MonacaでPWAをAzureにデプロイする これで、MonacaとGitHubと連携が出来ました。
  40. 40. 40 MonacaでPWAをAzureにデプロイする MonacaクラウドIDEでPWAのプロジェクトを開いて プロジェクト>バージョン管理設定を開く
  41. 41. 41 MonacaでPWAをAzureにデプロイする Gitサービスの選択モーダルにて、GitHubを選択する
  42. 42. 42 MonacaでPWAをAzureにデプロイする リモートリポジトリ設定モーダルにて、赤枠内の情報を入力し、 『設定する』を押下する(※設定値は連携させる任意の値)
  43. 43. 43 MonacaでPWAをAzureにデプロイする GitHubにて連携さえていることを確認します。
  44. 44. 44 MonacaとGitHubと連携 出来たので、次はAzureの 設定です。 MonacaでPWAをAzureにデプロイする
  45. 45. 45 MonacaでPWAをAzureにデプロイする Azureにログインし、『App Service』を押下する
  46. 46. 46 MonacaでPWAをAzureにデプロイする App Serviceの「追加」ボタンを押下する 検索キーに『Mobile App』、公開元を『Microsoft』に セットし検索し、表示された『モバイルアプリ』を押下する
  47. 47. 47 MonacaでPWAをAzureにデプロイする モバイル アプリで『作成』を押下する
  48. 48. 48 MonacaでPWAをAzureにデプロイする 赤枠内に任意の値を入力する
  49. 49. 49 MonacaでPWAをAzureにデプロイする 赤枠部分を押下し、プランを設定を行う
  50. 50. 50 MonacaでPWAをAzureにデプロイする 『新規作成』を押下する (※新規作成しない場合は、表示されているプランより選択も可能)
  51. 51. 51 MonacaでPWAをAzureにデプロイする 赤枠内の設定を任意の値で設定する
  52. 52. 52 MonacaでPWAをAzureにデプロイする 赤枠部分を押下し、価格レベルの設定を行う
  53. 53. 53 MonacaでPWAをAzureにデプロイする 設定したプランが表示されている事を確認し、『作成』を押下する
  54. 54. 54 MonacaでPWAをAzureにデプロイする ダッシュボードに戻り、先程作成したサービスとサービスプランが 一覧に表示されていることを確認します。
  55. 55. 55 MonacaでPWAをAzureにデプロイする 作成したサービスを一覧より選択する
  56. 56. 56 MonacaでPWAをAzureにデプロイする デプロイセンターを押下します。 下記赤枠部分「Github」を選択する
  57. 57. 57 MonacaでPWAをAzureにデプロイする 表示された画面にて、 『Authorize AzureAppService』を押下する
  58. 58. 58 MonacaでPWAをAzureにデプロイする デプロイセンターを押下します。 下記赤枠内『Azure Pipelines』を選択し、『続行』を押下する
  59. 59. 59 MonacaでPWAをAzureにデプロイする 下記赤枠内に連携させるGitHubの情報を設定する。 また、青枠内にビルド情報を任意の値で設定する ※Azure DevOps組織に関しては 下記QRコードのURLを参照
  60. 60. 60 MonacaでPWAをAzureにデプロイする 下記赤枠内を確認して、「続行」ボタンを押下します。 設定値を確認して「完了」ボタンを押下します。
  61. 61. 61 MonacaでPWAをAzureにデプロイする 『概要』を押下し、赤枠内のURLを表示する PWAアプリが表示出来ました。
  62. 62. 62 お疲れ様でした。 これで、MonacaでPWAを Azureにデプロイ完了です! MonacaでPWAをAzureにデプロイする
  63. 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. 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. 65 最後に 【最後に】 - Monacaを使ってPWAをFirebase、Azureに無料でデプロイ出 来る! - Azureにデプロイするには別途GitHubとの連携とルートディレクトリ に Web.config(*.xml)を作成する必要あり! - MonacaでPWAを作るのはちょっとめんどくさい - Azureにデプロイするのはもっとめんどくさい - MonacaでPWAをFirebaseにデプロイするのはちょっと便利 - MonacaじゃなくてもPWAは作れる。だからMonacaがもっと便利 なればいいのに。
  66. 66. ご清聴ありがとうございました。 66

×