ユーザ用ツール

サイト用ツール


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

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

https://www.netlify.com

Netlifyという静的サイト公開ツールがあり、あらかじめ設定しておけば、GitHubやBitbucketにpushする(コードをアップロードする)だけで、Ionicサイトを公開することができます(無料プランの範囲でできます)。

以下に記載させていただきました。

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でメールアドレス認証を写経してみる(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. ローカルパソコンでIonicアプリを新規作成
  3. Bitbucketに新しいリポジトリを作成し、ローカルのリポジトリをhttpsのアドレスを用いてpush(アップロード)
  4. NetlifyにBitbucketのアカウントを登録
  5. NetlifyにBitbucketの特定のリポジトリを登録(master, npm run build –prod, www/)
  6. NetlifyにIonicウェブアプリが公開されたことを確認

1. Bitbucketにアカウント登録(初回のみ)

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

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

https://bitbucket.org

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://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日

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

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

  1. SSH
  2. https

の2つがありますが、SSHの方はかなり面倒なので、最初のうちはhttpsを用いる方がお勧めです。

以下は参考までに。

以下のサイトを参考に、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

ionicウェブアプリをnetlifyで簡単デプロイ.txt · 最終更新: 2019/08/28 by adash333

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki