ionicウェブアプリをnetlifyで簡単デプロイ
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン | ||
ionicウェブアプリをnetlifyで簡単デプロイ [2018/06/14] – [開発環境] adash333 | ionicウェブアプリをnetlifyで簡単デプロイ [2019/08/28] (現在) – [IonicウェブアプリをNetlifyで簡単デプロイ] adash333 | ||
---|---|---|---|
行 1: | 行 1: | ||
====== IonicウェブアプリをNetlifyで簡単デプロイ ====== | ====== IonicウェブアプリをNetlifyで簡単デプロイ ====== | ||
+ | |||
+ | https:// | ||
+ | {{: | ||
+ | |||
Netlifyという静的サイト公開ツールがあり、あらかじめ設定しておけば、GitHubやBitbucketにpushする(コードをアップロードする)だけで、Ionicサイトを公開することができます(無料プランの範囲でできます)。 | Netlifyという静的サイト公開ツールがあり、あらかじめ設定しておけば、GitHubやBitbucketにpushする(コードをアップロードする)だけで、Ionicサイトを公開することができます(無料プランの範囲でできます)。 | ||
+ | |||
+ | <wrap hi> | ||
+ | |||
+ | http:// | ||
+ | |||
+ | |||
+ | |||
firebaseを用いる場合、firebaseの設定ファイル(私の場合は、src/ | firebaseを用いる場合、firebaseの設定ファイル(私の場合は、src/ | ||
行 9: | 行 20: | ||
を記載していきたいと思います。 | を記載していきたいと思います。 | ||
+ | (参考) | ||
+ | |||
+ | http:// | ||
+ | Ionic3+Firebaseでメールアドレス認証を写経してみる(1)BitBucketに非公開登録し、Netlifyで公開とfirebaseの設定 | ||
+ | 2018/6/15 | ||
===== 開発環境 ===== | ===== 開発環境 ===== | ||
行 20: | 行 36: | ||
{{: | {{: | ||
+ | |||
+ | Ionicのインストール方法については、< | ||
+ | ===== IonicウェブアプリをBitbucketを介してNetlifyで公開するまでの流れ ===== | ||
+ | |||
+ | -Bitbucketにアカウント登録 | ||
+ | -ローカルパソコンでIonicアプリを新規作成 | ||
+ | -Bitbucketに新しいリポジトリを作成し、ローカルのリポジトリをhttpsのアドレスを用いてpush(アップロード) | ||
+ | -NetlifyにBitbucketのアカウントを登録 | ||
+ | -NetlifyにBitbucketの特定のリポジトリを登録(master, | ||
+ | -NetlifyにIonicウェブアプリが公開されたことを確認 | ||
+ | |||
+ | |||
+ | ===== 1. Bitbucketにアカウント登録(初回のみ) ===== | ||
+ | |||
+ | Bitbucketは、ソースコードをクラウド上でgit管理してくれるサイトです。無料プランの範囲内で、複数の非公開プロジェクトを保存することができます。(GitHubの無料プランでは非公開プロジェクトは1個のみ。) | ||
+ | |||
+ | 以下のBitbucketのサイトから、Bitbucketアカウントを新規登録します。(メールアドレスとパスワードを設定します。) | ||
+ | |||
+ | https:// | ||
+ | |||
+ | |||
+ | |||
+ | ===== 2. ローカルパソコンでIonicアプリを新規作成 ===== | ||
+ | |||
+ | Ionic3の場合 | ||
+ | < | ||
+ | ionic start myApp blank | ||
+ | </ | ||
+ | |||
+ | Ionic4の場合 | ||
+ | < | ||
+ | ionic start myApp blank --type=angular | ||
+ | </ | ||
+ | |||
+ | ===== 3.Bitbucketに新しいリポジトリを作成し、ローカルのリポジトリをhttpsのアドレスを用いてpush(アップロード) ===== | ||
+ | httpsのアドレス(SSHでは無い方)を用いるのがポイントです。 | ||
+ | |||
+ | |||
+ | ===== NetlifyにBitbucketのアカウントを登録 ===== | ||
+ | |||
+ | |||
+ | ===== NetlifyにBitbucketの特定のリポジトリを登録 ===== | ||
+ | |||
+ | |||
+ | master | ||
+ | |||
+ | npm run build –prod | ||
+ | |||
+ | www/ | ||
+ | ===== NetlifyにIonicウェブアプリが公開されたことを確認 ===== | ||
作成中 | 作成中 | ||
===== リンク ===== | ===== リンク ===== | ||
+ | |||
+ | https:// | ||
+ | {{: | ||
+ | |||
+ | https:// | ||
+ | {{: | ||
行 29: | 行 101: | ||
Netlify 初心者必見! Bitbucket 上のコードをビルドして静的サイトを公開してみる | Netlify 初心者必見! Bitbucket 上のコードをビルドして静的サイトを公開してみる | ||
2017年5月8日 | 2017年5月8日 | ||
+ | |||
+ | ===== BitbucketにSSHキーを登録する方法 ===== | ||
+ | |||
+ | ローカルのリポジトリをGitHubやBitbucketに登録するアドレスとして、 | ||
+ | |||
+ | -SSH | ||
+ | -https | ||
+ | |||
+ | の2つがありますが、SSHの方はかなり面倒なので、最初のうちはhttpsを用いる方がお勧めです。 | ||
+ | |||
+ | 以下は参考までに。 | ||
+ | |||
+ | 以下のサイトを参考に、SSHキーの登録を行います。Windowsの場合はかなりややこしいので、< | ||
+ | |||
+ | http:// | ||
+ | Windows環境でBitbucketとSourceTreeの導入(Bitbucketの設定とSourceTreeのインストール) | ||
+ | 2015/ | ||
+ | |||
+ | http:// | ||
+ | Windows環境でBitbucketとSourceTreeの導入(SSHキー作成とBitbucketへの登録) | ||
+ | 2015/ | ||
+ | |||
+ | http:// | ||
+ | Windows環境でBitbucketとSourceTreeの導入(リポジトリの作成とSourceTreeへのクローンの方法) | ||
+ | 2015/02/14 | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
ionicウェブアプリをnetlifyで簡単デプロイ.1528947610.txt.gz · 最終更新: 2018/10/07 (外部編集)