なな、herokuを使ってWebアプリを公開する その2

こんにちは、ななこにごうです。

前回の続きWebアプリの公開までを引き続き綴っていきます。

その２は、

1、公開鍵の生成とherokuの登録

2、composerの設定とApacheの設定

　（ここで前編で作成したアクセストークンを使いますよ！）

を行っていきたいと思います～

それではさっそく・・・

1、公開鍵の生成とherokuの登録

C:\Users\（ユーザー名）\ に.sshフォルダを作成します。

コマンド：mkdir .ssh

グレーの部分にはユーザー名が入りますよ～

.sshフォルダを作成したら、Git Bash（C:\Program Files\Git内）を起動します。

起動後下記のコマンドを実行

コマンド：cd  C:/Users/（ユーザ名）/.ssh

次に先のコマンドを実行

コマンド：ssh-keygen -t rsa -C "（heroku登録メールアドレス）"

上記のコマンドを実行後赤線部分に「id_rsa」を入力すると結果は

こんな感じ・・・・

 次はherokuに公開鍵を送信！

コマンド：heroku keys:add

 上記のコマンドを実行します。

成功したらherokuに登録したアドレスにメールが届くと思います。

とりあえずできてるか確認します。

herokuにログインし、Dashboardの左上にある自分のメールアドレスをクリック。

下の写真の赤線部分Manage accoutをクリックすると

SSH　Keys欄を確認します。

（↑グレーの部分は全てherokuに登録したアドレスです。）

 これにて1、公開鍵の生成とherokuの登録は完了です。

のはずなんですが！なぜか登録されませんでした（・ω・`）

実行結果はこんな感じになりました。

う～ん、なんかよくわからないけどログインできないっぽい・・・

試しにコマンドプロンプトでログインしてみました。

できた。

この後GitBashにて

コマンド：heroku keys:add

を実行したら登録できました。理由もわからぬまま。

でも、できたからよしとします。

2、composerの設定とApacheの設定

今度はコマンドプロンプトを使います。

コマンドプロンプトにて下記のコマンドを実行します。

コマンド：cd C:\donichi\fuelphp-1.7.3

コマンド： php composer.phar config -g github-oauth.github.com （Githubのアクセストークン）

実行結果はこんな感じ・・・

次はこのコマンド

コマンド：php composer.phar self-update

コマンド：php composer.phar update

実行結果はこんな感じ(下切れてますが。。。)

次の操作で「２、composerの設定とApacheの設定」終わりです。

C:\donichi\fuelphp-1.7.3フォルダに下記の内容でProcfileを作ります。

内容：　web: vendor/bin/heroku-php-apache2 public/

以上で今回は終わりです～ 

（　ちょっと中途半端ですが(^_^;)　）

次回はいよいよherokuにアップします！

ろく、herokuをつかってWebアプリを公開してみる その1

こんにちは、ななこにごうです。

日曜日の章まで無事に終わり、演習問題もやり遂げました。

今度はherokuを使ってWebアプリ（今回書籍通りに作った社絡のことです）を公開してみようと思います。

今回珍しく長いです。なので何回かに分けます。

※以降はwebアプリのバックアップを取ってから実行してください

という事でまずはherokuのアカウントを取得します。

herokuのアカウント取得してすぐにはWebアプリの公開とはならないみたいなのでその手順も簡単に記載しようと思います。

まずは、herokuのアカウント取得します。

 

入力項目の一番下「Pick your primary development language」は「PHP」を選択します。

Create Free Accountを押すと入力したメールアドレス宛てにメールが届くので、

メールのリンクから本登録して完了！

herokuにWebアプリを公開するまでにはほかにもしないと準備が必要みたいです。

1、GitHubのアカウント登録とアクセストークン取得

2、Rubyをインストール

3、PHPをインストール

4、Composerをインストール

5、heroku-toolbeltをインストール

6、DevKitをインストール

たくさん、ありますね。とりあえず、やってみましょう！

 1、GitHubのアカウント登録とアクセストークン取得

赤枠内を入力し「Sing up for GitHub」

その後、本登録用のメールが来るのでheroku同様本登録しまーす！

本登録できたら、おそらく下のような画面がでると思います。

この画面からアクセストークンを作成します。

右上の緑のマークをクリックして上の写真の赤枠部分「setting」をクリック。

その後、画面左の「Personal access tokens」をクリックし画面右側にある「Generate new token」をクリック。

すると、下の写真のような画面。（上と下が切れてますが…）

画像の上枠部分を入力し「generate token」をクリックするとアクセストークンが表示されるので、保存しておきます。

（閉じてしまうと見れなくなるので忘れずに保存！）

ちなみに上の赤枠はアクセストークンの説明なので入力するのはなんでもよいかと思います。

2、Rubyをインストール

Rubyのサイトからインストーラーをダウンロードして、インストールを開始します。

インストールの仕方は書籍の環境構築でやったような感じなので省略。

ただ、下記の写真の赤線部分のところには「✓」を入れといてくださいね～

インストールが終わったらちゃんとインストールできたか確認しましょう！

この作業書籍の環境構築の章（書籍P49～）でもしましたね(^^)

コマンドは「ruby -v」です。実行結果が環境によって変わりますが

私の場合はこんな感じ・・・

それと、もう一つ・・・

コマンド：gem -v 

これで、rubyのインストール終わり＼(^0^)／

どんどん行きましょ～！

3、PHPをインストール

ruby同様サイトからダウンロードして、インストールを始めますが、

.zipファイルを解凍する前にC:\にphpフォルダを作って置きます。

そして、.zipファイルは「c:\php\」に解凍しましょう～

解凍したら先ほどと同じようにインストールできたか確認！

おわり＼(^0^)／

4、Composerをインストール

Composerのサイトから「Composer.phar」をダウンロードしてc:\phpに置く。

「Composer.setup」でもいいみたいですが上手くいきそうになかったので私は「Composer.phar」をダウンロードして進めました。

「Composer.setup」の場合は下の手順はしなくていいみたいです。

c:\phpにcomposer.batというファイルを作成してファイルの中身を

「＠php "%~dp0composer.phar" %*」にします。

→これをすることでコマンドプロンプトでcomposerと入力するだけで

composerが出るみたいです。

それでは、ちゃんとインストールできたか確認します！

 オッケーみたいですね♪

終わり＼(^0^)／

5、heroku-toolbeltをインストール

ここでやっとherokuの文字が出てきました（´‐｀）

あと二つ・・・

herokuを開いてログインします。

Getting Started on HerokuからPHPを選んでクリックします。

次にI'm ready to startをクリックします。

するとこの画面…

赤枠部分をクリックしてダウンロードします。

ダウンロードしたらコマンドプロンプトにて下記のコマンドを実行

コマンド：gem install heroku bundler

（　実行結果は長いので割愛しますm(_　_)m　）

終わり＼(^0^)／

6、DevKitをインストール

まずはc:\にdevkitフォルダを作成しましょう！

Rubyのサイトからインストーラーをダウンロードしたと思うのですが、

同じところからDevKitをダウンロードできるのでダウンロードして

devkitフォルダに解凍します。

解凍が終わったらコマンドプロンプトにて下記のコマンドを実行します。

コマンド1：cd c:\devkit

コマンド2：ruby"C:\devkit\bk.rb"init

コマンド3：ruby"C:\devkit\bk.rb"install

コマンド4：gem update--system

コマンド5：gem install bundler

実行結果はすべて割愛しますm(_　_)m

やっと、インストールするものは終わった…

長いと感じたのはわたしだけでしょうか(^_^;)

以降はその２に続きます♪

（　次の更新は来週の金曜日・・・遅くてごめんなさい(+_+)　）

それでは～(^o^)ﾉｼ

ご、「日曜日」の章

こんにちは、ななこにごうです。

土曜日の章が終わり覚える事が多くてパンクしそうですが、

いよいよ本題ですね。

 最終目標の「社内連絡用Webアプリ」（社絡）の構築に入りました。

土曜日の章より頭の中に？が出てこなかったです(*´ω｀*)　たぶん…

この章もスペルミスには注意しないとうまくいかないので要注意ですね～

土曜日の章で痛い目にあったので

今回はしっかり確認しながらしましたよ(｀・ω・´)ｂ

※書籍P208の28行目について

　書籍では、

　<?php echo date("Y-m-d H:i", $item->created at); ?></p>

　と、なってますが、

　<?php echo date("Y-m-d H:i", $item->created_at); ?></p>

    ですね。「_」に入力忘れにご注意くださいm(__)m

 章の最後に演習もあるので「oil g scaffold」で自動生成した各ファイルの機能は

しっかりチェックしていた方が迷わずに済みますね！

私は迷ってわたわたしました(´・ω・`)

それと、「oil g scaffold」で基本的なWebアプリケーションに必要なプログラムとマイグレーションファイルを自動生成した後、

マイグレーションファイルの内容をデータベースに反映させ

リクエスト情報を監理するテーブルを作成するんですが（書籍P191～192）

ここでもコマンドの入力ミスで失敗しました（笑）

コマンドは「oil r migrate」ですね。「ｒ」です。ご注意ください。

一番最後の説明（書籍P213～217）は頭がパンク寸前になりますが

それ以外は割とすらすら進めるかと思います。

それでは、また次回～m(__)m

（次は番外編かな…） 

よん、環境構築の番外編

こんにちは、ななこにごうです。

今回はちょっと書籍から外れて…というか順番が前後するんですが、

環境構築時に出る書籍と一致しないとこやエラーについてを少し書いておこうかな、と思います。

【その1】解凍後のフォルダ内に

　　　　「startbootstrap-small-business-1.0.3」フォルダがない

　　　　書籍P48のようなフォルダ構成にならない

→startbootstrap-small-business-1.0.3.zipを全て展開した後、startbootstrap-small-business-1.0.3.zipを選択し右クリック。

 →メニューバーが表示されたら下の写真の赤線の部分をクリック。

　「解凍」ー「出力先を指定して解凍」

 クリックしたら、下の写真のような画面が出てくるはずなので、

出力先に全て展開で指定したフォルダと同じフォルダを入力してOK

これで解凍後のフォルダ内に「startbootstrap-small-business-1.0.3」フォルダが表示されるはずです。

【その2】環境構築の最後で「vagrant up」をした時に「8000番ポートが既に使用されています。」というエラー

「The forwarded port to 8000 is already in use on the host machine.」

こんな感じのエラーが出てきた場合、おそらく8000番ポートが既に使われているようです。

（前後には色々書かれていると思いますが…）

私の場合はOracle VM VirtualBoxマネージャーから左に表示されているものを

メニューバーの「仮想マシン」ー「除去」をし再度VirtualBoxとVagrantをインストールすると解決しました。

（vagrant up失敗の原因は他にもあったので vagrant up成功はしなかったですが）

 上記の方法で解決しない場合もあると思いますのでちょっとメモとして…

8000番ポートが使われていると言われているので、解決策としては

1、8000番ポートを使用しているアプリケーションを止める

もしくは、

2、別のポート番号を使用する

 かと思います。

（　他に方法があれば教えて頂けるとありがたいですm(__)m　）

1、の方法をググってはみたんですが、よくわからなかったので

今回は2、の方法を書いていきますね～

やり方としてはそんなに難しくはないと思うのですが

手順1、C:\donichi\fuelphp-1.7.3\Vagrant\vagrantfile　を開いて7行目の

　　　config.vm.network 'forwarded_port', guest: 80, host: 8000, host_ip: '127.0.0.1'
を
config.vm.network 'forwarded_port', guest: 80, host: 1234, host_ip: '127.0.0.1'
と変更して保存。

手順2、コマンドプロンプトで　cd vagrant して、vagrant up を実行

変更点は赤字で書いてあるとこのみです。

これで解決するはずです！

1234番ポートに変更しているのでURLも必然的に書籍とは変わってきます。

※URL

　http:// localhost: 8000/ donichi.php

 赤字の所でポート番号を指定しているので1234番ポートに変更すると

赤字の部分が「1234」に変わりますね！

URLの説明は書籍P70に載ってますので見て頂けると嬉しいです(^^)

私が体験した書籍と一致しないまたはサポートページに乗ってないエラーは

今のところこの二つですね。

他にもエラー出てくるとおもいますので、解決策等載せていきたいと思います。

（もしかしたら私から聞くこともあるかもしれないので教えて頂けたら嬉しいです。）

それでは～( ・ω・)ノ

さん、「土曜日」の章

こんにちは、ななこにごうです。

ようやく「土曜日」の章に入りました。（書籍P62～）

ここからちょっとだけプログラムを組みました。

書籍P87～すこし繰り返し文を使うんですが、

繰り返し文便利ですね～

同じような処理なのにすべてプログラムを書いていたら

気が遠くなるしミスが多発しそうですからね(+_+)

書籍での目標でもある社内連絡用Webアプリ「社絡」の中に総務課へのお願いページを作るみたいなので…

総務課へのお願いページを作る

↓

お願いが多数くる

↓

その多数きたお願いを同じように表示させる

てことは、繰り返し文使いますよね～^^;

ちゃんと覚えとかない( ..)φメモメモ

繰り返し文も含めて「重要！」と書かれているところも

多く覚えることはいっぱいですが

今回の章で正しく表示されないのは大方スペルミスが原因だったので

環境構築の章よりはまだ進めやすかったです。

環境構築ではつまずいたら何が原因かわからない事が多かったので

ページ数でいえば今回のほうがさくさく進んだかな？

結果が目にみえるから楽しく感じますしね♪

次は日曜日の章（書籍P140～）ですね！

がんばりますよー(^ω^)！

それでは～(^^)/

に、環境構築

こんにちは、ななこにごうです(*´ω｀*)

パソコンを使いやすくするで拡張子を表示させることはできたので内容に入りました。

初めにすることは

「環境構築」（書籍P20～）

本の最終的な目標はWebアプリを作ることみたいなのでその前に準備がいるみたいですね。

最初にすることは、、、

「開発に必要なアプリをダウンロードして、インストール」と

「インストールしたアプリに必要な設定をして開発できるようにする」

この2つが前準備みたいです。

本では7つインストールすることになっていたので全部インストールしましたが、

最後にBootstrapテーマ「Smallbusiness」のセットアップをしできた～と思ったら

解凍したはずのファイルが

解凍先にないっΣ(ﾟДﾟ)

とりあえずやり直しと思い圧縮ファイルを選択し右クリック。

表示されたメニューを見てみると「解凍」があったのでなんとなく見てみると

「出力先を指定して解凍」　…これかっ！！！

解凍先を指定して、「OK」

何とか書籍通りのフォルダ構成になりました。（まだP48。先は長い…）

さて、やっと次・・・

vagrant up で開発環境を生成／設定。

一回では成功しませんでした(;^ω^)

一回目は購入者サポートのページに載っていたケース1で解決しました。

（64bit版PCのはずなのに64bit版PCのコマンドでなく32bit版のコマンドでしか成功しなかった。こういう事もあるんですね…）

あと、8000番ポートが使われているっていうエラーも出ましたが

Oracle VM VirtualBoxマネージャーを開いて【仮想マシン】から除去とかいろいろして何とか成功しました。

この道のりはすっごい長かった気がします( ;∀;)

他にも違ったエラーが出てくることもあるとは思いますが

対処法が分からない場合はお問い合わせ・質問から聞いてもいいかと思います。

（私は結構ググったりしましたが、そもそも何言ってるのかわからなかったので…）

次回からやっと本題に入っていけます。

いち、パソコンを使いやすくするために

こんにちは、ななこにごうです。

早速「土日でわかるPHPプログラミング教室」はじめました～

本を開いて　　　よし、がんばろ～！

まずは環境構築をする前の段階(書籍P8～)をよみまして…

パソコンを使いやすくするために拡張子を表示させた方がいいみたいですね。

たくさんのファイルの中から特定のファイルを探すことが多くなるらしいので。

拡張子ってどうやったら表示されるの？！から始まりました（笑）

本には表示の仕方が書いてあるけどそもそもメニューバーが表示されてないじゃーん

Windows7は最初からメニュバー表示されてないの？どのPCでも一緒なのと思いつつ

ググりました。

結果、

エクスプローラー　⇒　整理　⇒　レイアウト　⇒　メニューバーにチェック

なんだ、簡単。メニューバー表示されました。

前途多難ｗ　土日だけでは無理な予感。

こんな感じでよくプログラミングしてみようと思ったな、とは言わないでくださいね（笑）

地道に頑張ります。

それではまた次回(-ω-)/