Code Fan 49

中年で開発に目覚めたおじさんの技術ブログ。WordPress・Rails・Cloud9などなど。

cloud9からherokuに静的ページをuploadする。

はじめに

こどもの謎アート。

f:id:koyacch:20171204161633j:plain

はてなってMarkdown使えたんですね。 使う機会はほとんどないのですが、これはこれで勉強のためで使ってみます。

cloud9とheroku

開発環境としてのcloud9、プラットフォームとしてのheroku。 かの有名なRails Tutorial で初めて知りました。 使い方もこの記事での方法がベースとなってます。

railstutorial.jp

なんで静的ページアップすんの?

「テスト環境」が欲しかったから。

静的ページ制作であればDreamweaverで単純にFTPするんだけど、これだと

  • 開発環境(ローカルDreamweaver
  • テスト環境(なし!)
  • 本番環境(クライアントのサーバ)

となってしまい、事前のチェックが本番環境というよくないことになってしまう。 で、今は。

  • 開発環境(Dreamweaver or cloud9)
  • テスト環境(heroku)
  • 本番環境(クライアントのサーバ)

ということで、gitを軸に、herokuでテスト環境を作ったり、ローカルレポジトリからftpでクライアントのサーバにあげたりしています。

cloud9からherokuへ

  1. herokuでアプリを作成する。

cloud9からコマンド叩いてます。

heroku create

heroku create [your-name]とかして、サブドメイン名をつけてもいいのだけど、自動でつけられる適当なものでも、クライアントから文句が出たことはないです。

  1. ビルドパックを設定する。

herokuは作成するアプリケーションごとに適切なビルドパックの設定が必要です。 この工程が必要ない場合もあるけど、静的ページの場合はいります。

必要はパックはこちら。

GitHub - heroku/heroku-buildpack-static: Heroku buildpack for handling static sites and single page web apps

コマンドインストールなら

heroku buildpacks:set 'https://github.com/heroku/heroku-buildpack-static'

もしくは、herokuのコンパネから設定 Personal > [your-app] > Settings : Add Buildpackをクリック。

f:id:koyacch:20171204153355p:plain

  1. static.jsonを作成する。

最上位の階層に以下のコードを作成します。

{
  "clean_urls": true,
  "root": "./"
}

最低限はこれだけでいいと思います。 任意にhtmlディレクトリを置きたい場合は、rootの設定を、

"root": "[your-dir]/"

とすればいいです。 僕の場合、index.htmlを最上位階層とし、そのままFTPできる構造を保ちたかったので、

"root": "./"

としました。

  1. pushする。

コミット&レポジトリへのプッシュをし終えたら

git push heroku

で、herokuにプッシュ。

さいごに。

技術ブログというと誰も知らないような知見をアップしないといけない気がしてて遠慮があったのですが、とりあえず日常の作業から発見したことをちょろちょろ書いていきます。