エックスサーバーVPSでWebサイトを公開する方法

エックスサーバーVPSでWebサイト公開したいんだけど？

環境整えればできますよ。

この記事ではエックスサーバーVPSでWebサイトを公開するっていうことをやっていきます。

公開するWebサイトは普通の静的サイトです。HTML・CSS・JavaScriptでできているようなサイトですね。

同じようにサイトを公開したい方は参考にしてみてください。

エックスサーバーVPSでWebサイトを公開していきましょう。

エックスサーバーVPSでWebサイトを公開する手順

Webサイトを公開する場合はこんな流れでできるはずです。

単純なWebサイトでもやっぱりWebサーバーの設定とか必要か・・・

そうだね、レンタルサーバーなら必要ないからそこはちょっと面倒かもね。

レンタルサーバーの場合は最初からドキュメントルートが決まっているので、そこにアップロードするだけで公開できますが、VPSの場合はその辺りも自分で設定しないといけません。

とはいってもサーバーサイドが絡むアプリケーションを公開するよりも圧倒的に楽ですよ。

エックスサーバーVPSでサーバーを立てる

エックスサーバーVPSでまずはサーバーを立てます。申し込む際に画面で選択していくだけで立てることができるから楽ですよ。

今回はUbuntu22.04を使ってやりたいと思います。

エックスサーバーVPSを申し込んでサーバーを立てるまでは以下の記事でやっているので、これから始める方はよかったら参考にしてみてください。

ユーザーを作成する

サーバーに接続して作業したいので、SSH接続します。SSH接続の方法は以下の記事で書いているので、よかったら参考にしてみてください。

ユーザーを作成しておきます。

# ユーザー作成
$ sudo adduser kobayashi

# 権限付与
$ sudo usermod -aG sudo kobayashi

// 公開するディレクトリを作成
$ cd /home/kobayashi
$ mkdir src

Webサイトを公開するディレクトリを今回は作成したユーザーディレクトリ配下にsrcとして作っておきました。後でここにWebサイトのファイルたちをアップロードします。

Nginxをインストールする

WebサーバーにはNginxを使うことにして、Nginxをインストール。

$ apt update
$ apt install -y nginx

設定ファイルを作成する

Nginxの設定ファイルを作成します。

$ vim /etc/nginx/conf.d/app_nginx.conf

server {
  listen 80;
  server_name IPアドレス;
  charset      utf-8;
  root   /home/kobayashi/src;
  index  index.html index.htm;

  location / {
    try_files $uri /index.html;
  }
}

rootにさっき作成したフォルダを指定します。

Webサイトをアップロードする

Webサイトをアップロード

my-appディレクトリにローカルのWebサイトフォルダたちをアップロードします。

FTPソフトを使ってやるといいですよ。

パーミッション変更しないとアクセスできないので変更します。

$ chmod 701 /home/kobayashi
$ chmod 701 /home/kobayashi/src/

Nginx起動

# nginx起動
$ systemctl start nginx

# status確認
$ systemctl status nginx

ブラウザから確認

ブラウザからIPアドレスを入力して確認してみるとちゃんと表示されました。

Template Partyからテンプレートを使っています。

静的サイトの場合は、Webサーバー入れてちょっと設定すれば表示まで持っていけるから楽でいいですね。無事表示できました。