前回メリットをご紹介したHerokuですが、
www.wegirls.tech
ちょっとした静的ページを公開したい!でもそのためだけにサーバー借りてっていうのはちょっと・・・
というときにも使えます。
無料で、簡単にインターネット上で公開できるのです。ごいすー。
というわけで、Herokuで静的ページを公開する手順を書いていきます。
- まずはアカウントを準備
- githubから必要なソースコードをダウロードして設置する。
- ダウンロードしたファイルを設置します。
- 静的ページのファイル設置する。
- Herokuで、新規アプリとしてデプロイする。
- WEB上で公開されていることを確認する。
- 修正したいときは
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を別ディレクトリにおいて読み込むこともできます。
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のマイページに移動して、デプロイしたアプリが新規作成されていることを確認します。
アプリをクリックし、「Settings」から公開されているドメインを確認します。
確認したドメインにアクセスします。
おしまい!
修正したいときは
一度デプロイしたアプリを修正するには、``~/validationdemo/public/``以下でファイルを修正したあと、下記のコマンドで再度デプロイをします。
そうすると、公開中のアプリケーションが更新されます。
$ git add -A
$ git commit -a -m "validationdemoの修正"
$ git push heroku master
ちなみに、今回作成したのはこちらの静的ページ。
バリデーションdemo
下記の記事で紹介しているものなので、よかったら合わせてご覧ください。
www.wegirls.tech