女子WEBエンジニアのTechメモ

都内の某企業でPMやってます。営業→WEBエンジニア・オフショア開発立ち上げ→マーケ（SEO/広告運用）→PM。ちょっと便利だなと思ったことをメモしています。

トップ > Heroku > Herokuで静的ページを公開する

Herokuで静的ページを公開する

Heroku

前回メリットをご紹介したHerokuですが、
www.wegirls.tech

ちょっとした静的ページを公開したい！でもそのためだけにサーバー借りてっていうのはちょっと・・・
というときにも使えます。

無料で、簡単にインターネット上で公開できるのです。ごいすー。

というわけで、Herokuで静的ページを公開する手順を書いていきます。

まずはアカウントを準備

無料版でアカウント登録が終わっている状態とします。
まだアカウントを持っていない人はアカウントをさくっと作っておいてください。

www.heroku.com

githubから必要なソースコードをダウロードして設置する。

下記のURLから、まるっと全ファイルをzipでダウンロードします。
これが「静的ページを公開するために必要なファイル一式」です。

GitHub - nulltask/heroku-static-provider: Static site provider for Heroku.

ダウンロードしたファイルを設置します。

静的ページのファイルを置きたいところで、ダウンロードしたzipファイルを展開します。

Heroku上で公開されるページのディレクトリ構造とは関係ないので、どこで展開してもOKです。

＊下記コマンドを実行することでも、1&2のダウンロード＆設置ができます！

git clone https://github.com/nulltask/heroku-static-provider.git static-pages

展開した一番トップのファイルの名前 "heroku-static-provider-master" or "static-pages" を、作りたいアプリ・ページの名前にしておいてください。

ここでは、アプリの名前を「validationdemo」とします。

静的ページのファイル設置する。

``/validationdemo/public`` 以下に、公開したいファイルを置きます。
``/validationdemo/public/js`` など、CSSやJSを別ディレクトリにおいて読み込むこともできます。
f:id:bombomprin:20160824215155p:plain

public配下にはデフォルトでindex.htmlが設置されているので、このファイルを編集したり、追加したいファイルを設置します。

Herokuで、新規アプリとしてデプロイする。

ターミナルから、「validationdemo」のディレクトリトップにいる状態で、下記のコマンドを実行します。

$ heroku create validationdemo
$ git add -A
$ git commit -a -m "validationdemoの追加"
$ git push heroku master

git add でエラーになったひとは

$ git add -A
fatal: Not a git repository (or any of the parent directories): .git

こんなエラーになった人は、下記のコマンドを実行してみてください。

$ git init

git push heroku masterでエラーになった人は

$ git push heroku master
fatal: 'heroku' does not appear to be a git repository 
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

こんなエラーになった人は、
作成中のアプリのトップディレクトリ配下にある``.git/config``を開いて、
``[remote "origin"]``を``[remote "heroku"]``に変更してください。

他のユーザーがすでに利用しているアプリの名前は、利用することができません。

WEB上で公開されていることを確認する。

Herokuのマイページに移動して、デプロイしたアプリが新規作成されていることを確認します。
f:id:bombomprin:20160824215258p:plain
アプリをクリックし、「Settings」から公開されているドメインを確認します。
f:id:bombomprin:20160824215309p:plain

確認したドメインにアクセスします。


おしまい！

修正したいときは

一度デプロイしたアプリを修正するには、``~/validationdemo/public/``以下でファイルを修正したあと、下記のコマンドで再度デプロイをします。

そうすると、公開中のアプリケーションが更新されます。

$ git add -A
$ git commit -a -m "validationdemoの修正"
$ git push heroku master


ちなみに、今回作成したのはこちらの静的ページ。
バリデーションdemo
下記の記事で紹介しているものなので、よかったら合わせてご覧ください。
www.wegirls.tech