1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Advanced 6. アプリケーションのherokuへのupload, まとめ

Last updated at Posted at 2019-09-21

1. Githubを使って自分のコードを公開しよう

1.1. はじめる前に必要な準備

1.1.1. Git と GitHub

  • Gitがインストールされているか確認する

    • ターミナルで
git --version

と入力してください (1.8以上のver.が表示されるのが望ましいです)

  • GitHubでアカウントを作成します(無料です)。すでにアカウントがある人はログインしてください。

https://github.com/
を開いてアカウント登録してください。

Coachより: gitはバージョン管理するためのソフトウェアです。チーム開発や個人開発で使うときに、過去の開発時点までコード遡ったり出来ます。Githubはgitを使ったウェブサービスで、主にコードの管理が出来て、チーム開発で使います。

1.1.2 deployキーの登録(Windowsのみ)

ssh_keyをコピーする

image.png

github上に登録する。

Screen Shot 2020-03-02 at 14.25.33.png Screen Shot 2020-03-02 at 14.25.40.png Screen Shot 2020-03-02 at 14.25.54.png Screen Shot 2020-03-02 at 14.26.42.png

1.2. 自分のアプリを、コマンドラインでGitHubにPushする

GitHubの自分のプロフィールページで、Repositories タブから 'New'をクリックしましょう。

image.png

名前(例:hotel-project)と、アプリについての短い説明をつけて、"public"レポジトリを選び、"create repository"をクリックします。

cd projects
cd hotel-project

コマンドライン上で、`cd`で自分のhotel-projectフォルダに入り、次のように入力します:


git init

これによって、自分のプロジェクトのgitレポジトリが初期化されます。

メモ: 最近のRailsではrails newの時にgit initを実行するようになっていますが間違って2度実行しても問題ありません。

echo public/uploads >> .gitignore

これは、アップロードしたファイルをgitの管理対象から除外するようにしています。

次に、以下のように入力してください:

git add .

これは、すべてのファイルと変更をステージング領域に追加します。

次に、以下のように入力してください:

git commit -m "first commit"

これによって、"first commit"というメッセージとともに全てのファイルがコミットされます。

次に、以下のように入力してください(usernameの部分は、あなたのGitHubでのユーザー名が入ります):

windowsの場合

git remote add origin git://github.com/<<自分のユーザー名(github上をコピったほうが良い)>>/hotel-project.git
Screen Shot 2020-03-02 at 14.45.56.png

macの場合

git remote add origin https://github.com/<<自分のユーザー名(github上をコピったほうが良い)>>/hotel-project.git
Screen Shot 2020-03-02 at 14.46.02.png

このコマンドは"origin"という名前のリモート、あるいは コネクション を作ります。これは、先ほど作ったGitHubのリポジトリを指しています。

では、以下のように入力してみましょう:

git push -u origin master

これによって、あなたの"master"ブランチのコミットが、GitHubに送られます。

おめでとうございます、これでアプリケーションはGitHubに載りました。上でoriginに指定したhttps://github.com/<>/hotel-project
のURLをブラウザでチェックしてみましょう。 (.git部分は外します)

1.3. (余裕がある人向け)Github上のファイルを編集する場合

もし続けてファイルを変更し、GitHubにpushしたい場合は、次の三つのコマンドで行うことが出来ます。

git add .

git commit -m "type your commit message here"

git push origin master

2. herokuを使ってアプリを公開しよう

Coachより: herokuとは、Railsなどで作成したWebアプリを簡単に一般に公開するためのクラウドプラットフォームです。

2.1. Heroku の準備

2.1.1 Heroku のアカウントを作成しよう

アカウントの作成はもちろん無料です。

ユーザ登録画面からアカウントを作成しましょう。

https://signup.heroku.com/
にアクセスしてアカウントを作成してください。

「First name」に名前、「Last name」に苗字、「Email」にメールアドレス、「Role」でHobbyistを選択、国を選択、言語として Ruby を選択して最後に「I'm not a robot」にチェックを入れて「Create Free Account」ボタンを押します。

しばらくすると入力したメールアドレスに「Confirm your account on Heroku」という件名のメールが届くので、本文中の activate 用の URL をクリックします。

heroku で用いるパスワードを入力してアカウントの作成は完了です。

2.1.2 Heroku CLI をインストールしよう

Heroku でコマンドライン操作を行うためのアプリケーションである、Heroku CLI をインストールします。

Heroku CLI

このページの「Download and install」という段落から、自分のノートパソコンのOSに合わせてインストールしましょう。

2.1.3 Heroku にコマンドラインでログインしよう

Heroku Toolbelt を無事インストールできたら、ターミナル(Mac)またはコマンドプロンプト(Windows)を起動して、次のコマンドを入力しましょう。

heroku login

heroku: Press any key to open up the browser to login or q to exit: と言われますのでEnterキーを押してください。するとブラウザでherokuのページが開かれます。
メールアドレスとパスワードの入力を求められたら先ほど登録したメールアドレスとパスワードを入力します。(求められないことが多い。)

ブラウザにログイン完了画面が表示されればherokuの準備はこれで終了です。

2.2. アプリの準備

バージョン管理システム

1.2.の作業を完了してください。

データベースのアップデート

まず、 Heroku で動くデータベースが必要です。いつものデータベースとは違います。 Gemfile を次のように変更しましょう。 :

gem 'sqlite3', '~> 1.3.13'

group :development do
  gem 'sqlite3', '~> 1.3.13'
end
group :production do
  gem 'pg'
end

windowsの場合

ruby '2.3.3'

の記述を削除する。

そして、ターミナル上で次のコマンドを実行してセットアップしてください。

bundle install --without production
git add .
git commit -m "Added pg gem and updated Gemfile.lock"

2.3. アプリのデプロイ

アプリのcreate

Heroku のアプリを作りましょう。
まずは世界に1つだけのアプリの名前を考えましょう!

名前が決まったら、ターミナルでコマンドを実行します。
例えば、アプリの名前を"名前を入れる-first-app"と決めた場合、ターミナルで次のコマンドを実行してください。 :

heroku create my-first-app

次のようなものが見られます。

Creating ⬢ my-first-app... done
http://my-first-app.herokuapp.com/ | https://git.heroku.com/my-first-app.git

もし、決めたアプリの名前が既に使われていたら、以下のようなメッセージが表示されます。

Creating ⬢ my-first-app... !
 ▸    Name myfirst-app is already taken

この場合は、もう一度アプリの名前を考えてなおしてみてください。

コードをpush

さて、 Heroku にコードを送信しましょう。 ターミナルで次のコマンドを実行してください。 :

git push heroku master

そうすると、こんな出力が見られるはずです。 :

Counting objects: 134, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (115/115), done.
Writing objects: 100% (134/134), 35.29 KiB, done.
Total 134 (delta 26), reused 0 (delta 0)

remote: -----> Ruby app detected
remote: -----> Compiling Ruby/Rails
remote: -----> Using Ruby version: ruby-2.6.3
remote: -----> Installing dependencies using bundler 2.0.1
remote:        Running: bundle install --without development:test --path vendor/bundle --binstubs vendor/bundle/bin -j4 --deployment
remote:        Fetching gem metadata from https://rubygems.org/..........
...
remote: -----> Launching...
remote:        Released v6
remote:        https://my-first-app.herokuapp.com/ deployed to Heroku
remote:
remote: Verifying deploy... done.
To https://git.heroku.com/my-first-app.git
 * [new branch]      master -> master

アプリのプッシュが終わってるのかは "Launching..." というテキストのところで確認してください。プッシュが成功したら データベースのマイグレート へ進んで下さい。

・ pushで認証が要求された場合

もし下のように表示された場合は (Windowsでユーザー名が全角の場合に起きます) :

Username for 'https://git.heroku.com':

まず、CTRL-Cを押しコマンドを終了します。そして次のコマンドを実行してみて下さい。

heroku auth:token
d42d086f-b127-4cf0-a2a9-acaf13287213

ターミナルに表示された文字列をコピーして下さい。上の例では文字列は d42d086f-b127-4cf0-a2a9-acaf13287213 ですが、あなたの画面では違う文字列が表示されています。

そして、git push ... コマンドを実行して下さい。

git push heroku master
Username for 'https://git.heroku.com':   ← 何も入力せず Enter
Password for 'https://git.heroku.com':   ← 上でコピーした文字列をペーストし Enter
・ その他のエラーの場合

画面表示を見ながらコーチと相談して問題を解決して下さい。

データベースのマイグレート

そして、ワークショップでローカルにやったように、データベースのマイグレートをする必要があります。 :

heroku run rails db:migrate

公共のネットワークなどを使った場合、ETIMEDOUT: connect ETIMEDOUT (IPアドレス):5000 というエラーが起きることがあります。エラーになった場合は実行するコマンドを heroku run:detached rails db:migrate に変更してみてください。

そのコマンドが実行されたら、インターネットからアプリを見ることができます。このアプリの例ではURLは、 http://my-first-app.herokuapp.com/ です。もしくは、クラウドIDE以外ならターミナルで次のコマンドを実行すれば、そのページを見に行くことができます。

heroku open

ブラウザでアプリが表示されたら完了です。

2.4. (余裕がある人向け)herokuの操作や変更の反映方法は下記です。

もし、これまでに出てきたコマンドの実行中に表示されるURLを見逃していた場合は、以下のコマンドを実行した時の Web URL の行(最後の行)を確認してください。

heroku apps:info

エラーの表示は

heroku logs -t

変更を反映したい場合は

git add .

git commit -m "type your commit message here"

git push heroku master

3. まとめ

お疲れさまでした。
これでアプリの作成から公開までが完了です。

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?