エックスサーバーにWebサイトを公開する方法（React・Vueの場合も）

そんな疑問を解消するためにエックスサーバーでWebサイトを公開する方法を紹介します。

 エックスサーバーを使って3つのサイトを公開してみたよ

上で挙げた記事の内容に書いた3つのWebサイトをエックスサーバーに公開してみました。どのサイトも公開することができたのので、何か当てはまるものがあったら参考にしてみてください。

 ワードプレスサイトの場合

ワードプレスを使ったサイトのエックスサーバーでの公開方法は以下の記事で書いています。

ワードプレスを使ったブログやサイトを公開したい場合は上の記事を参考にしてみてください。これからワードプレスを始めるならクイックスタートを使うのが楽です。

この記事では自作のWebサイトをエックスサーバーで公開していくよ

エックスサーバーに登録する

まずはエックスサーバーに登録です。（10日間の無料期間があります）

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

このサイトも現状エックスサーバー使っていて、プランもスタンダードプランだよ

ファイル管理はエックスサーバーに突っ込んだファイル群を見ることができて、こんな感じで見れる。

このサイトはワードプレスでできているから、ワードプレスのファイルたちが表示されていますね。ここからファイルの内容を編集したり、アップロード、削除なんかもできるから結構便利。

サーバー管理は、その名の通りサーバーの設定なんかをできて色々あるね。

WordPress簡単インストールはワードプレスインストール時に便利です。SSH設定や.htaccessの編集なんかも行えますね。画面上でポチポチしたり入力するだけで設定できてしまうのは楽で良い。

10日間の無料期間がある

エックスサーバーには10日間の無料期間があるから、とりあえず使ってみてどんな感じか確認してみるといいです。

エックスサーバーではサーバーアカウントお申し込み日から10日間、無料お試し期間を設けています。
無料お試し期間を利用し、エックスサーバーを体験してみましょう。

無料お試し期間について

ちなみにおすすめプランは一番安いスタンダードプランですよ。

エックスサーバーの契約期間・料金プランのおすすめは？最初は1年ぐらいの契約をしてみてはどうだろう

2022.1.17

エックスサーバーの契約期間ってどれぐらいがいいの？ そんな疑問を解消するために、今回はエックスサーバーのおすすめの契約期間はどれなのか？っていうことを書いていきたいと思います。これからエックスサーバーを契約してブログやサイトを始めたい人は参考にしてみてください。 記事の内容 エックスサーバーの契約期...

エックスサーバーを使った時のサイトのトップページ場所は？

これから静的サイトをエックスサーバーに上げていくんだけど、そもそもどこにどんなファイル名でアップロードすればいいのだろう？

アップロードを行いたいドメイン名のフォルダを選択されますと、[ public_html ]というフォルダが表示されます。
この[ public_html ]内に、インターネット上で公開するファイルをアップロードしてください。また、トップページのファイル名は「index.html」となります。

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

ファイルはindex.htmlっていうファイルがトップページになるから、index.htmlっていう名称で作成すればいいですね。public_htmlは勝手にエックスサーバーが作ってくれるからこっちから何もする必要はない。

index.htmlを起点にして静的サイトを作っていこう。

公開したいWebサイトを準備する

エックスサーバーを契約したら静的サイトの準備をしよう。静的サイトの作りにも色々種類があるから、いくつかパターンを作っていくことにする。以下の3つにしようかな。

ReactとVueで作ったサイトもビルドして突っ込めばいけるはずだからやってみよう。ちなみにサクッと試したく、かなり適当に作ったのでデザインやコードはゴミです。よろしくお願いします。

まずは公開するサイトを3つ紹介するよ

HTML・CSS・JavaScriptで作ったサイト

まずは単純なHTML・CSS・JavaScriptで作ったサイト。

htmlファイルとcssファイル、それと画像ファイルとparticles.jsを入れてみました。particles.jsはこんな風に幾何学模様みたいなものを表示する事ができるやつ。

See the Pen
particles.js by Vincent Garreau (@VincentGarreau)
on CodePen.

なかなか面白いですよね。今回JSは自分で特に書いていないので、このParticles.jsのファイルを突っ込んでいるだけです。

Reactで作ったサイト

Reactバージョン。[create react app]でサクッと作ります。コードはほとんど同じでちょっとreactで動かせるようにしたぐらいです。それとParticleはReact用の使いました。

エックスサーバーにアップするときにはbuildしてアップロードしてやればいいはず。アップロードする時にbuildしてやりましょう。

Vueで作ったサイト

Vueでもやってみましょう。VueはHTMLそのまま貼り付ければ大体動いてくれるから楽。ただParticleのライブラリはそのまま使えないからvue-particlejsっていうやつを使いました。

Vueの場合もbuildしたものをアップしてやれば動いてくれるはずだから後でやっていこう。

エックスサーバーにサイトのファイルをアップロードして公開する

サイトを作ったらエックスサーバーにそれらのファイルを配置していきます。サーバーにファイルやフォルダを置くのにエックスサーバーのファイルマネージャーを使ってもいいけど、やり辛いのでFTPソフトを使ってやることにしますね。（Cyberduckを使うよ）

ちなみにエックスサーバーのファイル管理だとこんな感じ。ファイル管理からファイルを見る事ができる。

独自ドメインを割り当てた場合はそれらの名前のフォルダが出てくるけど、今回はエックスサーバーを契約すると使える「サーバーID.xsrv.jp」にファイルを配置します。

ここのpublic_htmlにファイルをうまいこと置けば動いてくれるはず。ただちょっとやりづらいので今回はCyberduckを使ってやりたいと思う。

Cyberduckを使う場合の設定はエックスサーバーのCyberduck の設定をみながらやってみるといいですよ。

HTML・CSS・JavaScriptで作ったサイトを公開する

エックスサーバーのドメイン配下にあるpublic_htmlにファイルを置いていこう。まずはHTML・CSS・JavaScriptで作ったサイトをやってみる。Cyberduckを使ってやるけど、エックスサーバーに接続したらpublic_html配下に作成したファイルとフォルダをアップロード。

サイトに必要なフォルダたちをアップロードしたら、実際にURLを入力して画面に表示されるか確認してみる。

ちゃんとURL打ってブラウザで確認してみても表示されていますね。これでHTML・CSS・JavaScriptで作ったサイトの表示はOK。

Reactで作ったサイトを公開する

Reactの場合はbuildしたものをアップする必要があるので、まずはbuildです。[yarn build]と打ってbuildします。npmなら[npm run build]でいけるんじゃないかな。

このbuildされたファイル達をアップロードしてやりましょう。

そうするとReactで作ったサイトが表示されました。

うーーんただParticleの部分が消え失せていますね。ローカルの開発環境と本番の違いって出たりするよなあ、ちょっと何か間違えたね。ただReactのアプリケーションは反映できたから良しとしよう。

Vueで作ったサイトを公開する

Vueの場合もReactと同じようにbuildしましょう。

buildが完了したらdistフォルダができるからその配下にできたものを、public_html配下にアップロード。

ブラウザから確認してみると反映されていますね。

SSL(https)設定する

作成したサイトをエックスサーバーに突っ込んで表示することはできたけど、ただ表示できただけでhttpsになっていません。

これは良くないので、SSL設定しよう。

独自SSL設定追加から追加です。

反映には最大で1時間程度かかるから気長に待とう。反映されたらURLをhttps://・・・にして確かめてみる。そうするとちゃんと表示されますね。

自動でhttps://に切り替わるようにする

SSL設定が完了しても、httpでアクセスできてしまいます。httpでアクセスしてきた場合でもhttpsにアクセスさせるように.htaccessをいじろう。

.htaccess編集にhttpからhttpsにリダイレクトする記述を書いていこう。

<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://〇〇.com/$1 [R=301,L]
</IfModule>

これでhttpsじゃなくてhttpでサイトにアクセスしてみて、httpsにリダイレクトされたらOKです。

まとめ

今回はエックスサーバーで静的サイトを公開するっていうことをやってみたけど、Webサイトのファイルをアップロードすればいいだけだから簡単でした。ちなみに今回試したのは以下のサイトたち。

サイト公開してみたい人はエックスサーバー使ってみるといいでしょう。