- 自作サイト・ゲームをインターネットに公開したい
- WordPressでサイト運営していて、サブディレクトリに自作ゲームなどを公開したい
JavascriptでゲームやWebサービスを作ったんだけど、インターネットに公開する方法が分からない…。複数のサービスをひとつのドメインで管理する方法とかあれば教えてほしい。
自作したWebサイトやサービスを公開するにはいくつかの方法がありますが、広告などを貼って収益化もできるようにするには、自分でレンタルサーバー・独自ドメインを契約して、そこにサービスを置くのが一番いいです。
本記事では、実際に私が自作したWebページ（yuushablog.info/shogiban）を公開するまでの手順を紹介します。また、複数のサービスを公開したい人は、1サービスにつき1ドメイン使用するのもいいですが、固定費がかかりすぎてしまいます。そこで、1つのドメインを再利用してサブディレクトリにサービスを公開していく方法についても解説するので参考にしてください。
準備するもの
- htmlやcss,jsなどをまとめたフォルダ
- サーバー
- ドメイン
- FTPソフト
自分でサーバーを立ち上げたり、クラウドサーバーを使うのもいいですが、敷居やコストが高すぎるので、この記事ではレンタルサーバーを使用します。(私のこのブログもレンタルサーバーを使っています)
おすすめレンタルサーバー
有名なレンタサーバはいくつかありますが、本記事では次の2つをおすすめします。
| レンタルサーバ | 料金 | 特徴 |
| mixhost | 月900円くらい | 12ヶ月以上契約で独自ドメインが1つ永久無料で貰える。サーバーの速度＆安定感抜群 |
| ロリポップ | 月550円くらい | コストがとにかく安い。ハイスピードプラン12か月以上の契約で独自ドメイン1つがずっと無料 |
小規模のサービスならロリポップが良いと思います。筆者はmixhostを使っていますので、説明はmixhost向けになります。mixhostの契約方法は下記の記事でも書いたので参考にしてみてください。
どちらもWordpressを簡単にインストールできるサービスがあるので、ブログの運営もしていきたい方はWordpressをインストールしましょう。
独自ドメイン
独自ドメインとは私のサイトでいう『yuushablog.info』のことです。名前は後から変えられないので慎重に決めましょう。
mixhostやロリポップ(ハイスピードプラン)の方は契約時に無料で貰えるので上記の記事を参考にしてください。
それ以外のレンタサーバーの方は『お名前.com』というサイトでドメインを契約しましょう。最初の1年間は無料だった気がします。.comや.infoなどありますが、お好きなので大丈夫です。
FTPソフト
FTPソフトは自作したゲームをレンタルサーバーに転送するのに使用します。本記事では無料で使える『FileZilla』で解説していきますが、他のFTPソフトでもやり方は同じだと思うので好きなFTPソフトを検索してお選びください。
フォルダに公開するものをまとめおきましょう
サブディレクトリに公開する場合、公開するもの（html,imgフォルダ,jsなど）を一つのフォルダにまとめておいてください。(フォルダ名はyuushablog.info/○○○○ で表示したい半角英数字にしてください) 重要 メインのhtmlの名前は「index.html」にしてください。
FTPソフトを使用して自作webサービスを公開しよう
上記を準備できたら、FTPソフトを使って自作ページを公開しましょう。FTPソフトとレンタサーバを連動させるために以下のモノが必要です。
- 準備するものホスト名(私の場合はyuushablog.info)
- FTPユーザー名
- パスワード
mixhostだと登録しているメアドに『【mixhost】 サーバーアカウント設定完了のお知らせメール』というのが届いているのでそこで確認できます。
ロリポップの場合は、ユーザー専用ページのユーザー設定→アカウント情報の順に進んでいただき、「FTPS サーバー」「FTP・WebDAVアカウント」「FTP・WebDAVパスワード」を控えておいてください。
- FileZillaを起動したらメニューバーの左端にある『ファイル(F)』を選択
- 『サイトマネージャー(S)』をクリック
- 『新しいサイト』をクリックし、ホスト(H),ユーザー(U),パスワード(W)にメモしておいた文字列を入力し、右下にある『接続(C)』をクリック
- すると以下のような画面になります。wordpressなどを入れていない場合、おそらく右側は空っぽのはずです。
- ローカル側(左)からサーバ側(右)にhtmlやjsファイルが入ってるフォルダをドラッグ&ドロップします。(今回は「shogiban」フォルダ)
これで『yuushablog.info/shogiban』を検索してみると、アクセスできています↓
サブディレクトリではなくyuushablog.infoを検索したときに、サービスが表示されるようにしたい場合は、フォルダの中身をだけを右側に移すだけです。
FileZillaを安全に閉じるには、最後にメニューバーの下にある×アイコンを押してサーバーから接続を切って閉じます↓
やり方は以上です。
良いサービスの場合、放っておけば2～3か月で検索結果の上位に出てきたりします。
次はサイトをSSL化(http→https)したくなるかと思いますが、それもFileZillaを使うので、「レンタルサーバー名 SSL化」と検索してみてください。
コメント