ユーザ用ツール

サイト用ツール


サイドバー

目次

機械学習とは

プログラミング無しで機械学習

機械学習プログラミング入門

初めてのKeras2.0

初めてのTensorflow(YouTube)

初めてのChainer2.0

初めてのビットコイン

ビットコイン用語集

初めてのSolidityプログラミング

初めての医療統計

初めてのエクセルで医療統計

初めてのEZRで医療統計

初めてのRStudioでレポート作成

スマホアプリ作成ソフトIonic3

スマホアプリ作成ソフトIonic4

Ionicのためのjavascript tips

その他

NiftyCloudMobileBackend

税金など

Dokuwiki

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

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

https://www.netlify.com

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

Ionicのインストール方法については、windowsでionicを始める方法をご覧ください。

IonicウェブアプリをBitbucketを介してNetlifyで公開するまでの流れ

  1. Bitbucketにアカウント登録
  2. BitbucketにSSHキーを登録
  3. ローカルパソコンでIonicアプリを新規作成
  4. Bitbucketに新しいリポジトリを作成し、ローカルのリポジトリをpush(アップロード)
  5. NetlifyにBitbucketのアカウントを登録
  6. NetlifyにBitbucketの特定のリポジトリを登録
  7. 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(アップロード)

  1. NetlifyにBitbucketのアカウントを登録
  2. NetlifyにBitbucketの特定のリポジトリを登録
  3. NetlifyにIonicウェブアプリが公開されたことを確認

作成中

リンク

https://qiita.com/xiaca/items/321fb5ab3cb36c0c6cf6

https://blog.ionicframework.com/how-to-make-pwas-with-ionic/

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

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