プログラミング

Heroku 独自ドメインで公開の手順 / ムームードメイン, ロリポップ使用の場合

投稿日:

HerokuでいくつかNode.jsゲームを公開しています。そのままただ公開すると「https://アプリ名.herokuapp.com」というURLになりますが、収益化などを考えた場合は独自ドメインで公開できたほうが良さそうです。Herokuアプリを独自ドメインで公開する方法はWeb上に多数記事がありますが、数年前の記事だと現在とHerokuの仕様が異なっていたり、DNS設定はドメイン取得サービスによってやり方が異なるのでなかなかドンピシャの内容は見つかりませんでした。

そこで本記事では
 ・2022年4月
 ・Herokuアプリを独自ドメインのサブドメイン(www)で公開
 ・独自ドメインはムームードメインで取得、HPにはロリポップを使用している場合
 ・SSLは今回は行わない
の手順を記したいと思います。(要点のみですが)

私はプログラミングの知識はありますが、ネットワーク関係の知識はほぼありません。なのでDNS設定で少々苦労しました。。。

ロリポップにてムームーDNSへ移行

いきなり意味の分からない操作にぶちあたりました。ロリポップを利用して数年が経ちますが、そのまま利用しているとロリポップDNSとやらになっているようです。しかしこのままだとDNS設定をする上で都合が悪いらしいので「ムームーDNS」へ移行する必要があるらしいです。意味も分からず移行するのは非常に不安でしたが、web上で見つけた「ロリポップDNSを使うメリットはなく、ムームーDNSへの移行を勧める」という記事を信じて実行しました。

Herokuで独自ドメインの追加

Web上に多数の記事があるので実行は難しくないと思います。私は分かりやすいブラウザ上での操作で行いました。Dashboardからアプリを選択してSettingsタブをクリック。DomainsにてAdd domainをクリック。
ここで私はクレジットカード番号の入力を求められました。フリープランのままでもクレジットカードを登録するだけで独自ドメイン設定は可能になるようです。少々怖いですがMicrosoft AzureやGoogle App Engineでも必須ですので登録しました。
サブドメインで公開したいので「www.ooo」を入力しました。追加したらDNS Targetをメモしておきます。DNS Targetは後からいつでも参照できます。

ムームードメインにてDNSを設定

Web情報のほとんどが「お名前.com」の設定方法でムームードメインによる最近の記事は見つからず、少々苦労しました。
設定における手順、要点は
 ・ムームードメインにログインして、コントロールパネルTOPへ
 ・ドメインを選択
 ・ネームサーバ設定変更にてサービスが「ムームーDNS」である事を確認して「セットアップ」
  (DNS設定は下の「ネームサーバ設定変更」をクリックではないので注意)
 ・設定2にて以下を入力
    サブドメイン:www
    種別:CNAME
    内容:HerokuのDNS Target (ooo-ooo-ooo.herokudns.com)
 ・セットアップ情報変更をクリック

これでいけるはずです。しかし、設定が反映されるのに結構時間がかかるようです。サブドメインでアプリの起動を確認できたのは翌日になってからでした。私の場合、ムームーDNSへの移行からやったのでその影響もあったかもしれません。設定が間違っているのか設定反映時間の問題なのか分からなくなるので、24時間程度は放っておいたほうが良いかもしれません。。私はその日のうちにあれこれと設定をいじってはまりました。

内容にてDNS Targetを入力する場合ですが、ムームードメインでは末尾に「.」は不要なようです。試しに「.」を追加して入力してみましたがエラーメッセージが出ました。

DNS設定の確認方法

反映時間待ちなのかの確証を得るためにはDNS設定が正しくできているかを確認できれば良いわけです。Webにて便利なサービスをみつけました。

https://www.cman.jp/network/support/nslookup.html

このページにてDNS設定の確認ができます。ホスト名にサブドメインを入力して下部のnslookup実行をクリックします。結果にてCNAMEにHerokuのDNS Targetがでてくれば適切にDNS設定が行われていると考えられます。私はここでDNS Targetを確認できたので何もせずに翌日まで待つことにしました。

設定後、間もなくは不安定なことも

翌日になって一度、独自サブドメインアプリの起動を確認できたのですが、1時間後くらいにまたアクセスしてみたら起動できませんでした。結構不安になりましたが、別のPCやスマホ端末では起動できたので放っておきました。2日後には完全にアクセスできるようになりました。

-プログラミング

執筆者:

関連記事

How to use FFmpeg.wasm. What’s the Cross Origin Isoration?

Nowadays, I got the information that FFmpeg can be used with Javascript and I tried it immediately. …

no image

ショーモナイノ/ ソースコード(クライアントサイド)

サーバサイドのソースコードを公開したところ、結構ビュー数が伸びているようです。なのでクライアントサイドも公開しておきます。何かの役に立てればと思います。 内容はとんでもないジャンクコードとなっています …

サイトの仕様: ナビゲーションを解決する方法。Admobポリシーセンター広告制限

一年ほど前、突如としてAndroidアプリのAdmob広告に配信制限がかかりました。理由は「サイトの仕様: ナビゲーション」。これが厄介で、一体何を修正すべきなのかが全く分かりません。Web検索をかけ …

Javascript eye blink detection using face-api.js landmarks

With the development of face recognition technology, today it seems that eye blinking can be easily …

FFmpeg.wasm使い方: 動画をアップロードして音声を抽出する

FFmpeg.wasmの使い方の一例として、動画をアップロードしてその音声を抽出したmp3を出力してみます。処理が終わると音声が自動で再生されます。音声のプレイヤー上で右クリックするとファイルの保存選 …

スポンサーリンク