6
6

More than 3 years have passed since last update.

あれやこれやしてても、たった3時間ぐらいで簡単なWEBアプリを作ってUnuboで公開できた話

Last updated at Posted at 2020-01-16

簡単なwebアプリを1から作って、3時間ぐらいで完全無料ホスティングUnuboで公開までたどりついた話をします。

お名前で取得した独自ドメインを設定して、HTML/CSS/JavaScriptを使ったスタティックな簡単なwebアプリを公開しました。

Unuboとは

スクリーンショット 2020-01-16 13.46.57.png

■ Unubo - Cloud deployments made easy

Unuboとは、Webアプリ、DB、ブログを完全無料でホスティングできるサービスです。更にクレカ登録不要です。(2019/1現在)完全無料のホスティングを探していて、ここあたりの情報がでてきました。

■ Node.js,Python,RubyなどのWebアプリを完全無料でホスティング可能な「Unubo」を使ってみた!
■ Unuboを使ってみた話

Unuboっていうのがあるんだ〜と知ったのが、この記事を書き始めてから、昼飯挟んで約5時間ぐらい前のことです(笑)

実際に使った感想は、めちゃくちゃ簡単!しかも無料!です。

やったこと

やったことは、webアプリ作成、Unuboでの公開設定と独自ドメイン設定です。

  • webアプリ作成とUnuboでの公開設定
  1. Unuboにサインイン
  2. webアプリをGitHubにPUSH
  3. GitHubとUnuboを連携
  4. デプロイ、そして公開!

Unuboは、webアプリをGithubにPUSHすると自動的にデプロイしてくれます!

  • 独自ドメイン設定
  1. お名前でドメイン取得
  2. お名前でDNS設定
  3. Unuboにドメインを設定

webアプリをGitHubにPUSH

GitHubの使い方は、ご存知かと思いますが、以下のサイトがわかりやすかったです。

今さら聞けない!GitHubの使い方【超初心者向け】

独自ドメイン設定方法

自身のアプリ管理画面のDomainsというところに独自ドメイン設定方法が書かれています。ドキュメント見てもここに書いてあるって書いてました。
スクリーンショット 2020-01-16 18.33.22.png

独自ドメインを取得した会社のDNSレコードに、Unuboの指定するアドレス登録した後、Unuboに独自ドメインを追加します。

まずは、お名前の管理画面から取得した独自ドメインのDNS設定をしました。

  1. DNS設定/転送設定を開きます
  2. DNSレコード設定を利用するの設定するボタンを押します。

スクリーンショット 2020-01-16 18.34.52.png

$ dig asia.unubo.app
asia.unubo.app. 34.87.61.225

CNAMEを使う場合は、Aレコードを追加しないといけないとのことなので、digで「asia.unubo.app」のIPアドレスを取得してAレコードに設定しました。AレコードとCNAMEレコードを次のように設定しました。

ホスト名 TYPE TTL VALUE
tateyomi.xyz A 3600 34.87.61.225
www.tateyomi.xyz cname 3600 asia.unubo.app

スクリーンショット 2020-01-16 18.35.21.png

DNSレコード設定用ネームサーバー変更確認にチェック入れて、確認画面へ進んで、設定完了。

※既存ドメインでは、設定によって既存サイトがみれなくなってしまったりもあるので、自己責任のもと、きちんと確認して設定ください。

独自ドメインがインターネットに反映されるまで待ちます。

反映されたであろう、しばらくしてから、UnuboのDomainsの②から無料SSLと一緒に独自ドメインを追加します。

スクリーンショット 2020-01-16 18.33.30.png

独自ドメインのDNS設定後、すぐにこれを設定するも、反映されていなかったのか一向に待っても無理でした。

独自ドメインのDNS設定したら、しばらく時間をあけて、この設定をしましょう!

設定終わってほっておくと、いとも簡単にUnubo上で独自ドメインでサイト開設!となりました。Unubo、ほんとちょっとしたwebアプリをすぐ公開したいときには、ほんと便利ですね!

ちなみに公開したWebアプリは?というと、これです。
TATEYOMITSUKURU 縦読み解読・作成アシストツール

ありがとうございました!

6
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
6