ユーザ用ツール

サイト用ツール


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

差分

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

この比較画面へのリンク

両方とも前のリビジョン前のリビジョン
次のリビジョン
前のリビジョン
ionicウェブアプリをnetlifyで簡単デプロイ [2018/06/14] – [2. BitbucketにSSHキーを登録(初回のみ)] adash333ionicウェブアプリをnetlifyで簡単デプロイ [2019/08/28] (現在) – [IonicウェブアプリをNetlifyで簡単デプロイ] adash333
行 1: 行 1:
 ====== IonicウェブアプリをNetlifyで簡単デプロイ ====== ====== IonicウェブアプリをNetlifyで簡単デプロイ ======
 +
 +https://www.netlify.com\\
 +{{:pasted:20180615-081907.png}}
 +
  
 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は無料プランで非公開プロジェクトを複数個持てます。そのため、今回は、
行 9: 行 20:
 を記載していきたいと思います。 を記載していきたいと思います。
  
 +(参考)
 +
 +http://twosquirrel.mints.ne.jp/?p=24288\\
 +Ionic3+Firebaseでメールアドレス認証を写経してみる(1)BitBucketに非公開登録し、Netlifyで公開とfirebaseの設定
 +2018/6/15
 ===== 開発環境 ===== ===== 開発環境 =====
  
行 21: 行 37:
 {{:image_thumb2_thumb_thumb_thumb_thumb1-1.png|}} {{:image_thumb2_thumb_thumb_thumb_thumb1-1.png|}}
  
 +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ウェブアプリが公開されたことを確認
  
行 41: 行 57:
  
  
-===== 2. BitbucketにSSHキーを登録(初回のみ) ===== 
  
-以下のサイトを参考に、SSHキの登録を行います。Windowsの場合はかなりややこしいので、<wrap lo>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 
-===== 3. ローカルパソコンでIonicアプリを新規作成 =====+</code>
  
 +===== 3.Bitbucketに新しいリポジトリを作成し、ローカルのリポジトリをhttpsのアドレスを用いてpush(アップロード) =====
 +httpsのアドレス(SSHでは無い方)を用いるのがポイントです。
  
  
-===== Bitbucketに新しいリポジトリを作成し、ロールのリポジpush(アップロード) =====+===== NetlifyにBitbucketのアウントを登録 =====
  
  
-  -NetlifyにBitbucketのアカウントを登録 +===== NetlifyにBitbucketの特定のリポジトリを登録 ===== 
-  -NetlifyにBitbucketの特定のリポジトリを登録 + 
-  -NetlifyにIonicウェブアプリが公開されたことを確認+ 
 +master 
 + 
 +npm run build –prod 
 + 
 +www/ 
 +===== 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}}
  
  
行 70: 行 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で簡単デプロイ.1528956027.txt.gz · 最終更新: 2018/10/07 (外部編集)

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki