NGINXとは何か？
- ブラウザにWebコンテンツを提供するサーバーのこと
NGINXの役割
1. Webサーバー
- HTML・CSS・画像などの静的ファイルをクライアント（ブラウザ）に配信
- Apacheと同様のWebサーバーですが、より高速で軽量
2. リバースプロキシ
- クライアント（ユーザー）とアプリケーションサーバーの間に立ち、リクエストを中継する
- これにより、アプリサーバーを外部に直接公開せずに済み、セキュリティとスケーラビリティが向上する
3. ロードバランサー
- 複数のアプリケーションサーバーにトラフィックを分散する
- 高負荷時にも処理が集中せず、**可用性（ダウンしにくさ）**を確保できる
4. キャッシュサーバー
- 静的なページやAPIレスポンスをキャッシュし、レスポンス速度を向上させる
NGINXのインストール
% brew install nginx
% cd /usr/local/opt/nginx
% nginx
静的コンテンツの配信
静的コンテンツとは?
- HTMLファイル、CSSファイル、Webブラウザーに表示される画像などの単純なファイルのこと
① index.htmlを作成する
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>NGINX project</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<h1>Hello my friends. NGINX</h1>
</body>
</html>
② nginx.confを作成する
nginx.conf
//HTTP内でコンテキストを定義する
http {
//サーバー内部でnginxサーバーを構成するディレクティブを定義する
server {
listen 8080;
root /user/Desktop/nginx;
}
}
MIMEタイプ
① styles.cssを作成する
styles.css
h1 {
background-color: pink;
color: aqua;
}
② nginx.confを作成する
nginx.conf
//HTTP内でコンテキストを定義する
http {
//サーバー内部でnginxサーバーを構成するディレクティブを定義する
server {
listen 8080;
root /user/Desktop/nginx;
}
}
ロケーション・コンテキスト (Location Context)
① fruits/index.htmlを作成する
fruits/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>NGINX project</title>
</head>
<body>
<ul>
<li>Mango</li>
<li>Strawberry</li>
<li>Watermelon</li>
</ul>
</body>
</html>
② nginx.confを作成する
nginx.conf
//HTTP内でコンテキストを定義する
http {
include mime.types;
//サーバー内部でnginxサーバーを構成するディレクティブを定義する
server {
listen 8080;
root /Users/Desktop/nginx;
location ~*/count/[0-9] {
root /Users/Desktop/nginx;
try_files /index.html =404;
}
location /fruits {
root /Users/Desktop/nginx;
}
location /carbs {
alias /Users/Desktop/nginx/fruits;
}
location /vegetables {
root /Users/Desktop/nginx;
try_files /vegetables/veggies.html /index.html =404;
}
}
}
events {}
③ vegetables/veggies.htmlを作成する
vegetables/veggies.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>NGINX project</title>
</head>
<body>
<ul>
<li>Lettuce</li>
<li>Eggplant</li>
<li>Onion</li>
</ul>
</body>
</html>
リライト（書き換え）とリダイレクト
① nginx.confを作成する
nginx.conf
//HTTP内でコンテキストを定義する
http {
include mime.types;
//サーバー内部でnginxサーバーを構成するディレクティブを定義する
server {
listen 8080;
root /Users/Desktop/nginx;
rewrite /number/(\w+) /count/$1;
location ~*/count/[0-9] {
root /Users/Desktop/nginx;
try_files /index.html =404;
}
location /fruits {
root /Users/Desktop/nginx;
}
location /carbs {
alias /Users/Desktop/nginx/fruits;
}
location /vegetables {
root /Users/Desktop/nginx;
try_files /vegetables/veggies.html /index.html =404;
}
location /crops {
return 307 /vegetables;
}
}
}
events {}
NGINXをロードバランサーとして利用する
① server/index.jsを作成する
server/index.js
const express = require('express');
const app = express();
app.get('/', (req, res) => {
res.send('I am a endpoint');
});
app.listen(7777, () => {
console.log('Server is running on port 7777');
});
② 下記のコマンドを実行する
% cd server
% npm init
% npm init -y
% npm install express
③ server/Dockerfileを作成する
# 最初に調べたnodeのバージョンを記載
FROM node:16
# アプリケーションディレクトリを作成する
WORKDIR /usr/src/app
# アプリケーションの依存関係をインストールする
# ワイルドカードを使用して、package.json と package-lock.json の両方が確実にコピーされるようにします。
# 可能であれば (npm@5+)
COPY package*.json ./
RUN npm install
# アプリケーションのソースをバンドルする
COPY . .
# 開放するport番号を記載
EXPOSE 7777
CMD [ "npm","run" ,"start" ]
④ nginx.confを作成する
nginx.conf
//HTTP内でコンテキストを定義する
http {
include mime.types;
upstream backendserver {
server 127.0.0.1:1111;
server 127.0.0.1:2222;
server 127.0.0.1:3333;
server 127.0.0.1:4444;
}
//サーバー内部でnginxサーバーを構成するディレクティブを定義する
server {
listen 8080;
root /Users/Desktop/nginx;
rewrite /number/(\w+) /count/$1;
location / {
proxy_pass http://backendserver/;
}
location ~*/count/[0-9] {
root /Users/Desktop/nginx;
try_files /index.html =404;
}
location /fruits {
root /Users/Desktop/nginx;
}
location /carbs {
alias /Users/Desktop/nginx/fruits;
}
location /vegetables {
root /Users/Desktop/nginx;
try_files /vegetables/veggies.html /index.html =404;
}
location /crops {
return 307 /vegetables;
}
}
}
events {}