Ionic2サイトをHerokuにdeploy

前回は、HelloWorldアプリを、apkファイルにして、スマホで起動することを確認した。

Ionic2をandroidでデバッグ
前回、Windows8.1にIonic2をインストールして、ionic serveでChromeで表示するところまでやった。 ...

次は、Herokuにデプロイしてみたい。できるかな?

http://www.pereless360.com/guides/ionic-heroku.html

の通りにやってみたい。

(環境)
Windows8.1
Node 6.9.1
cordova 6.5.0
Ionic 2
VisualStudioCode
Git 2.8.1

(参考)

Deploy: Ionic 2 App to Heroku
http://www.pereless360.com/guides/ionic-heroku.html

(1)cmd.exeでexpressのインストール

image image

(2)app.json ファイルを作成

{
“name”: “ProjectName”,
“description”: “App Description”,
“keywords”: [“ionic2”, “heroku”]
}

image

(3)server.js ファイルを作成

var express = require(‘express’),
app = express();
app.use(express.static(‘www’));
app.set(‘port’, process.env.PORT || 5000);
app.listen(app.get(‘port’), function () {
console.log(‘Express server listening on port ‘ + app.get(‘port’));
});

image

(4)アプリのTest

npm start

image

ブラウザで、http://localhost:5000/ を開いて、以下を確認。

image

Ctrl+C、y、Enter でサーバ停止。

(5)Herokuにログインして、新しいサイトを作成

image image

image image

(6)Heoku CLIをインストールしておいてから、heroku login

image

(7)Create a new Git repository

image

(8)アプリのデプロイ

image image

(9)サイトで確認

image

image

がーん、エラー。

というエラー。

https://forum.ionicframework.com/t/problem-one-mean-ionic-2-todo-app-on-heroku/61985/2

を参考に、.gitignore から、www を消しておく

image

git add . git commit -am “first repository” git push heroku master

heroku open

image

できたー!

よし、Ionic2やろう!

関連記事
Count per Day
    Popular Posts
    スポンサーリンク

    シェアする

    • このエントリーをはてなブックマークに追加

    フォローする