nginx で複数のフロントエンド プロジェクトを構成する方法

最近、サーバーを複数のフロントエンドプロジェクトで構成する必要があり、フロントエンドとバックエンドのプロジェクトを分離するには当然nginxが必要になります。

次のように単一のプロジェクトで問題ありません
nginx の nginx.conf 設定ファイルを変更します

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

pid /usr/local/nginx/logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
 
    server {
        listen       8000;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
        
        location / {
            root   /var/www/;
            #index  index.html index.htm;
        }
        location ~ /static/.*\.(gif|jpg|jpeg|png|bmp|swf)$ {
            root /var/www/project;
        }

        location ~ /static/.*\.(js|css)$ {
            root /var/www/project;
        }

        location = /project {
            root   /var/www/project;
            index  index.html index.htm;
        }
   
    }

}

ただし、複数のプロジェクトがある場合は、nginx.conf も設定する必要があります

プロジェクト vue cli をベースに開発されているため、パッケージ化する際に js、css などの静的ファイルの接続アドレスを設定する必要があります
次の設定ファイルを変更します

#プロジェクト名またはパス名に従って変更します。対応するプロジェクトで

assetsPublicPath: '/project/'
-----------------------
assetsPublicPath: '/project1/'

次に、nginx.confを構成します

user root;
worker_processes  1;

pid /usr/local/nginx/logs/nginx.pid;

events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       8000;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
        
        location / {
            root   /var/www;
            #index  index.html index.htm;
        }

        location = /project1 {
            root   /var/www/project1;
            try_files $uri $uri/ /project1/index.html;
            index  index.html index.htm;
        }
        
        location = /project2{
            root /var/www/project2;
            try_files $uri $uri/ /project2/index.html;
            index  index.html index.htm;
        }

    }

}

ここでユーザー root; を追加する必要があることに注意してください。 500 を報告します,

その後、nginx を再起動します

 先停止
  ./nginx -s quit
 再重启
 /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf

もちろん nginx -s reload は問題ありませんが、エラーが報告される可能性があります。問題を解決するには、上記の方法を使用してください

#アクセス成功

192.168.

.:8000/project/index.html192.168.
. :8000/プロジェクト1/index.html

以上がnginx で複数のフロントエンド プロジェクトを構成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。