Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
17
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

@kodaii

静的サイト(HTML/CSSのみ)をherokuでデプロイする方法

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

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

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

1.composer.jsonを作る。

composer.jsonファイルを作成する。中身は{}のみ

composer.json
{}

2.index.phpを作る

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

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

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

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

ここまでの作業はHTML・CSSだけではアプリケーションとして認識されないようなので、
PHPアプリケーションとしてデプロイする準備。
色々調べてみるとrailsアプリケーションとしてもデプロイできそうだったが、
phpでのこの手順が一番簡単そうでした。

3 herokuでデプロイ

該当のアプリケーションで↓

ターミナル
$ heroku login

アプリを命名する↓

ターミナル
$ heroku create <アプリケーション名>

githubと、作成したレポジトリを紐付けたら
git remoteで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

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
17
Help us understand the problem. What are the problem?