ubuntu+nginxで自分用の複数サイトを構築してみる

shallow focus photography of computer codes IT
program2
2022.04.18

はじめに

webサイトの学習をしたいなーと思い、ちょっと前にApacheってウェブサーバーの名前をよく聞いていたけど、最近はnginxってのをよく聞くぞ！ということでnginxの学習がてら構築してみることにしました。

将来的にウェブサイトでやりたいことは以下です

  • ブログを開設する（できればアフィリエイトもやってみたい
  • pythonを使ったウェブアプリを作成したい（趣味の競馬サイトでも作りたい
  • Laravelを使ったウェブアプリを作成したい（なんかよく聞く名前だからPHPってことしか知らん
  • あとなんやかんやでいろんな端末からアクセスできたほうがいい感じだし

nginxバーチャルホストで複数サイトを構築してみる

準備したもの

サーバー

とりあえず自分のサーバーがないとお話にならないので、CONONAのVPSを借りてきました

できれば学習目的なのでAWSとかに手を出したかったけど、料金体系がイマイチわからないのと

なんだか高いイメージがあったのとレンタルサーバーだと自由にカスタマイズできないので

VPSを選びました。今1か月無料らしい。。もう少し待てば( ;∀;)

ドメイン

今回複数サイトなので複数のドメインを取得しました。けどよくよく考えるとaa.dmin.comとbb.dmin.comみたいな子ドメインみたいなのでも出来そうだよね。まぁこれは次回やってみようと思う

今回はどうやら初期費用が安いらしいのでお名前ドットコムでドメインを３つ作成した

ちなみにこのサイト自体はGMOのvalueサーバーでドメイン＆XREAサーバで開設しています

構築してみる

目標

とりあえず、サイトAにアクセスしたら【hello A!】

サイトBにアクセスしたら【hello B!】と表示されるように構築が出来ればよしとする

各種設定

お名前ドットコムで取得したドメインをCONOHAサーバーに向ける

CONOHAサーバーにドメインをさらにIPアドレスにマッピングする

ubuntuに必要なものをインストール

さて、ここにきてど素人は何をすればいいのかわかりません。

とりあえず、【nginx+ubuntu+複数サイト】でググってみます。

ほぅ。どうやら複数サイト設定のことを【バーチャルホスト】っていうんだな？

以下４つのサイトを参考に構築していきました

参考サイト１　 参考サイト２　 参考サイト３　 参考サイト４

とりあえず、nginxをインストールじゃ！

sudo apt update
sudo apt install nginx

未だにaptとapt-getとyumとか違いがわからん。

debian?リポジトリ？パッケージ管理？　ちょっと何言ってるかわかんない

nginx.confの設定

よくわからんが真似する

sudo vi /etc/nginx/nginx.conf

以下、一番最後の行にincludeを追加した

user www-data;
worker_processes auto;

events {
	worker_connections 768;
	# multi_accept on;
}

http {

	##
	# Basic Settings
	##

	sendfile on;
	tcp_nopush on;
	tcp_nodelay on;
	keepalive_timeout 65;
	types_hash_max_size 2048;
	# server_tokens off;

	# server_names_hash_bucket_size 64;
	# server_name_in_redirect off;

	include /etc/nginx/mime.types;
	default_type application/octet-stream;

	##
	# SSL Settings
	##

	ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3; # Dropping SSLv3, ref: POODLE
	ssl_prefer_server_ciphers on;

	##
	# Logging Settings
	##

	access_log /var/log/nginx/access.log;
	error_log /var/log/nginx/error.log warn;

	##
	# Gzip Settings
	##

	gzip on;

	# gzip_vary on;
	# gzip_proxied any;
	# gzip_comp_level 6;
	# gzip_buffers 16 8k;
	# gzip_http_version 1.1;
	# gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
	
	##
	# Virtual Host Configs
	##

	# include /etc/nginx/conf.d/*.conf;
	include /etc/nginx/sites-enabled/*;
}

よくわからんが、 /etc/nginx/sites-enabled/* にあるconfファイルを複数設定して、それを読み込んで処理するっぽい

その前に、表示させるhtmlファイルの設置する

ソースコード置き場作成

どこに設置するのが適切か知らんが、/homeに作成している人が多いので真似する

※今回取得したドメインをsiteA.com, siteB.com, (siteC.com,)とする

sudo mkdir /home/myname/public_html

sudo mkdir -p /home/myname/public_html/siteA.com/{public,private,log,backup}
sudo mkdir -p /home/myname/public_html/siteB.com/{public,private,log,backup}

# 開いたら 【hello A】と書いて保存する
sudo vim /home/myname/public_html/siteA.com/public/index.html
# 開いたら 【hello B】と書いて保存する
sudo vim /home/myname/public_html/siteB.com/public/index.html

以上がアクセス時に表示されるHTMLファイル

複数サイトのconfファイル設定

nginx.confにinclude /etc/nginx/sites-enabled/* と入力したので

enabledに作成すれば良さそうだが、セキュリティなのかavailabledに作成して、それを参照するやり方が多い 

sudo vim /etc/nginx/sites-available/siteA.com
sudo vim /etc/nginx/sites-available/siteB.com

siteA,Bの中身は以下

server {
	listen 80;
	server_name siteA.com;
	access_log /home/myname/public_html/siteA.com/log/access.log;
	error_log /home/myname/public_html/siteA.com/log/error.log;
	location / {
			root /home/myname/public_html/siteA.com/public/;
			index index.html;
			}
	}

以下は参照するための設定　シンボリックリンクというらしい

sudo ln -s /etc/nginx/sites-available/siteA.com /etc/nginx/sites-enabled/siteA.com
sudo ln -s /etc/nginx/sites-available/siteB.com /etc/nginx/sites-enabled/siteB.com
sudo ln -f -s /etc/nginx/sites-available/siteA.com /etc/nginx/sites-enabled/siteA.com
sudo ln -f -s /etc/nginx/sites-available/siteB.com /etc/nginx/sites-enabled/siteB.com

ここまで出来たらnginxを再読み込み（してない場合は起動）

sudo nginx -t
sudo systemctl reload nginx

エラーがなければ、ブラウザでsiteA.comと siteB.com にアクセスしてみる

hello A(B)が表示されていれば成功

次回

siteAにwordpressを導入してブログ作成

siteBにpythonを入れてなんかする予定

タイトルとURLをコピーしました