====== IonicウェブアプリをNetlifyで簡単デプロイ ======
https://www.netlify.com\\
{{:pasted:20180615-081907.png}}
Netlifyという静的サイト公開ツールがあり、あらかじめ設定しておけば、GitHubやBitbucketにpushする(コードをアップロードする)だけで、Ionicサイトを公開することができます(無料プランの範囲でできます)。
firebaseを用いる場合、firebaseの設定ファイル(私の場合は、src/environments/environment.ts)は他の人に知られると良くないので、間違えてアップロードして公開されてしまうと困ります。GitHubでは、無料プランでは非公開プロジェクトは1個までですが、Bitbucketは無料プランで非公開プロジェクトを複数個持てます。そのため、今回は、
BitbucketとNetlifyでIonicウェブアプリを公開する方法
を記載していきたいと思います。
(参考)
http://twosquirrel.mints.ne.jp/?p=24288\\
Ionic3+Firebaseでメールアドレス認証を写経してみる(1)BitBucketに非公開登録し、Netlifyで公開とfirebaseの設定
2018/6/15
===== 開発環境 =====
Windows 8.1 Pro
VisualStudioCode
git version 2.16.1.windows.4
Sourcetree Version 2.4.8.0
Peageant
{{:image_thumb2_thumb_thumb_thumb_thumb1-1.png|}}
Ionicのインストール方法については、[[windowsでionicを始める方法]]をご覧ください。
===== IonicウェブアプリをBitbucketを介してNetlifyで公開するまでの流れ =====
-Bitbucketにアカウント登録
-BitbucketにSSHキーを登録
-ローカルパソコンでIonicアプリを新規作成
-Bitbucketに新しいリポジトリを作成し、ローカルのリポジトリをpush(アップロード)
-NetlifyにBitbucketのアカウントを登録
-NetlifyにBitbucketの特定のリポジトリを登録
-NetlifyにIonicウェブアプリが公開されたことを確認
===== 1. Bitbucketにアカウント登録(初回のみ) =====
Bitbucketは、ソースコードをクラウド上でgit管理してくれるサイトです。無料プランの範囲内で、複数の非公開プロジェクトを保存することができます。(GitHubの無料プランでは非公開プロジェクトは1個のみ。)
以下のBitbucketのサイトから、Bitbucketアカウントを新規登録します。(メールアドレスとパスワードを設定します。)
https://bitbucket.org
===== 2. BitbucketにSSHキーを登録(初回のみ) =====
以下のサイトを参考に、SSHキーの登録を行います。Windowsの場合はかなりややこしいので、GUIカッコ悪いと思っても、SourceTreeを使う方法が間違いないと思います。
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
===== 3. ローカルパソコンでIonicアプリを新規作成 =====
===== Bitbucketに新しいリポジトリを作成し、ローカルのリポジトリをpush(アップロード) =====
-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}}
https://sitest.jp/blog/?p=9758\\
Netlify 初心者必見! Bitbucket 上のコードをビルドして静的サイトを公開してみる
2017年5月8日