Herokuを使ってWebページを作成

#参考にした資料

この記事は[ゼロから始めるWEBプログラミング入門](https://sbc-web.hatenablog.jp/entry/2017/01/29/111134)を参考にしながら行いました。

----
##環境

**Windows10**

**Paas**
*heroku/7.47.0 win32-x64 node-v12.16.2*

**Git**
*git version 2.27.0.windows.1*

**Windows Terminal**
*1.3.2651.0*

**プログラミング言語**
*Java*

**Webフレームワーク**
*Spring framework*

----

#ここでやること(できること)

デプロイを実行してWebページを表示させられるようになる

##Herokuとは？
+ 無料かつ簡単にWEB公開ができるすぐれもの
+ 開発者はプログラム作ってGitにcommitしてpushするだけ
+ それ以外のことはHerokuが自動的にやってくれる


単純に公開するだけだったら、初心者でもすぐにできると思います。(事前準備などが終わっていたこともありますが実際に初心者の僕自身でも、10分くらいでデプロイできました)

####実際に公開するWebページはこんな感じです↓
![スクリーンショット 2020-11-09 113037.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619833/aecab04f-9899-79dd-5574-2e3f8c5d57cb.jpeg)
テキストのみの簡素なページ

##事前準備として

+ Heroku会員登録
+ Heroku CLIのインストール(Gitも一緒に)

が必要です。
自分はすでに終わっていたので、ここでの紹介は省きますが必要な方はこちらからご覧ください。
[Heroku会員登録](https://sbc-web.hatenablog.jp/entry/2017/01/29/113159)
[Heroku CLIのインストール(Gitも一緒に)](https://sbc-web.hatenablog.jp/entry/2017/01/29/143550)

#ソースのダウンロード
Spring frameworkのWEBアプリを Heroku で使用できるようにしたソースを Github で作成してくださっているので、ありがたく拝借します。(ありがとうございます。)

###Windows PowerShellを開く
Windowsマークを押して「windows terminal」を検索して、PowerShellを開きます。(検索は「ter」でも引っかかった)
もしくは、「cmd」と入力してコマンドプロンプトから操作することも可能です。

###ソースをダウンロードするフォルダに移動
`PS C:\Users\xxxx> cd desktop`

自分の場合は、初期位置がxxxx(自身のユーザ名)なので、そこから`cd`コマンドを使ってデスクトップに移動し、デスクトップ内にダウンロードしました。

###ソースをダウンロード(クローン)
Githubに作成してあるソースを git clone コマンドを使って取得します。

`PS C:\Users\xxxx\desktop> git clone https://github.com/sbc-f/web.git`

ソースが置いてあるGithubのURL↓
https://github.com/sbc-f/web.git


#Herokuで作成したプロジェクトの管理画面を開く
事前に作成しておいたプロジェクトがあるのでそれを使います。
（参考にしたページには Heroku のプロジェクト新規作成から丁寧に書かれているので必要な方はそちらをご覧ください）

+ ダッシュボードからアプリを選択
![スクリーンショット 2020-11-09 120216_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619833/94160663-75f8-bdef-1165-fd80699e7dd3.jpeg)

+ 「Settings」をタップ
![スクリーンショット 2020-11-09 120659.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619833/900fff49-3224-ce75-e73a-41abf5b9b64f.jpeg)

+ 「Heroku Git URL」をコピーする（あとで使う）
![スクリーンショット 2020-11-09 120941.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619833/07087823-6b02-d884-676d-e520b5c908e3.jpeg)
*デプロイ後の画面をスクショしたので、「Framework」と「Slug size」の項目が選択されていますが、デプロイ前はこれらの項目は空白です。

#いよいよデプロイ

###Gitコマンドでリモートを追加します。
(追加には、**リモート名**と**Heroku Git URL**が必要です。)

+ リモート名 : 任意の名称

`PS C:\Users\xxxx\desktop> cd web`
*リモート名「web」に移動する*

`PS C:\Users\xxxx\desktop\web> git remote add web https://git.heroku.com/scbc-testdb.git`
*さっきコピーした「Heroku Git URL」を貼り付けて、リモートを追加する*

###Heroku にデプロイ
(リモートにPushすることで、Herokuが自動的にビルドからデプロイまでやってくれる。 Pushには**リモート名**と**ブランチ名**を指定します)

+ リモート名 : web (Pushするリモートを指定)
+ ブランチ  ： master (最初に作られるブランチ)

~~`PS C:\Users\xxxx\desktop\web> git remote add web`~~
**※　[nautii](https://qiita.com/nautii)様より、コマンド記述ミスのご指摘をコメントでいただきました。ご丁寧にありがとうございました！！
正しくは下記↓**
`PS C:\Users\xxxx\desktop\web> git push web master`

#作成されたアプリの確認
![スクリーンショット 2020-11-09 122734.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619833/5f671204-c4d4-a908-6d9b-3054a01e0afe.jpeg)
「Open app」をタップすると、デプロイされたWebページを確認することができます。
下記のように表示されたらデプロイは成功です。
![スクリーンショット 2020-11-09 113037.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619833/4209bdec-b62a-0da9-f784-e5fb82c8fbca.jpeg)


**お疲れさまでした。**

----

#よく使うHerokuコマンド一覧


| コマンド | 説明 | 使用例 |
|:-:|:-:|:-:|
| heroku -v  |  バージョン確認 | -  |
| heroku login  | ログイン  | -  |
| heroku create[アプリケーション名] | アプリケーション作成  | heroku create scbc-testdb  |
| heroku info  | アプリケーションの情報を見る  | -  |
| heroku logs  | ログを見る  | -  |
| heroku ps  | プロセスを見る  | -  |
| heroku run bash  | Heroku環境でbashを使用  | -  |