====== IonicウェブアプリをNetlifyで簡単デプロイ ======

https://www.netlify.com\\
{{:pasted:20180615-081907.png}}


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は無料プランで非公開プロジェクトを複数個持てます。そのため、今回は、

BitbucketとNetlifyでIonicウェブアプリを公開する方法

を記載していきたいと思います。

（参考）

http://twosquirrel.mints.ne.jp/?p=24288\\
Ionic3+Firebaseでメールアドレス認証を写経してみる（１）BitBucketに非公開登録し、Netlifyで公開とfirebaseの設定
2018/6/15
===== 開発環境 =====

<code>
Windows 8.1 Pro
VisualStudioCode
git version 2.16.1.windows.4
Sourcetree Version 2.4.8.0
Peageant
</code>

{{:image_thumb2_thumb_thumb_thumb_thumb1-1.png|}}

Ionicのインストール方法については、<wrap hi>[[windowsでionicを始める方法]]</wrap>をご覧ください。
===== IonicウェブアプリをBitbucketを介してNetlifyで公開するまでの流れ =====

  -Bitbucketにアカウント登録
  -ローカルパソコンでIonicアプリを新規作成
  -Bitbucketに新しいリポジトリを作成し、ローカルのリポジトリをhttpsのアドレスを用いてpush（アップロード）
  -NetlifyにBitbucketのアカウントを登録
  -NetlifyにBitbucketの特定のリポジトリを登録（master, npm run build --prod, www/）
  -NetlifyにIonicウェブアプリが公開されたことを確認


===== 1. Bitbucketにアカウント登録（初回のみ） =====

Bitbucketは、ソースコードをクラウド上でgit管理してくれるサイトです。無料プランの範囲内で、複数の非公開プロジェクトを保存することができます。（GitHubの無料プランでは非公開プロジェクトは1個のみ。）

以下のBitbucketのサイトから、Bitbucketアカウントを新規登録します。（メールアドレスとパスワードを設定します。）

https://bitbucket.org



===== 2. ローカルパソコンでIonicアプリを新規作成 =====

Ionic3の場合
<code>
ionic start myApp blank
</code>

Ionic4の場合
<code>
ionic start myApp blank --type=angular
</code>

===== 3.Bitbucketに新しいリポジトリを作成し、ローカルのリポジトリをhttpsのアドレスを用いてpush（アップロード） =====
httpsのアドレス（SSHでは無い方）を用いるのがポイントです。


===== NetlifyにBitbucketのアカウントを登録 =====


===== NetlifyにBitbucketの特定のリポジトリを登録 =====


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}}


https://sitest.jp/blog/?p=9758\\
Netlify 初心者必見！ Bitbucket 上のコードをビルドして静的サイトを公開してみる
2017年5月8日

===== BitbucketにSSHキーを登録する方法 =====

ローカルのリポジトリをGitHubやBitbucketに登録するアドレスとして、

  -SSH
  -https

の２つがありますが、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