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

今回は静的サイトをエックスサーバーで公開するっていうことをやっていきたい。静的サイトなら別にレンタルサーバーじゃなくても、NetlifyやVercel、AWSのS3ホスティング・Firebaseなんかを使えば楽にできるけどレンタルサーバーでもやっておかないとね。

ということでレンタルサーバーであるエックスサーバーを使ってやっていきますよ。

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

まずはエックスサーバーに登録だ。プランはいくつかあるけど、一番安いプランで十分すぎるほど十分すぎる。

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

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

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

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

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

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

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

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

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

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

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

静的サイトを準備する

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

  • HTML・CSS・ JavaScriptで作ったサイト
  • Reactで作ったサイト
  • Vueで作ったサイト

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

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 の設定をみながらやってみるといいですよ。

ちなみにスマホでテザリングで行うと[504 Command not implemented for that parameter.]とかっていうエラーが出たりする場合があってつながらないので、気をつけましょう。

外部サイトテザリングでFTP/FTPS接続できない問題とキャリア別検証結果

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です。

まとめ

今回はエックスサーバーで静的サイトを公開するっていうことをやってみたけど、まあまあ簡単な感じですね。ただ静的サイトぐらいならNetlifyやVercel、AmazonS3でホスティングとかでもいいんじゃないかなあっていうことも思ってしまう。今やいろんなものがありますからね。

ただレンタルサーバーでやりたいっていう時もあるはず。そういう時にはエックスサーバーコノハウィングなどを使ってやってみるといいと思います。レンタルサーバーはワードプレスのインストールが楽なんだよなあ。