たなしょのメモ

日々勉強していることをつらつらと

ランディングページを作る編その3

GitHubで新リポジトリを作成する。

ひとまずHerokuにアップする前にバージョン管理をしておきましょう。

(なぜ一番はじめにやらなかったのかって?忘れてました汗)

あまりこのブログでは詳しくは説明しませんが、新しいディレクトリを作成しました。

f:id:bonashochang:20181111035315p:plain

ディレクトリを作成したら続いてターミナルでコミットしてみます。

基本手順通りなので詳細は割愛します。

gitコマンドをぽちぽちしてGitHubをもう一度みてみると

f:id:bonashochang:20181111040326p:plain

ちゃんとコミットされてましたー。まず第一段階は終わりです。

 

Herokuを使ってみる

ではHerokuにdeployするためにHerokuアカウントを作ってみましょう。

jp.heroku.com

Herokuは便利なPassです。エンジニアのみなさんもアプリケーション等作成した場合よく利用されています。

(本当はAWSを設定して乗っけたかったのですが早く公開したいという気持ちが強かったので今回はHeroku使用します。時間あるときにでもAWSで公開使用かなと思います^^;)

Herokuに会員登録して新アプリケーションを作成します。

f:id:bonashochang:20181111042139p:plain

このような画面が出てくれば成功です。

 

GitHubと連携してみる

続いてGitHubに連携してみましょう。

GitHubに連携しておくとGitHubにソースをpushした際に一緒にHerokuにもpushしてくれるのでとても便利です。

やり方としては、前出の画面の「Deployment method」欄のGitHubコマンドをクリックします。

f:id:bonashochang:20181111043041p:plain

上図の画面が出てくると思うので「Connect to GitHub」のリポジトリネーム欄に先ほど作成したGitHubリポジトリの名前を記載します。

入力後「Search」ボタンを押すとディレクトリが検索されディレクトリが表示されます。

f:id:bonashochang:20181111043434p:plain

その後「Connect」を押すとGitHubとの連携完了です。

これでHerokuへのdeployが簡単になりました。

Herokuへdeployしてみる

初回はターミナルでgitを活用してアップロードしてみます。

その前にHerokuのDashboardに移動しsettingsをクリックします。

settingsのBuildpacks欄にAdd buildpackをクリック。

その後、URLを入力する場所があるのでそこに下記URLを入力します。

https://github.com/heroku/heroku-buildpack-static.git

 また、index.htmlが置かれているディレクトリと同じディレクトリにstatic.jsonというファイルを作成します。

static.jsonのファイルの中身は下記です。

{"root":"public"}

 作成後gitコマンドでherokuにdeployし成功すればOKです。

ここまでやってもHerokuにはアップできなかったです。。。

どうもログをみるとgetでは取りに行ってるみたいなのだが、そこから先認証されないみたいで結局今日はここで断念。ひとまずgithubにはあげて公開できる体制はできたのでしばらくはこれを正規のドメインとしよう。