コーディングのお勉強

これを読めば分かる!Webサイトの公開方法

webサイトの公開方法

今回はWebサイトの公開方法について説明していきます。


作ったWebサイトをサーバーにアップロードするときに、どこにどのファイルを入れたらいいのか、サーバーにアップロードできたと思ったら次はWebサイトをどこから開けばいいのか分からず迷走しました。

これからWebサイトをアップロードする皆さまが迷わないようしっかり説明していきますので、よろしければ最後までご覧ください!

レンタルサーバーはXサーバー、FTPソフトはサイバーダックを使って説明します。使っているサーバーやFTPソフトが違う場合は他のサイトの方が詳しいと思うので、参考程度に見てもらえれば嬉しいです。

こんな悩みを持つ方に読んで欲しい

  • Webサイトを作ったはいいけど、公開する方法が分からない
  • Webサイトを公開するのに必要なものが知りたい
  • Xサーバーとサイバーダックを使ってWebサイトをアップロードしたい

Webサイト公開の流れ

Webサイトの公開の流れとしては、以下の4ステップです。

  1. レンタルサーバー契約
  2. ドメイン取得
  3. Webサイト作成
  4. 作成したWebサイトの公開 ←今回はココ

今回は4つめの「作成したWebサイトの公開」について詳しく説明していきたいと思います。

Webサイトを公開するために必要なもの

Webサイトを公開するために必要なものは、以下の4つです。

  • Webサイト
  • レンタルサーバー
  • ドメイン
  • FTPソフト

Webサイト

これを忘れることはないと思いますが、念のため…。

レンタルサーバー

Xサーバーを使用しています。

Xサーバーを選んだ理由は、以下です。

  • Webサイトの表示速度が速い
  • 無料独自SSLを使える
  • 自動バックアップ機能がついている
  • 24時間365日の手厚いサポートがある
  • 大量アクセスがあっても落ちない
  • データの容量が多い

ドメイン

ドメインはWebサイト1つにつき、1つ必要です。

ドメインを複数作る方法は以下の2つです。

  • 新たにドメインを取得する
  • サブドメインを作る ←コチラがオススメ!

私はサブドメインを作る方法をオススメします!

新たにドメインを取得するとまた新たに料金がかかりますが、サブドメインはいくつ作っても料金がかからないからです。

FTPソフト

Webサイトのファイルをサーバーに転送するために使用します。

サイバーダックを使用しています。

サイバーダックを使っている理由は、見た目がシンプルで扱いやすいと思ったのと、Macでの定番ソフトだからです。

無料で使える定番ソフトは以下の通りです。

  • FileZilla(windows・Mac)
  • FFFTP(windows)
  • サイバーダック(Mac)

サイバーダックを使用してWebサイトをサーバーにアップロードする方法

  1. 新規接続
  2. サイバーダックを起動したら、はじめにサーバーと接続する必要があります。

    新規接続と書いてあるボタンが上の方にあるので押すと、FTP情報を入力するボックスが出てきます。

  3. FTP情報入力
  4. サイバーダック説明
    サイバーダック説明

    一番上FTP-SSLにします。

    初期状態では「FTP(ファイル転送プロトコル)」になっているので、右側の赤い三角のところで選択してください。
    サーバ、ユーザー名2枚目の画像の「FTPサーバー(ホスト)名、ユーザー名(アカウント名)」をそれぞれ入力してください。


    2枚目の画像のページには、「xサーバーパネルにログイン→FTP→サブFTPアカウント設定→FTPソフト設定」の順で開くとたどり着けます。

    「初期FTPアカウントの設定内容」と「サブFTPアカウントの設定内容」の2種類ありますが、上の「初期FTPアカウントの設定内容」で大丈夫です。
    パスワードXサーバーパネルにログインするときのパスワードを入力します。
    Anonymousログインチェックがついていたら外します。
    キーチェーンに追加するチェックしてください。
  5. 接続
  6. サーバーとの接続が終わると、サーバーの中身が表示される。

    その中に独自ドメインのフォルダがあるのを確認する。

    サイバーダック説明
    私の独自ドメインは一番上の「kou-rin.com」なので、サーバーとの接続に成功していることになります。

  7. ドメインのフォルダにhtmlなどのファイルを格納
  8. 下の画像は、独自ドメインのフォルダの中身です。

    サイバーダック説明
    「piblic_html」があるのを確認してください。

    下の画像は、public_htmlフォルダの中身です。

    サイバーダック説明
    この中にhtmlファイルやcssフォルダを入れます。

    サーバーにアップロードしたいWebサイトが複数あって、サブドメインを作ると、上の画像のように「public_html」の中にサブドメインの名前のついたフォルダが表示されます。

    例えば私だと、「corporate」と「shopping」です。実際にhtmlファイルやcssフォルダを入れたものが下の画像です。

    サイバーダック説明
    私は自分のパソコンの中では、個別にフォルダを作ってその中にhtmlファイルやcssフォルダ、imageフォルダなどを格納しています。

    しかし、サイバーダックのドメインフォルダの中に入れるものは、htmlファイルやcssフォルダなどWebサイトを直接構成している(これがあるからWebサイトを表示できている)ものだけを入れてください。

サーバーにアップロードしたあとのWebサイトの開き方

  1. サーバーパネルにログイン
  2. ドメイン
  3. サーバーパネルにログインすると、下の画像のような画面が出てきます。

    その中から「ドメイン」を見つけます。ドメインを見つけたら、その中に「ドメイン設定」というのがあるのでそれをクリックしてください。
    Webサイト開き方

  4. SSL設定一覧
  5. ドメイン設定をクリックしたら、下の画像のような「ドメイン選択画面」が表示されます。

    その中に独自ドメインの表示があるので、右側の「選択する」ボタンを押します。
    Webサイト開き方

  6. SSL用アドレス
  7. 「選択する」を押すと、下の画像のような「SSL設定」の画面が表示されます。

    「SSL設定一覧」の中にWebサイトを開くためのアドレスがあります。

    サイバーダックでどのフォルダにファイルを入れたのか確認し、SSL用アドレスのアドレスからWebサイトを開きます。

    Webサイト開き方

まとめ

Webサイトを公開するには、

  1. Webサイトを公開するときに必要なものを用意する
  2. FTPソフトを使ってWebサイトをサーバーにアップロードする
  3. Webサイトの開き方を知る

です。