その他

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

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

  • この記事を書いた人

コウダイ

文系・ノースキル・未経験・アラサー・地方住み・残業100時間超えの社畜ホテルマンから都内IT系上場企業のフルリモートWebエンジニアに転職した人。

都内IT系上場企業に勤務するWebエンジニア5年目｜プログラミングスクールのテックキャンプ公式アンバサダー｜新卒で手取り18万の地方ホテルマン6年→挫折→プログラミングを900時間勉強→転職活動100社以上応募→アラサー未経験から7ヶ月でフルリモートのWebエンジニアに転職し年収150万円UP｜34歳2児のパパ｜ブログ歴4年→月間6,000PV｜エンジニア転職ノウハウ、プログラミング、Web制作、副業での稼ぎ方など、「時間や場所に縛られずに稼ぐ」方法を発信しています。

-その他