SPA開発 2. 開発環境を整える #04
2019年10月12日に更新

HerokuCLIのインストールとherokuアプリケーションの作成

前回までのおさらい

  1. Railsをインストールしました

    macにRailsをゼロからインストールする

  2. RailsプロジェクトをGitで管理をする設定を行いました。

    Rails apiモードのプロジェクトを作成し、Gitにコミットする

  3. BitbucketにRailsプロジェクトをアップしました。

    Bitbucketに公開鍵を追加し、Railsプロジェクトをpushする

今回は本番環境で使うherokuの導入です。

これでチャプター「開発環境を整える」は完了とします。

それでは進めていきましょう。

この記事で達成すること

今回はherokuCLIを導入して、herokuにRailsプロジェクトを表示するアプリケーションを作成していきます。

herokuCLIとは、herokuの操作をターミナル上で行えるようにする便利なツールです。

以下の手順で進めていきます。

  1. herokuCLIのインストール
  2. herokuCLIのセットアップ
  3. herokuアプリケーションの作成
  4. アプリケーションの名前を変更

herokuにユーザー登録する

まずは何がなくともherokuに登録しておいてください。

わからない項目はGoogle翻訳を使うと便利です。

signup - heroku

herokuCLIのインストール

herokuCLIはHomebrewでインストールしていきます。

Homebrewのインストールがまだの方はこちらの記事を参考してください。

macにRailsをゼロからインストールする

このコマンドでバージョンが表示されていればインストールできています。

$ brew -v

herokuCLIのインストール

ターミナルで以下のコマンドを実行してください。実行ディレクトリはどこでもOKです。

最新のコマンドはここにあります。

The Heroku CLI -heroku

$ brew tap heroku/brew && brew install heroku

インストールの確認しておきましょう。

$ heroku --version

# バージョンが表示されたらインストール成功です。
heroku/7.25.0 darwin-x64 node-v11.14.0

Warning: heroku update available from 7.25.0 to 7.27.1.このような表示が出たらupdateしておきましょう。

$ heroku update

herokuCLIのセットアップ

herokuにログイン

インストールが完了したら、herokuにログインします。

$ heroku login

「loginするには任意のキーを押せ」と言われるのでEnterを押します。

heroku: Press any key to open up the browser to login or q to exit:

ブラウザのログイン画面に飛ばされるので、メールアドレスとパスワードでログインを行ってください。

ログインに成功するとこのような画面になります。

2019-08-03 21-25-25

ターミナル上でログインを完結するにはコマンドオプションを付けます。

$ heroku login --interactive

さて、ターミナルに戻りましょう。

herokuにSSHキーを追加する

この記事で作成した公開鍵をherokuにも追加します。

Bitbucketに公開鍵を追加し、Railsプロジェクトをpushする

$ heroku keys:add

.sshディレクトリにkeyが複数ある場合は下記のように聞かれます。

id_rsa.pubを選択してください。

? Which SSH key would you like to upload? 
❯ /Users/ユーザー名/.ssh/aws_id_rsa.pub 
  /Users/ユーザー名/.ssh/id_rsa.pub 

SSHキーが追加できたか確認しておきましょう。

$ heroku keys

# SSHキーの一部が表示されます。
ssh-rsa AAAA...BBBB

herokuのアプリケーションを作成する

Railsプロジェクトに移動する

Railsプロジェクトに移動します。(ディレクトリパスはご自身のものに置き換えてください)

$ cd rails/myapp8

アプリケーションを作成する

heorkuに新しいアプリケーションを作成しましょう。

$ heroku create

表示されたURLにアクセスしてください。

このアプリケーション上にRailsプロジェクトが乗っかります。

2019-08-03 21-46-36

このURLに自分のRailsアプリケーションを表示することができます。

これでインターネット上に公開する準備は整いました。

herokuアプリケーションの名前を変更する

herokuは、アプリケーションの名前を好きなものに変更することができます。

名前を変更すると、".herokuapp.com"以前のURLが変更されます。

今回は「spa-myapp8」としました。

$ heroku rename spa-myapp8

アプリケーションの名前は重複が許されません。下のように出た場合は他の名前を指定してください。

Name myapp is already taken

新しいURLにアクセスしてみましょう。先ほどと同じ画面が出るはずです。

herokuアプリを独自ドメインで表示するには?

長くなったのでこちらの記事にまとめました。

herokuに独自ドメインを設定しSSL化する方法を画像で分かりやすく

さて次回は

これでRailsプロジェクトを公開する土台が作成できました。

次回のチャプターはRailsをHerokuにデプロイするです。

herokuのセットアップをし、インターネット上にRailsプロジェクトを表示していきます。

お楽しみに!!

現在、カテゴリー「Rails apiとNuxt.jsでSPA開発」のデモアプリを構築中です。記事になるまでもう少々のお時間が必要です。ブログの更新が止まって申し訳ありません。デモアプリの進捗状況は こちらの記事 で随時お伝えしてまいります。
スポンサー広告
次の記事はこちらです
SPA開発
今日のTweet
スポンサー広告