ウェブサイトを公開する(Mac)

Header9

0 : この章の目的

 この章で、Macで作成したRuby on Railsのウェブページを公開する方法を説明します。
ウェブページの公開は、 という2つのツールを使って行います。
まず git というツールを使って Ruby on Rails の設定ファイルの変更履歴を保存し、heroku というサービスを使って最新のページを公開します。

ではやってみましょう!


1 : gitの導入

まずはウェブサイトの公開をするために使う、git というツールをインストールしましょう!

ターミナルを開いて下の入力をして下さい。

 ターミナル(半角英数字で入力)
1 brew install git

これで git のインストールが完了しました。

これが終わったら、導入を完了させるために下の入力をして下さい。

 ターミナル(半角英数字で入力)
1 2 git config -global user.name "自分の名前" git config -global user.email "自分のメールアドレス"

これでgitの設定が完了しました。
下の入力で、gitのバージョンが出てくるか確認しましょう。

 ターミナル(半角英数字で入力)
1 git --version

このgitを使って、herokuでのページ公開を設定していきます。


2 : heroku

ではこのherokuを使って、ページを公開しましょう!

 ① : heroku を登録する


最初にherokuを登録してみます。 heroku の登録ページで必要情報を入力して、create free acountをクリックして下さい。 Heroku signup 登録が完了すると認証メールが届きますので、内容を確認の上認証をして下さい。
認証のページでパスワードの登録が必要になるので、好きなパスワードを設定して下さい。

これで登録が完了しました。herokuのログイン画面から、ログインできるか確認しましょう。 Heroku login ログインはできたでしょうか?

続いて、ターミナル上で heroku を動かすためのツールHeroku Toolbeltをインストールしましょう。

 ② : Heroku Toolbelt のインストール


続いてターミナル上でherokuを動かすためのツールをインストールしましょう。

こちらのページから「Mac OS X」を選択して、ダウンロードを始めましょう。 Heroku toolbelt web ダウンロードができたら、ダウンロードできたファイルを開きましょう。
最初はこのような画面が出てきます。 Heroku toolbelt 1 「continue」をクリックすると、 Heroku toolbelt 2 このような画面が出てくるので、インストールを続けて下さい。
最後にインストールが完了しましたの表示が出てきたら、大丈夫です。
 Heroku Toolbelt をインストールすることができたので、ターミナル上でherokuを動かすことができるようになりました。

まずはターミナル上で、heroku にログインしてみましょう。
公開したいページのフォルダに移動して下さい。

 ターミナル(半角英数字で入力)
1 2 3 cd Desktop cd rails_project cd 作ったページ(myapp, message-app など)

移動ができたら、下の入力をして下さい。

 ターミナル(半角英数字で入力)
1 heroku login

メールアドレスとパスワードの入力が求められますので、自分のアカウントの情報を入力して下さい。
※ パスワードは入力しても表示されませんが、正しく入力されているのでそのまま入力して下さい

ログインに成功するとAuthentication successful.が表示されます。

 ここまででherokuの設定ができたので、作ったページを公開してみましょう!

 ③ : Heroku でページを公開する


heroku の設定ができたので、ページを公開しましょう!

heroku でページを公開するには、
  • Rails のページの設定
  • git の設定
  • heroku の設定
の3つを設定する必要があります。
では、一つずつやってみましょう。

heroku でページを公開するには、Gemfileに設定内容を加える必要があります。Gemfileに下の設定を追加しましょう。

 Gemfile(一番下の行に追加)
※ 半角英数字で入力。変更が完了したら「Command」と「s」を一緒に押して内容を保存して下さい。
54 55 56 57 group :production do gem 'rails_12factor' gem 'pg' end

ここの「group :production do」で、公開するページの運用環境で使用するgemを設定します。

ここで設定した運用環境(公開するページ)で使う gem は、
  • rails_12factor(heroku 上でCSSファイルや画像ファイルを使うために設定)
  • pg(heroku 上で使うデータベースPostgreSQLを設定)
この2つになります。
ここで設定した「PostgreSQL」を使うために下の入力をして下さい。

 ターミナル(半角英数字で入力)
1 brew install postgresql

※ この入力でpostgreSQLがインストールできたので、今後はこの入力をする必要はありません。
では最後に、設定を反映させるためにターミナルで下の入力をして下さい。

 ターミナル(半角英数字で入力)
1 bundle install

 動かない場合は、「Gemfile.lock」を削除してから、試してみて下さい。

これで「Gemfile」上での設定が完了しました。

続いてgitの設定を行います。
git はファイルの変更履歴を保存するツールになります。このgitを使って、herokuでページを公開します。

まずは、公開するページのフォルダ(「myapp」「message-app」など)でgitを使う設定をします。
公開するRails のウェブサイトのフォルダで下の入力をして下さい。

 ターミナル(半角英数字で入力)
1 git init

これでgitで公開するRails のウェブサイトでgitを使う設定ができました。
ここにファイルの変更履歴を保存します。下の入力をして下さい。

 ターミナル(半角英数字で入力)
1 git add .

 ターミナル(半角英数字で入力)
1 git commit -am "first commit"

これで現在までに作成されたファイルが、first commit」という履歴で保存されました。
では下の入力をしてみて下さい。

 ターミナル(半角英数字で入力)
1 git log

Git log 一つだけだとは思いますが、このような表示が出てきたでしょうか?この入力で、変更履歴を表示します。
中身を確認できたら「q」を押して下さい。これでまたコマンドを入力する画面に戻れます。

 ファイルの変更に区切りがついたら、「git add .」「git commit -am "履歴の名前"」で変更履歴を残しておくといいと思います。
最後にherokuでホームページを公開しましょう!

最後にherokuの設定をして、ウェブページを公開しましょう!

 herokuで公開するウェブページは、gitでの最新の変更履歴が適用されます
git commit -am "履歴の名前"が終わってから、heroku での設定を行いましょう。


まずは、herokuで何も設定されていないページを作成します。
作成したいRailsのウェブサイトのフォルダ(「myapp」「message-app」など)で、下の入力をして下さい。

 ターミナル(半角英数字で入力)
1 heroku create

これで、herokuで初期のウェブページが作成されました。
終わったら、gitに保存された最新の変更履歴を適用させます。下の入力をして下さい。

 ターミナル(半角英数字で入力)
1 git push heroku master

これでページに変更履歴を適用できました。
続いて、Railsのページで作ったデータベースの設定を適用させます。下の入力をして下さい。

 ターミナル(半角英数字で入力)
1 heroku run rake db:migrate

これでRailsで作ったページを設定できました。
最後に下の入力をすれば、作ったページを見ることができます。

 ターミナル(半角英数字で入力)
1 heroku open

作ったページは公開されたでしょうか?

最後にウェブページを公開する方法をまとめます。
  • Gemfile
  • まずは「Gemfile」にgemの設定を加えます。

     Gemfile(一番下の行に追加)
    ※ 半角英数字で入力。変更が完了したら「Command」と「s」を一緒に押して内容を保存して下さい。
    54 55 56 57 group :production do gem 'rails_12factor' gem 'pg' end

    設定ができたら、gemの内容を適用させます。

     ターミナル
    1 bundle install

    これでRailsで作ったファルダでの設定は完了しました。
  • git
  • 続いて、gitに変更履歴を作成します。
    公開したいページのファルダで、gitを作成します。

     ターミナル(半角英数字で入力)
    1 git init

    ※ ファルダ内で一度設定してある場合は、この入力をしないで大丈夫です

    続いて次の入力で変更履歴を保存します。

     ターミナル(半角英数字で入力)
    1 git add .

     ターミナル(半角英数字で入力)
    1 git commit -am "履歴の名前"

    ここまででgitの設定は終了です。
  • heroku
  • ここまでできたら、herokuの設定を行います。
    ここまでで入力をしてきたファルダで下の入力をして、herokuのホームページを作成します。

     ターミナル(半角英数字で入力)
    1 heroku create

    ※ ファルダ内で一度設定してある場合は、この入力をしないで大丈夫です

    続いてgitの最新の変更履歴を適用させ、

     ターミナル(半角英数字で入力)
    1 git push heroku master

    データベースの設定を適用させます。

     ターミナル(半角英数字で入力)
    1 heroku run rake db:migrate

    最後に下の入力で公開したページを確認しましょう!

     ターミナル(半角英数字で入力)
    1 heroku open

 ウェブページの公開はここまでです。