nginxでフロントエンドとバックエンドを分離したプロジェクトをデプロイする方法

2年 ago
結衣, 春花
1 minute

フロントエンドとバックエンドの分離プロジェクトをデプロイするには、次の手順に従ってNGINXを構成できます。

  1. NGINXのインストール: まず自身のサーバーにNGINXがインストールされていることを確認してください。パッケージ管理ツール（例えばapt、yum等）を使用してNGINXをインストールすることが可能です。
  2. NGINXの設定：NGINXの設定ファイル（通常は /etc/nginx/nginx.conf）を編集します。httpブロックに以下の設定を追加します：
server {
listen 80;
server_name example.com;  # 替换为你的域名
location / {
root /path/to/frontend;  # 替换为前端代码的路径
index index.html;
try_files $uri $uri/ /index.html;
}
location /api/ {
proxy_pass http://localhost:3000;  # 替换为后端服务的地址和端口
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header Host $host;
}
}

この設定で、フロントエンドコードは指定されたパス（例: /path/to/frontend）に配置され、NGINXは「/api/」で始まらないすべての要求をフロントエンドコードに流し、また「/api/」で始まるすべての要求をバックエンドサービス（例: http://localhost:3000）にプロキシします。

  1. ファイルを保存してNGINXをリロードして、新しい設定を有効にする
sudo nginx -t  # 检查配置文件是否正确
sudo systemctl reload nginx  # 重新加载NGINX配置

NGINXの設定は完了です。フロントエンドコードは指定したパスにデプロイされ、NGINX設定を使ってアクセス可能です。また、バックエンドサービスはNGINXのプロキシ機能を使ってアクセスが可能です。環境に合わせて、設定内のパス、ドメイン、ポート情報などを変更してください。

bannerAds