エックスサーバーにWebサイト・ポートフォリオを公開する方法を紹介！

そんな疑問を解消するためにこの記事ではエックスサーバーでの公開方法を書いていきます。

作成したポートフォリオをインターネットで公開するために何を使ったらいいのか迷いますよね。色々選択肢はあるけど、今回はレンタルサーバーのエックスサーバーで作成したポートフォリオを公開するっっていうことをやっていきたい。

 公開するアプリケーションの種類

それぞれ詳細の関連記事を載せているから見てみてね

ポートフォリオの種類としてHTML・CSS・JavaScriptのみの静的なWebサイト、DB接続まで行うアプリケーションなどがあると思うけどそれぞれどんな感じでできるのか、やっていこう。

Webサイト・ポートフォリオを公開する流れ

公開する流れとしては大まかにこんな流れです。

公開までの手順は公開したいWebサイトが何の言語やフレームワークに作られているかにもよるけど、大まかな流れは同じです。それぞれ見ていきましょう。

エックスサーバーと契約する

エックスサーバーに公開するといってもエックスサーバーと契約して使えるようにしなくてはいけないのでまずは契約です。10日間無料で使うことができるから、お試しで使って良い感じだったら契約を続ければいいでしょう。

プランは3つあるけど、一番安いスタンダードプランで十分すぎます。

申し込み画面のことについてちょっと書くと、WordPressクイックスタートっていうのは、ワードプレスをエックスサーバーですぐに使えるようにしてくれるものです。

ワードプレスを使いたい人は検討してもいいけど、ワードプレス使わない人は利用しなくていいと思います（使わなくてもワードプレスインストールできる）後でワードプレスのことを書くときにこの辺り書きますね。

それとクイックスタート使っちゃうと10日間の無料お試し期間なくなるのでそこは注意。

申し込む際に色々必要事項を入力して、契約しよう。

サイトを公開する独自ドメインを取得する

サイトの○○.comとか○○.netとかだね

エックスサーバーを契約すると自動でサーバーIDが割り振られたドメインが与えられるけど、自分の好きなドメインでポートフォリオを公開したい場合、ドメインを取得する必要がある。

ちなみに割り振られたドメインっていうのは[サーバーID.xsrv.jp]っていう風なもの。

[サーバーID.xsrv.jp]っていうURLでポートフォリオを公開してもいいなら独自ドメインは取得する必要はないけど、ポートフォリオなら独自ドメイン欲しいですよね。取得しましょう。

エックスサーバー新規契約の場合は無料でもらえるドメインを使おう

レンタルサーバーによっては独自ドメイン永久無料特典っていうドメインをサーバー契約すると無料で取得できたりするから、レンタルサーバーを先に契約してドメインをできたらそこで一緒に取得してしまいましょう。そしたら、別途ドメインを取得する必要はありません。

「ドメインプレゼントキャンペーン」実施期間中にサーバーのお申し込みを行われたお客様に、独自ドメイン（.com / .net / .org / .info / .biz　/ .blog のいずれか一つ）を無料で提供いたします。
なお、独自ドメイン永久無料特典（キャンペーン特典）は新規取得・移管申請に対応しています。

独自ドメイン永久無料特典（キャンペーン特典）について

無料で使うことができるなら良いですよね。既にドメインを持っている場合以外はここで取得したドメインを使うといいです。

契約時に無料でドメインを取得したらそのドメインを使うといいよ。

エックスサーバー新規契約じゃない場合はドメインを取得して割り当てる

Webサイトに使いたいドメインがまだない場合はそれを取得する必要があります。ドメインの取得はいくつかのサイトから行うことができるけど、自分はよくお名前.comを使うのでお名前.comで説明します。

お名前.com等で欲しいドメインを検索して、料金確認へと進もう。

お申込内容だけど、オプションを追加するとお金がかかります。

オプションは必要だと思ったら後で設定することもできるし、特に追加しなくていいんじゃないかなと思います。

申し込んだらドメインの取得は完了です。次にサーバーの契約をしよう。

ネームサーバーの割り当て

お名前.com等のエックスサーバーとは別のところで取得したドメインを使う場合は、それをエックスサーバーで使うためのネームサーバー設定をしないといけません。お名前ドットコムの管理画面「お名前.com Navi」にログインしてネームサーバーの設定を見てみよう。

そうするとネームサーバーの設定をすることができるんだけど、ここで取得したドメインにチェックを入れて下に進むとネームサーバーの選択っていうのが出てくるから、そこに情報を入れる。

ここにエックスサーバーの情報を入れるんだけど、これはエックスサーバーの「サーバーパネル」サーバー情報から確認しよう。

ここのネームサーバー1~5をお名前.comの項目に入力してやろう。

そしたら確認ボタンを押して、確認画面のOKを押せばOKです。。

このネームサーバーの反映は環境によって24時間から72時間待ったりしないといけないから気長に待ちましょう。

エックスサーバーにドメインを追加する

続いてエックスサーバーのドメイン設定から取得したドメインの設定をしよう。

取得したドメインを入力して進めばOKです。

無料独自SSLとXアクセラレータのチェックは入れておくことをお勧めします。一つ注意なんだけど、ネームサーバーの反映が終わっていない場合、ドメインの設定をしてもこんな表示になってしまう恐れがあります。

無料独自SSLはネームサーバーの変更設定をしてからある程度時間を置かないと失敗するので、失敗したらしばらく経ってからSSL設定は行うといいですよ。

ドメインを追加したらWebサイトの公開をしていくよ

エックスサーバーにWebサイト・ポートフォリオを公開する

ここからエックスサーバーにポートフォリオを公開っていうことをやっていくけど、別の記事でそれぞれ詳細を書いているから、リンク先の記事を見てみるとより分かると思います。

リンク先の記事ではそれぞれのライブラリやフレームワークを使ったエックスサーバーに公開する方法が書かれているよ

ポートフォリオといっても使う言語やデータベースの使用有無などが変わってくるから、それぞれ見ていこう。

エックスサーバーのどこにアップロードすればいいのか？

公開したいサイトがあるならそれらのファイルをエックスサーバーにアップロードすることになるんだけど、どこにそれらのファイルをアップロードすればいいのかっていう疑問が浮かびます。

これはドメイン名のフォルダ/public_html配下のindex.htmlが起点になるように配置すればOK。

ホームページのファイルはどこへアップロードすればいいですか？

エックスサーバーにはファイルマネージャーっていうのがあってそこからファイルをいじることができるんだけど、そこからみるとこんな感じ。

公開したいドメイン配下のpublic_html内のindex.htmlが、そのドメインにアクセスすると表示される。

大まかな流れとしてはこんな感じです。

エックスサーバーに静的サイトを公開する

HTML・CSS・JavaScriptで作成したサイトの場合

まずはHTML・CSS・JavaScriptでできたポートフォリオサイトの場合をやっていこう。この場合は簡単で作成したファイルたちをpublic_html配下に突っ込むだけでOK。こんな感じ。

htmlのファイル名はindex.htmlにしておきましょう。これでドメイン名でアクセスしてみるとそのページが表示されます。

ファイルやフォルダーのアップロードにはFTPソフトを使うといいですよ。自分はcyberduckよく使います。

関連記事静的サイトを作ってエックスサーバーに公開する方法（React・Vueの場合も）-HTML・CSS・JavaScriptの場合

Vueで作成したサイトの場合

Vueの場合はbuildされたファイルをアップロードする必要がありますよね。アプリケーションを作成したらbuildしてdist配下にあるものをエックスサーバーに突っ込みましょう。

それをエックスサーバーのpublic_html配下にアップロードです。

アクセスしてみると動いてくれるはず。

Reactで作成したサイトの場合

Reactの場合もbuildしたものを突っ込めば画面に表示されるはず。

buildしてできたファイルたちをエックスサーバーのpublic_html配下にアップロード。

ブラウザで見てみると表示されますね。

HTML・CSS・JavaScriptの画面だけで済むものはこっちの記事でそれぞれ書いたりしているからよかったら見てみてね。

エックスサーバーに動的なサイトを公開する方法

エックスサーバーにワードプレスで作成したサイトを公開する

ワードプレスの場合は、エックスサーバーでワードプレス環境を作る必要があります。ただエックスサーバーにワードプレスをインストールするのは簡単。インストールする機能がついているんですよね。

これを使えば簡単にインストールしてくれる。より簡単なのがエックスサーバーを契約する際に使えるWordpressクイックスタート。

これ使うとドメインの設定もSSL設定もやってくれるから楽です。最初からワードプレスサイトをエックスサーバーで公開するつもりなら使うのがおすすめです。

エックスサーバーでワードプレスを使う方法を以下の記事で書いたのでよかったら参考にしてみてください。

ワードプレス使うならブログやサイト運営したいっていう人が多そうですよね。この記事見ている人はあまり使う人いない気がする。

Laravelで作成したサイトの場合

Laravelを使うということは、データベースと連携して色々やりたい人でしょう。ただサーバーサイド絡むとちょっときついんですよね。

データベースの設定はもちろん、公開するためにシンボリックリンク作成したりPHPのバージョン考えたりと色々面倒です。以下の記事でLaravelアプリケーションを公開するっていうことをやったからLaravelでやりたい方は良かったらみてみてください。

Flaskで作成したサイトの場合

Flaskを使ってポートフォリオを作って公開したい人もDBと接続してっていうことをやりたい人ですよね。ただこれもちょっと面倒でエックスサーバー管理者権限ないんで普通にやってもpipとか使えないんですよね。

だからそういった必要なものを使えるように環境を整えていく必要がある。Flaskアプリケーションをエックスサーバーに公開するっていうのはこっちの記事で書いたからよかったらどうぞ。

Webサイトを公開したらSSL設定はしておこう

サイトをエックスサーバーで公開できたらSSL設定はしておきましょう。httpじゃなくてhttpsになるあれですね。静的サイトを作ってエックスサーバーに公開するっていう記事のSSL設定をするで書いたからやってみるといいです。

SSL化していないポートフォリオ見られたくないですもんね。

Githubと連携してWebサイトを自動デプロイできるようにする

ポートフォリオを作る中でGithubでコードを管理して開発している人もいるでしょう。そういった人はGithubでマージしたら自動でエックスサーバーにデプロイするっていう機構を取り入れてみるといいです。

以下の記事でGithubActionsを使ってmainブランチにマージされたらエックスサーバーに公開するっていうことをやったから、こちらもよかったら参考にしてみてください。記事内ではVueのアプリケーションをデプロイするっていうことをやっているよ。

rsyncコマンドを使ってエックスサーバー内のフォルダと同期するっていう方式をとっています。

エックスサーバーでWebサイト公開まとめ

今回エックスサーバーでWebサイトやアプリケーションを公開するっていうことを書いたみたけど、やってみたのはこんな感じです。

静的なサイトを公開するのはやりやすいけど、LaravelとかFlaskなどは環境を整える必要があるからしんどいです。管理者権限がないから色々モジュール入れたりとか簡単にできないですしね。

HTML/CSS/JavaScriptやReact、Vueを使った画面だけなら突っ込むだけで楽です。エックスサーバーを使ってWebサイトを公開してみるのもいいでしょう。

 エックスサーバーはこのブログでも使用中

このブログは月間10万PVぐらいなんだけど、エックスサーバーで運営しています。ブログやサイトを作りたかったら使ってみるといいでしょう。おすすめのレンタルサーバーです。