ユーザ用ツール

サイト用ツール


ionicウェブアプリをnetlifyで簡単デプロイ

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

両方とも前のリビジョン前のリビジョン
次のリビジョン
前のリビジョン
ionicウェブアプリをnetlifyで簡単デプロイ [2018/06/17] – [開発環境] adash333ionicウェブアプリをnetlifyで簡単デプロイ [2019/08/28] (現在) – [IonicウェブアプリをNetlifyで簡単デプロイ] adash333
行 6: 行 6:
  
 Netlifyという静的サイト公開ツールがあり、あらかじめ設定しておけば、GitHubやBitbucketにpushする(コードをアップロードする)だけで、Ionicサイトを公開することができます(無料プランの範囲でできます)。 Netlifyという静的サイト公開ツールがあり、あらかじめ設定しておけば、GitHubやBitbucketにpushする(コードをアップロードする)だけで、Ionicサイトを公開することができます(無料プランの範囲でできます)。
 +
 +<wrap hi>以下に記載させていただきました。</wrap>
 +
 +http://i-doctor.sakura.ne.jp/web/doku.php?id=00.ionic4:10.ionic4%E3%81%A8capacitor%E3%81%A7gps%E5%8F%96%E5%BE%97#netlify%E3%81%AB%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4
 +
 +
 +
  
 firebaseを用いる場合、firebaseの設定ファイル(私の場合は、src/environments/environment.ts)は他の人に知られると良くないので、間違えてアップロードして公開されてしまうと困ります。GitHubでは、無料プランでは非公開プロジェクトは1個までですが、Bitbucketは無料プランで非公開プロジェクトを複数個持てます。そのため、今回は、 firebaseを用いる場合、firebaseの設定ファイル(私の場合は、src/environments/environment.ts)は他の人に知られると良くないので、間違えてアップロードして公開されてしまうと困ります。GitHubでは、無料プランでは非公開プロジェクトは1個までですが、Bitbucketは無料プランで非公開プロジェクトを複数個持てます。そのため、今回は、
行 30: 行 37:
 {{:image_thumb2_thumb_thumb_thumb_thumb1-1.png|}} {{:image_thumb2_thumb_thumb_thumb_thumb1-1.png|}}
  
-Ionicのインストール方法については、[[windowsでionicを始める方法]]をご覧ください。+Ionicのインストール方法については、<wrap hi>[[windowsでionicを始める方法]]</wrap>をご覧ください。
 ===== IonicウェブアプリをBitbucketを介してNetlifyで公開するまでの流れ ===== ===== IonicウェブアプリをBitbucketを介してNetlifyで公開するまでの流れ =====
  
   -Bitbucketにアカウント登録   -Bitbucketにアカウント登録
-  -BitbucketにSSHキーを登録 
   -ローカルパソコンでIonicアプリを新規作成   -ローカルパソコンでIonicアプリを新規作成
-  -Bitbucketに新しいリポジトリを作成し、ローカルのリポジトリをpush(アップロード)+  -Bitbucketに新しいリポジトリを作成し、ローカルのリポジトリをhttpsのアドレスを用いてpush(アップロード)
   -NetlifyにBitbucketのアカウントを登録   -NetlifyにBitbucketのアカウントを登録
-  -NetlifyにBitbucketの特定のリポジトリを登録+  -NetlifyにBitbucketの特定のリポジトリを登録(master, npm run build --prod, www/)
   -NetlifyにIonicウェブアプリが公開されたことを確認   -NetlifyにIonicウェブアプリが公開されたことを確認
  
行 51: 行 57:
  
  
-===== 2. BitbucketにSSHキーを登録(初回のみ) ===== 
  
-以下のサイトを参考に、SSHキの登録を行います。Windowsの場合はかなりややこしいので、<wrap hi>GUI悪いと思っても、SourceTree使う方法が間違いない</wrap>と思います。+===== 2. ローカルパソンでIonicアプリ新規作成 =====
  
-http://hiromart.com/blog/sourcetree_and_bitbucket/\\ +Ionic3場合 
-Windows環境でBitbucketとSourceTree導入(Bitbucketの設定とSourceTreeのインストール) +<code> 
-2015/02/09     2015/02/14+ionic start myApp blank 
 +</code>
  
-http://hiromart.com/blog/sourcetree_and_bitbucket_2/\\ +Ionic4場合 
-Windows環境でBitbucketとSourceTree導入(SSHキー作成とBitbucketへの登録) +<code> 
-2015/02/09     2015/02/14+ionic start myApp blank --type=angular 
 +</code>
  
-http://hiromart.com/blog/sourcetree_and_bitbucket_3/\\ +===== 3.Bitbucketに新しいリポジトリ作成し、ローカルのリポジトリをhttpsアドレスを用いてpush(アップロード) ===== 
-Windows環境でBitbucketとSourceTreeの導入(リポジトリ作成とSourceTreeへローの方法) +httpsアドレス(SSHでは無い)を用いるのがポイントです。
-2015/02/14+
  
  
 +===== NetlifyにBitbucketのアカウントを登録 =====
  
  
 +===== NetlifyにBitbucketの特定のリポジトリを登録 =====
  
-===== 3. ローカルパソコンでIonicアプリを新規作成 ===== 
  
 +master
  
 +npm run build –prod
  
-===== Bitbucket新しいリポジトリを作成し、ローカルのリポジトリをpush(アップロード) =====+www/ 
 +===== NetlifyIonicウェブアプが公開されたこと確認 =====
  
- 
-  -NetlifyにBitbucketのアカウントを登録 
-  -NetlifyにBitbucketの特定のリポジトリを登録 
-  -NetlifyにIonicウェブアプリが公開されたことを確認 
  
 作成中 作成中
 ===== リンク ===== ===== リンク =====
 +
 +https://qiita.com/xiaca/items/321fb5ab3cb36c0c6cf6\\
 +{{:pasted:20180716-083746.png}}
 +
 +https://blog.ionicframework.com/how-to-make-pwas-with-ionic/\\
 +{{:pasted:20180716-083958.png}}
  
  
行 89: 行 101:
 Netlify 初心者必見! Bitbucket 上のコードをビルドして静的サイトを公開してみる Netlify 初心者必見! Bitbucket 上のコードをビルドして静的サイトを公開してみる
 2017年5月8日 2017年5月8日
 +
 +===== BitbucketにSSHキーを登録する方法 =====
 +
 +ローカルのリポジトリをGitHubやBitbucketに登録するアドレスとして、
 +
 +  -SSH
 +  -https
 +
 +の2つがありますが、SSHの方はかなり面倒なので、最初のうちはhttpsを用いる方がお勧めです。
 +
 +以下は参考までに。
 +
 +以下のサイトを参考に、SSHキーの登録を行います。Windowsの場合はかなりややこしいので、<wrap hi>GUIカッコ悪いと思っても、SourceTreeを使う方法が間違いない</wrap>と思います。
 +
 +http://hiromart.com/blog/sourcetree_and_bitbucket/\\
 +Windows環境でBitbucketとSourceTreeの導入(Bitbucketの設定とSourceTreeのインストール)
 +2015/02/09     2015/02/14
 +
 +http://hiromart.com/blog/sourcetree_and_bitbucket_2/\\
 +Windows環境でBitbucketとSourceTreeの導入(SSHキー作成とBitbucketへの登録)
 +2015/02/09     2015/02/14
 +
 +http://hiromart.com/blog/sourcetree_and_bitbucket_3/\\
 +Windows環境でBitbucketとSourceTreeの導入(リポジトリの作成とSourceTreeへのクローンの方法)
 +2015/02/14
 +
 +
 +
 +
 +
  
  

ionicウェブアプリをnetlifyで簡単デプロイ.1529216951.txt.gz · 最終更新: 2018/10/07 (外部編集)

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki