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

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

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

### 1.1.1. Git と GitHub

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

	* ターミナルで

```
git --version
```

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

* [GitHub](https://github.com)でアカウントを作成します(無料です）。すでにアカウントがある人はログインしてください。

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

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


### 1.1.2 deployキーの登録(Windowsのみ)
#### ssh_keyをコピーする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496885/a8411f3c-f50c-3a54-e896-74ee48856467.png)

#### github上に登録する。

<img width="631" alt="Screen Shot 2020-03-02 at 14.25.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/53443/a08da9b3-fd06-c21e-2bb6-be75744bc961.png">
<img width="731" alt="Screen Shot 2020-03-02 at 14.25.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/53443/806be9e6-ff60-8eb0-bd5b-8661ec0bf6a1.png">
<img width="1223" alt="Screen Shot 2020-03-02 at 14.25.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/53443/cdf9087e-2474-ace9-7be7-67018e7ae757.png">
<img width="1095" alt="Screen Shot 2020-03-02 at 14.26.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/53443/867db13d-fe53-63f3-a2fa-25e2a90140e6.png">





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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496885/b429d225-a401-1fc2-f778-094d8b5560c2.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
```

<img width="1010" alt="Screen Shot 2020-03-02 at 14.45.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/53443/62fd313e-a561-d820-0951-eb9495bb8226.png">


macの場合

```
git remote add origin https://github.com/<<自分のユーザー名(github上をコピったほうが良い)>>/hotel-project.git
```

<img width="1002" alt="Screen Shot 2020-03-02 at 14.46.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/53443/9c25351f-7871-e47f-a5f3-79cd3148ad2a.png">




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


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

```
git push -u origin master
```

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

おめでとうございます、これでアプリケーションはGitHubに載りました。上でoriginに指定したhttps://github.com/<<username>>/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/)からアカウントを作成しましょう。

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](https://devcenter.heroku.com/articles/heroku-cli)

このページの「[Download and install](https://devcenter.heroku.com/articles/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 のアプリを作りましょう。  
まずは世界に１つだけのアプリの名前を考えましょう！  

名前が決まったら、ターミナルでコマンドを実行します。  
例えば、アプリの名前を"名前を入れる-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/](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. まとめ
お疲れさまでした。
これでアプリの作成から公開までが完了です。