作ったWEBサービスやポートフォリオをエックスサーバーに公開する方法・手順

WEBサービスを作ってみたけど、どうやってエックスサーバー にのせたらいいんだろう・・・

今回はこんな悩みを持つ人向けの内容です。

プログラミングの勉強をしている人であれば、自分の作ったWEBサービスやポートフォリオをインターネット上に公開してみたいという人も多いのではないでしょうか?

しかし、レンタルサーバーのサイトを見てもその手順は書いていないので、初めてだとわからないという人もいますよね。

そこで、この記事ではあなたが作ったWEBサービスやポートフォリオをエックスサーバーで公開する方法について解説します。

MEMO

この記事ではエックスサーバーとの契約が完了していることを前提に紹介しています。まだ契約していない方は、先に契約を済ませてください。

▶︎ エックスサーバー公式

エックスサーバーへ公開するまでの手順

公開前の準備

サーバーへ公開する前にまず次の2点、準備しておく必要があります。

  1. 独自ドメインの取得
  2. ドメインの設定

1. 独自ドメインの取得

ドメインとは簡単に言ってしまうと、そのサイトの住所のことを指します。

例えば、このサイトでいうとURLにある「naoya-ono.com」がドメインに該当します。

その他の例として、アマゾンであれば「amazon.co.jp」、Facebookであれば「facebook.com」がドメインを指します。

レンタルサーバーは借り家みたいなものですが、まだ住所登録が住んでいないので誰もその家にアクセスすることができません。

そのため、アクセスできるようにするために住所の取得と登録、つまりドメインを取得し登録する必要があります。

ドメインの登録サービスは色々ありますが、エックスサーバーを使うのであれば「エックスドメイン」がおすすめです。

エックスドメインはエックスサーバーと同じ会社が運営しているので、後述するDNSの設定変更も不要になりますし、エックスサーバーの管理画面でサーバー情報とドメイン情報が一括で管理できるので、管理がしやすいです。

▶︎ エックスドメイン公式

ドメインの取得方法は公式サイトから登録したいドメインを検索して、登録するだけです。

ちなみに、値段は1年で1,000円程度とお手頃価格です。

注意

.xyzや.siteなどは値段は安く見えますが、1年後の更新費用は高いので、更新値段も確認した上でどのドメインにするか検討することをオススメします。

僕がよく使うのは.comや.netです。

2. ドメインの設定

ドメインの取得つまり住所の取得ができたら、借りた家(サーバー)と住所(ドメイン)を紐付けるための手続きが必要があります。

エックスサーバー側の設定

STEP1
ドメイン設定画面を開く

エックスサーバー の管理画面にログインしサーバーパネルを開いたら、画面右端にある「ドメイン設定」をクリックします。

STEP2
ドメインを設定

ドメイン設定画面が開いたら、まず画面上部にある「ドメイン設定追加」をクリックします。

すると、設定追加画面が開くので、こちらに取得したドメインを入力し、「確認画面へ進む」をクリックします。

僕のサイトの場合ですと、ドメイン名に「naoya-ono.com」を入力します。

MEMO

「無料独自SSLを利用する」と「高速化・アクセス数拡張機能を有効にする」はチェックを入れた状態で次に進んでください。

後は「登録しますか」みたいなメッセージが表示されるので、「登録する」をクリックすれば完了です。

尚、「ムームードメイン」や「お名前.com」などエックスドメイン以外のサイトでドメインを取得した場合はDNSの設定変更が必要になります。

この記事では「お名前.com」を例に挙げ、DNSの設定方法を紹介します。

お名前.comでのDNS設定変更手順

「エックスドメイン」でドメインを取得した場合、この作業は不要です。

STEP1
お名前.com Naviへログイン

お名前.comの管理画面である「お名前.com Navi」にログインします。IDやパスワードは契約情報を確認してください。

STEP2
ドメイン一覧を開く

ログインしたら画面左にある「ドメイン一覧」をクリックします。

手順3
STEP3

ドメイン一覧の中から、エックスサーバー で使うドメインを選択します。

STEP4

ドメインをクリックすると、画面の中に下のような「ネームサーバー情報」という項目があるので、「変更する」をクリックします。

STEP5
エックスサーバー のネームサーバーを設定する

変更画面が開いたら、まず「他のネームサーバーを利用」をクリックします。

 

すると、ネームサーバー設定画面が表示されるので、以下の内容で登録します。

 

1 プライマーネームサーバー ns1.xserver.jp( 219.94.200.246 )
2 セカンダリネームサーバー ns2.xserver.jp( 210.188.201.246 )
3 ns3.xserver.jp( 219.94.200.247 )
4 ns4.xserver.jp( 219.94.203.247 )
5 ns5.xserver.jp( 210.188.201.247 )

以上で、DNSの設定変更は完了です。

これで準備が整ったので、続いてポートフォリオやWEBサービスを公開するための方法を解説します。


自分で作ったポートフォリオを公開する

ここでいう「ポートフォリオ」とはhtmlとCSSで作られたLPや静的なページのことを指します(データベースは使わない)。

設定方法といっても、単純にサーバーに接続してファイルをアップロードするだけで完了します。

ファイルをアップロードするにはファイル転送ツールを使います。

ツールは色々あるので、好きな物を使ってもらえればいいと思いますが、僕の場合はシンプルで使いやすいと評判の「Cyberduck」を使っています。

そのため今回は「Cyberduck」を使った手順を紹介しています。

ポートフォリオの公開手順

STEP1
Cyberduckを使ってレンタルサーバーに接続

Cyberduckを開くと、左上に「新規接続」という項目があるので、こちらをクリックします。

 

すると、下のような画面が開くので、エックスサーバー の「サーバ」、「ユーザ名」、「パスワード」を入力し「接続」をクリックします。

これらの情報がわからないという人はエックスサーバー との契約情報を確認してください。

STEP2
ポートフォリオをアップロード

サーバーに接続できたら、フォルダ一覧の中に新しく取得したドメイン名のフォルダがあるはずなので、こちらをクリックします。

 

すると、その中に「public_html」というフォルダがあるのでこちらをクリックします。

 

最後に、このフォルダの中にあなたが作ったポートフォリオのファイルをアップロードします。

アップロードはドラッグ&ドロップでOKです。

以上で、アップロード完了です。

最後に、実際にURLを入力してあなたのポートフォリオが見れるかどうか確認しましょう!

自分で作ったWEBサービスを公開する

続いて、WEBサービスを公開する方法ですが、先ほどの「ポートフォリオを公開する方法」にDBの設定が追加されただけです。

 WEBサービスの公開手順

STEP1
データベースを作成

エックスサーバー にログインし「サーバーパネル」を開くと「データベース」という項目があるので、この中の「MySQL設定」をクリックします。

 

MySQL設定が開けたら、メニュータブにある「MySQL追加」をクリックし、新規で作りたいデータベース名を登録します。

 

これでデータベースの作成ができました。

STEP2
データベース接続ユーザーの作成

次にデータベースに接続するためのユーザーを作成します。

メニュータブにある「MySQLユーザー追加」をクリックし、データベースに接続するためのユーザーID、パスワードを登録します。

STEP3
データベースと接続ユーザーの紐付け

データベースに接続するためのユーザーが作成できたら、そのユーザーで新しく作ったデータベースに接続できるように紐付けを行います。

メニュータブにある「MySQL一覧」をクリックし、画面右「アクセス権未所有ユーザー」から新しく追加したユーザーIDを選択、「追加」をクリックします。

 

これで新規作成したユーザーIDでデータベースに接続できるようになります。

STEP4
テーブル作成

続いて、データベースに接続しテーブル作成を行います。

サーバーパネルの中にある「phpmyadmin」をクリックしましょう。

 

クリックすると認証画面が表示されるので、先ほど作ったユーザーのIDパスワードを入力し「ログイン」をクリックします。

 

phpMyAdminの画面が開けたら、開発のときと同じようにテーブルを作成します。

あとは、上の「ポートフォリオの公開手順」で紹介したようにサーバー上にプログラムファイルをアップロードすると作業は完了です。

全てのファイルがアップロードできたら、実際にURLを入力して画面がきちんと表示されるか確認しましょう。

注意

本番環境にファイルをアップロードする前にDBの接続情報の変更を忘れないでください。

開発環境と本番環境では異なります。

コメントを残す

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

CAPTCHA