スポンサーリンク

「Ionicで作る モバイルアプリ制作入門 」を写経してみる(2)GitHubからNetlifyにデプロイ

以下の本の”Section-022 NetlifyとGitHubを使ったWebアプリの自動デプロイ”を写経してみる。

(環境)
image_thumb[7]

なお、今回は、以下の「ionic3の開発環境構築とHello World」の続きです。

「Ionicで作る モバイルアプリ制作入門 」を写経してみる(1)環境構築とHelloWorld

(1)GitHubに登録して、GitHub上で、ionic_tutorial レポジトリを作成

https://github.com/

にログインして、”ionic_tutorial” というレポジトリを作成。

(2)VisualStudioCodeのターミナルで以下を入力して、GiHubにコードを登録

cd c:/ionic3/ionic_tutorial
git init
git commit -m "first commit"
git remote add origin https://github.com/[YOUR_USER_ID]/ionic_tutorial.git
git push -u origin master

image

(3)Netlifyへのデプロイ

以下のサイトから、GitHubのIDでログイン

https://app.netlify.com/signup
image

Authorize を押すと、以下のような画面になるので、指示に従って進む。

image

image

image

以下は、上記本の通りに、

Build command : npm run build –prod
public directory : www/

と入力。

image

Deploy site をクリックすると、以下のような画面になる。

image

数分すると、デプロイされて、適当にクリックしていると、以下の画面になる。

image

リンクをクリックすると、ちゃんと、一発でデプロイされており、手元のスマホで上記アドレスを見ても、ちゃんと表示された。

image

Zenfone4 Max でのChromeでの画面は以下のようになった。

image

ここまで全て無料。これはすごい!比較してよいのかわからないが、Herokuよりもすごい!

上記のように一度設定すれば、

(1)ローカルパソコンでコードを更新

(2)以下のコマンドでGitHubにpush

git add -A
git commit -m “(更新内容)”
git push -u origin master

(3)すると、自動的に、netlifyのサイトが更新されて、手元のスマホで確認できる。(Ionic Proのごちゃごちゃしたややこしい設定よりも、楽!)

もし、PWAでGPSなどのスマホの機能がほぼ全て使えるようになったら、いちいち、androidアプリをコンパイルして、、、とか不要になるので、本当に楽。

これで、Ionic3で簡単にPWA(Progressive Web Apps)対応サイトが作れるようになれば、もう、スマホアプリ作成はほぼ不要な未来が来る!?

Unityは、Androidアプリ作成が非常に簡単ですが、今後、Unityで作成したゲームを、PWA対応のWEBサイトとしてアップロードできるようにしてくれないかなー?そしたら、WindowsパソコンでもiOS用のUnityゲームが簡単に作れるのに。。。

https://html5experts.jp/shumpei-shiraishi/23666/
image

スポンサーリンク