その他

HTML・CSSのみで作られた静的サイトをherokuでデプロイする方法

HTML/CSSのみでサイト模写したものをherokuでデプロイする方法をまとめています。

これまで Ruby on Railsでの簡単なWEBアプリケーションのデプロイ経験がありましたが、HTML/CSSのみの模写サイトのデプロイの仕方が分からずに苦労しました。

静的サイト（HTML/CSS）のデプロイの仕方がまとめられているものが少なかったので、以下に備忘録として手順をまとめてみました。

①：composer.jsonを作る。

以下のようにcomposer.jsonファイルを作成します。中身は{}のみ。

{}

②：index.phpを作る

index.phpファイルを作成する。中身は↓

<?php include_once("index.html"); ?>

ここまでのディレクトリ階層

app
 ├ index.html
 ├ style.css
 ├ composer.json
 └ index.php

ここまでの作業はPHPアプリケーションとしてデプロイする準備です。

HTML・CSSだけではアプリケーションとして認識されないようなので、この工程が必要になります。

色々調べてみるとrailsアプリケーションとしてデプロイするやり方もありそうでしたが、PHPアプリケーションとしてデプロイするこのやり方が一番簡単そうでした。

③：herokuでデプロイ

該当のアプリケーションで、以下コマンドを実行↓

$ heroku login

アプリを命名する↓

$ heroku create <アプリケーション名>

githubと作成したレポジトリを紐付けたら、以下コマンドでherokuが含まれているか確認↓

$ git remote
heroku
origin

リモートに、命名したアプリケーションのディレクトリを設定する↓

$ git remote add heroku https://git.heroku.com/<アプリケーション名>.git
$ vim .git/config

上記コマンドを実行し、

  • [remote "origin"]のurlに、githubの該当リポジトリが当てはまっていればOK
  • [remote "heroku"]のurlに、先ほど命名したアプリケーションのurl（https://git.heroku.com/.git）が入っていればOK

または、下記のコマンドでherokuとgithubのレポジトリが一致していればOK

$ git remote -v
heroku	https://git.heroku.com/<アプリケーション名>.git (fetch)
heroku	https://git.heroku.com/<アプリケーション名>.git (push)
origin	https://github.com/hoge/<gitのアプリケーション名>.git (fetch)
origin	https://github.com/hoge/<gitのアプリケーション名>.git (push)

これでpushする↓

$ git push heroku master

以上で、実際に起動すれば完了。

  • この記事を書いた人

コウダイ

都内のWeb系自社開発企業に勤務するエンジニア｜33歳1児のパパ｜ブログ歴4年→月間6,000PV｜新卒で手取り18万のホテルマン6年→プログラミングを900時間勉強→100社以上応募しアラサー未経験から7ヶ月でフルリモートのWEB系自社開発エンジニアに転職し年収100万円UP｜【人生を自由に、ノンストレスで生きる】をテーマに、30歳で文系・異業種未経験からITエンジニアに転職したノウハウの他、プログラミングやブログで稼ぐ方法など、「時間や場所に縛られずに稼ぐ」方法を発信しています。

-その他