Casual Developers Note

初級・中級のエンジニアやデザイナー向けに技術情報と英語学習情報を提供中。エンジニアもデザイナーも技術と英語を身に着けて海外に飛び立とう!

  • ホーム
  • 技術 Tips & Tutorials
  • 技術塾
  • ライフハック
  • 海外留学
  • 英語学習
  • コラム
  • お問い合わせ
You are here: Home / 技術 Tips & Tutorials / Herokuアプリに独自ドメインを設定する方法

2018年5月25日 By Keid Leave a Comment

Herokuアプリに独自ドメインを設定する方法

Herokuアプリに独自ドメインを設定する方法

アプリケーションを作り、それを公開するには独自ドメインの設定は必須です。今回はHeroku上で作ったアプリケーションに独自ドメインを設定する方法を紹介します。

見出し

  • 1 はじめに
  • 2 Herokuアプリに独自ドメインを設定する手順
    • 2.1 独自ドメインを購入する
    • 2.2 Herokuにドメインを設定する
    • 2.3 DNSサーバーのドメイン設定を変更する
    • 2.4 ドメインの設定を確認する
  • 3 最後に
    • 3.1 関連記事

はじめに

Herokuにアプリケーションをデプロイしたら、公開するためには独自ドメインを設定する必要があります。Herokuでは独自ドメインの設定自体無料で行えるので、無料枠の範囲で行なえます。それでは方法を見ていきましょう。

Herokuアプリに独自ドメインを設定する手順

独自ドメインを購入する

お名前ドットコムでもムームードメインでもどこでも良いので、まずは独自ドメインを購入しましょう。だいたい年間1200円くらいです。余談ですが、もしドメイン購入が初めてなら、複数年契約はしない方が良いです。DNS会社はドメイン名が間違っていた時に変更に応じてくれないので、複数年契約すると間違った時にお金が無駄になります。私も1回複数年契約したドメインに一文字誤りがあり、DNS会社に問い合わせても無理ですの一点張りで終わった悲しい経験があります。

Herokuにドメインを設定する

それでは、自分のHerokuアプリのディレクトリに移動し、heroku domainsコマンドでドメインを設定していきましょう。今回は「yourdomain.com」という独自ドメインを購入した前提で、「www.yourdomain.com」というサブドメインを設定していきます。

$ cd your-herokuapp
$ heroku domains
=== your-herokuapp-xxxxx Heroku Domain
your-herokuapp-xxxxx.herokuapp.com
$ heroku domains:add www.yourdomain.com
Adding www.yourdomain.com to ⬢ your-herokuapp-xxxxx... done
...
$ heroku domains
=== your-herokuapp-xxxxx Heroku Domain
your-herokuapp-xxxxx.herokuapp.com

=== your-herokuapp-xxxxx Custom Domains
Domain Name          DNS Record Type  DNS Target
───────────────────  ───────────────  ─────────────────────────────────
www.yourdomain.com  CNAME            www.yourdomain.com.herokudns.com

これでHerokuの設定は完了です。一応、詳しくはHerokuの公式サイトを確認して下さい。

DNSサーバーのドメイン設定を変更する

DNSサーバーには以下の情報を設定する必要があります。それぞれの設定値は先程Herokuに設定したものです。

  • サブドメイン名: www
  • 種別: CNAME
  • 内容: www.yourdomain.com.herokudns.com

一例として、ムームードメインの場合は以下にように設定します。今回はデフォルトの「ムームーDNS」をDNSサーバーとして設定している前提で説明します。

ムームードメインにログインし、「ドメイン管理 -> ムームーDNS」を選択します。

Mumu panel

「設定1」は無視して、「設定2」に先程の設定値を入力し、「セットアップ情報変更」をクリックすれば完了です。

Mumu custom dns

2日以上待って反映されていない場合は、とりあえずDNS会社に問い合わせてみるとよいでしょう。

ドメインの設定を確認する

hostコマンドで独自ドメインが正しく設定されていることを確認します。

$ host www.yourdomain.com
www.yourdomain.com is an alias for www.yourdomain.com.herokudns.com.
www.yourdomain.com.herokudns.com has address XXX.XXX.XXX.XXX
www.yourdomain.com.herokudns.com has address XXX.XXX.XXX.XXX
www.yourdomain.com.herokudns.com has address XXX.XXX.XXX.XXX
www.yourdomain.com.herokudns.com has address XXX.XXX.XXX.XXX
www.yourdomain.com.herokudns.com has address XXX.XXX.XXX.XXX
www.yourdomain.com.herokudns.com has address XXX.XXX.XXX.XXX
www.yourdomain.com.herokudns.com has address XXX.XXX.XXX.XXX
www.yourdomain.com.herokudns.com has address XXX.XXX.XXX.XXX

複数のIPアドレスが割り当てられている事が確認できます。

この後で、ブラウザで「www.yourdomain.com」を開くと、自分のHerokuアプリが独自ドメインで表示されます。

最後に

いかがでしたか?せっかくHerokuにアプリをデプロイしたのであれば、独自ドメインの設定までして公開してみましょう。では。

The following two tabs change content below.
  • この記事を書いた人
  • 最新の記事
Keid
Twitter のプロフィール

Keid

自由で楽しい世界を目指すフルスタックWebデベロッパー。 大学でコンピュータサイエンスを真面目に学び、日本の大手IT企業に就職後、新しい技術やスケールするビジネスが北米にある事に気づき、海外への挑戦を決意。全く英語ができなかっため、フィリピン留学およびカナダ留学を経て強制的に英語を上達させた。挑戦に終わりはない。このブログでは海外に挑戦したいエンジニアやデザイナーに少しでも有益な情報を提供していきたいと思う。
Keid
Twitter のプロフィール

最新記事 by Keid (全て見る)

  • 2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介 - 2020年1月13日
  • 今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~ - 2019年11月4日
  • ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~ - 2019年10月30日

関連記事

  • [tips][Tumblr] Tumblrでソースコードをシンタックスハイライトする方法

    プログラマがTumblrをメインのブログにした時に困るのは、シンタックスハイライトです。私はめんどくさがりなので、シンタ…

  • [tips][Perl] OLEを使ってPerlからOutlookのメールを送信する方法

    WindowsにはOLEオートメーションというWindowsのアプリケーションにアクセスするインターフェースがあります。…

  • Herokuのデプロイ先をステージング環境と商用環境で分ける方法

    何か作ったアプリケーションをデプロイするにはHerokuは非常にお手軽なデプロイ環境です。今回は、Herokuにデプロイ…

  • Amazon EC2インスタンスにSSHできなくなった時の対処法

    あれ?再起動したらEC2インスタンスにSSHできないぞ?今までSSHできていたのになぜだ?AWSでEC2インスタンスを作…

  • ChatfuelでFacebookメッセンジャーを使うChatbot簡単入門

    AIの流行りと共に人気が出ているChatbotですが、最近ではサービスを使って簡単に作れるようになりました。今回はCha…

カテゴリ : 技術 Tips & Tutorials タグ : domain, heroku

コメントを残す コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

技術力と英語力を向上させて
あたなを次のステージへ引き上げるための無料メルマガ

Sponsored Links

About Author

Keid

自由で楽しい世界を目指すフルスタックWebデベロッパー。 大学でコンピュータサイエンスを真面目に学び、日本の大手IT企業に就職後、新しい技術やスケールするビジネスが北米にある事に気づき、海外への挑戦を決意。全く英語ができなかっため、フィリピン留学およびカナダ留学を経て強制的に英語を上達させた。挑戦に終わりはない。このブログでは海外に挑戦したいエンジニアやデザイナーに少しでも有益な情報を提供していきたいと思う。

https://casualdevelopers.com/

最近の投稿

  • 2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介

    2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介

    2020年1月13日
  • 今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~

    今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~

    2019年11月4日
  • ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~

    ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~

    2019年10月30日
  • BashからZshに移行する方法(Mac編)

    BashからZshに移行する方法(Mac編)

    2019年10月21日
  • Create React Appを使わないでゼロからReactの開発環境を構築する方法(Webpack/Docker編)

    Create React Appを使わないでゼロからReactの開発環境を構築する方法(Webpack/Docker編)

    2019年9月30日

カテゴリ

  • 技術 Tips & Tutorials (100)
  • 技術塾 (6)
  • ライフハック (26)
  • 海外留学 (12)
  • 英語学習 (3)
  • コラム (6)

アーカイブ

最高の学習のために

人気記事ランキング

  • Jupyter Notebookで「The kernel appears to have died. It will restart automatically.」というエラーが出た場合の原因と対処法
    Jupyter Notebookで「The kernel appears to have died. It will restart automatically.」というエラーが出た場合の原因と対処法
  • MySQLで「ERROR 2003 (HY000): Can't connect to MySQL server」と怒られた時の対処法
    MySQLで「ERROR 2003 (HY000): Can't connect to MySQL server」と怒られた時の対処法
  • SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法
    SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法
  • Herokuの無料dynoをスリープさせないで24時間稼働させる4つの方法
    Herokuの無料dynoをスリープさせないで24時間稼働させる4つの方法
  • AWS ECRとECSの入門(EC2編) ~ ECSのEC2版を使ってReactのDockerアプリケーションをAWS上で稼働させる方法 ~
    AWS ECRとECSの入門(EC2編) ~ ECSのEC2版を使ってReactのDockerアプリケーションをAWS上で稼働させる方法 ~
  • PythonのためのVisual Studio Codeの設定方法
    PythonのためのVisual Studio Codeの設定方法
  • Go言語のためのVisual Studio Codeの設定方法
    Go言語のためのVisual Studio Codeの設定方法
  • Expressで「Cannot set headers after they are sent to the client」と怒られた時の対処法
    Expressで「Cannot set headers after they are sent to the client」と怒られた時の対処法
  • NodeJSの基本の3つのデバッグ方法
    NodeJSの基本の3つのデバッグ方法
  • データサイエンスのためのAnaconda環境構築とTensorflowのインストール方法(Docker編)
    データサイエンスのためのAnaconda環境構築とTensorflowのインストール方法(Docker編)

Bitcoin寄付 / BTC Donation

Bitcoinを寄付しよう

BTC
Select Payment Method
Personal Info

Donation Total: BTC 0.0010

このブログの運営のためにBitcoinでの寄付を募集しています。お気持ち程度の寄付を頂けると管理者の励みになります。

Bitcoin寄付について知りたい方はこちらの記事へ

The following two tabs change content below.
  • この記事を書いた人
  • 最新の記事
Keid
Twitter のプロフィール

Keid

自由で楽しい世界を目指すフルスタックWebデベロッパー。 大学でコンピュータサイエンスを真面目に学び、日本の大手IT企業に就職後、新しい技術やスケールするビジネスが北米にある事に気づき、海外への挑戦を決意。全く英語ができなかっため、フィリピン留学およびカナダ留学を経て強制的に英語を上達させた。挑戦に終わりはない。このブログでは海外に挑戦したいエンジニアやデザイナーに少しでも有益な情報を提供していきたいと思う。
Keid
Twitter のプロフィール

最新記事 by Keid (全て見る)

  • 2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介 - 2020年1月13日
  • 今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~ - 2019年11月4日
  • ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~ - 2019年10月30日

関連記事

  • [tips][Tumblr] Tumblrでソースコードをシンタックスハイライトする方法

    プログラマがTumblrをメインのブログにした時に困るのは、シンタックスハイライトです。私はめんどくさがりなので、シンタ…

  • [tips][Perl] OLEを使ってPerlからOutlookのメールを送信する方法

    WindowsにはOLEオートメーションというWindowsのアプリケーションにアクセスするインターフェースがあります。…

  • Herokuのデプロイ先をステージング環境と商用環境で分ける方法

    何か作ったアプリケーションをデプロイするにはHerokuは非常にお手軽なデプロイ環境です。今回は、Herokuにデプロイ…

  • Amazon EC2インスタンスにSSHできなくなった時の対処法

    あれ?再起動したらEC2インスタンスにSSHできないぞ?今までSSHできていたのになぜだ?AWSでEC2インスタンスを作…

  • ChatfuelでFacebookメッセンジャーを使うChatbot簡単入門

    AIの流行りと共に人気が出ているChatbotですが、最近ではサービスを使って簡単に作れるようになりました。今回はCha…

ビットコイン取引ならここ

  • ホーム
  • 技術 Tips & Tutorials
  • 技術塾
  • ライフハック
  • 海外留学
  • 英語学習
  • コラム
  • サイトマップ
  • タグ一覧
  • プライバシーポリシー
  • お問い合わせ

Copyright © 2021 Keid - Casual Developers Notes