Nginx はフロントエンドとバックエンドの分離サービスと構成手順を展開します

この記事では、主に Nginx 導入のためのフロントエンドとバックエンドの分離サービスと構成手順を紹介します。これには一定の参考価値があります。今、共有します。必要な友人は参考にしてください。

Nginx のインストール

yum コマンドを使用して、CentOS 7 サーバーに Nginx をインストールします:

sudo yum install -y nginx

Nginx の構成

ファイルの場所

通常、nginx 設定ファイルは etc ディレクトリにあり、コマンド rpm -ql nginx を実行することもできます。パスを表示します。

/etc/nginx ディレクトリに切り替えると、nginx.conf 構成ファイルが表示されます。
vi nginx.conf を実行して構成ファイルを開きます。

vim 共通コマンド

iカーソルの前から入力を開始しますaカーソルの前から入力を開始しますEsc入力モードを終了u非入力モードで前の操作を取り消します:w非入力モードの場合は保存:wq非入力モードの場合は保存して閉じます:q閉じる (保存) :q!保存せずに強制します閉じる

コマンド	関数

Nginx 構成手順

# For more information on configuration, see:
#   * Official English Documentation: http://nginx.org/en/docs/
#   * Official Russian Documentation: http://nginx.org/ru/docs/

user nginx;
worker_processes auto; #启动进程
error_log /var/log/nginx/error.log; #全局错误日志
pid /run/nginx.pid; #PID文件

# Load dynamic modules. See /usr/share/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;

events {
    worker_connections 1024; #单个后台worker process进程的最大并发链接数 
}

http {
    gzip on; #开启gzip压缩
    gzip_min_length 1k; #设置对数据启用压缩的最少字节数
    gzip_buffers    4 16k;
    gzip_http_version 1.0;
    gzip_comp_level 6; #设置数据的压缩等级,等级为1-9，压缩比从小到大
    gzip_types text/plain text/css text/javascript application/json application/javascript application/x-javascript application/xml; #设置需要压缩的数据格式
    gzip_vary on;

    #虚拟主机配置
    server {
        listen       80 default_server; #侦听80端口,并为默认服务,default_server只能有一个
        server_name  www.binlive.cn binlive.cn; #服务域名,可以有多个,用空格隔开
        
        location /{
            proxy_pass http://127.0.0.1:3000; #代理本机3000端口服务
            proxy_set_header  Host              $http_host;   # required for docker client's sake
            proxy_set_header  X-Real-IP         $remote_addr; # 获取用户的真实IP地址
            proxy_set_header  X-Forwarded-For   $proxy_add_x_forwarded_for;
            proxy_set_header  X-Forwarded-Proto $scheme;
            proxy_read_timeout                  900;
        }
        # 图片缓存时间设置
        location ~ .*.(gif|jpg|jpeg|png|bmp|swf)$ {
            expires 10d;
        }
        # JS和CSS缓存时间设置
        location ~ .*.(js|css)?$ {
            expires 1h;
        }
        # 404定义错误提示页面
        error_page 404             /404.html;
        # 500定义错误提示页面
        error_page   500 502 503 504 /50x.html;
        
    }
    server {
        listen       80;
        server_name  admin.binlive.cn;
        location /{
            proxy_pass http://127.0.0.1:3080;
            proxy_set_header  Host              $http_host;   # required for docker client's sake
            proxy_set_header  X-Real-IP         $remote_addr; # pass on real client's IP
            proxy_set_header  X-Forwarded-For   $proxy_add_x_forwarded_for;
            proxy_set_header  X-Forwarded-Proto $scheme;
            proxy_read_timeout                  900;
        }
        
    } 
}

フロントエンドとバックエンドの分離プロジェクトのデプロイメント

Inフロントエンドとバックエンドの分離プロジェクト、フロントエンド コードは純粋な静的ファイルにパッケージ化されます。 Nginx を使用する目的は、静的ファイルでサービスを実行できるようにすることです。バックエンド インターフェイスも分離されているため、直接リクエストするとクロスドメインの問題が発生する可能性があります。この場合、Nginx はプロキシ バックエンド インターフェイスを転送する必要があります。

Nginx の設定は次のとおりです。

# For more information on configuration, see:
#   * Official English Documentation: http://nginx.org/en/docs/
#   * Official Russian Documentation: http://nginx.org/ru/docs/

user nginx;
worker_processes auto; #启动进程
error_log /var/log/nginx/error.log; #全局错误日志
pid /run/nginx.pid; #PID文件

# Load dynamic modules. See /usr/share/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;

events {
    worker_connections 1024; #单个后台worker process进程的最大并发链接数 
}

http {
    gzip on; #开启gzip压缩
    gzip_min_length 1k; #设置对数据启用压缩的最少字节数
    gzip_buffers    4 16k;
    gzip_http_version 1.0;
    gzip_comp_level 6; #设置数据的压缩等级,等级为1-9，压缩比从小到大
    gzip_types text/plain text/css text/javascript application/json application/javascript application/x-javascript application/xml; #设置需要压缩的数据格式
    gzip_vary on;

    #虚拟主机配置
    server {
        listen       80;
        server_name  mark.binlive.cn;
        root /home/spa-project/dist; #定义服务器的默认网站根目录位置
        index index.html; #定义index页面
        error_page    404         /index.html; #将404错误页面重定向到index.html可以解决history模式访问不到页面问题
        location ^~ /api/{
            proxy_pass http://127.0.0.1:7000;
            proxy_send_timeout 1800;
            proxy_read_timeout 1800;
            proxy_connect_timeout 1800;
            client_max_body_size 2048m;
            proxy_http_version 1.1;  
            proxy_set_header Upgrade $http_upgrade;  
            proxy_set_header Connection "Upgrade"; 
            proxy_set_header  Host              $http_host;   # required for docker client's sake
            proxy_set_header  X-Real-IP         $remote_addr; # pass on real client's IP
            proxy_set_header  X-Forwarded-For   $proxy_add_x_forwarded_for;
            proxy_set_header  X-Forwarded-Proto $scheme;
        }
        location ^~ /auth/{
            proxy_pass http://127.0.0.1:7000;
            proxy_send_timeout 1800;
            proxy_read_timeout 1800;
            proxy_connect_timeout 1800;
            client_max_body_size 2048m;
            proxy_http_version 1.1;  
            proxy_set_header Upgrade $http_upgrade;  
            proxy_set_header Connection "Upgrade"; 
            proxy_set_header  Host              $http_host;   # required for docker client's sake
            proxy_set_header  X-Real-IP         $remote_addr; # pass on real client's IP
            proxy_set_header  X-Forwarded-For   $proxy_add_x_forwarded_for;
            proxy_set_header  X-Forwarded-Proto $scheme;
        }
    }    
}

• フロントエンド コードがパッケージ化された

  dist ファイルを指定されたディレクトリに配置します。サービス ディレクトリ

• 静的サービスをプロキシするためのサービス ディレクトリを

  spa-project/dist ディレクトリに指定します

• Gzip構成で圧縮が有効になっているため、ファイル サイズを大幅に削減できます。

• #404 エラー ページをindex.html にリダイレクトします。これにより、フロントエンド履歴ルーティング モードでの 404 の問題を解決できます。ページを更新するときにサービスにアクセスできないため、問題はプロキシ インターフェイスです。問題はプロキシ インターフェイスです。リクエスト インターフェイスのドメイン名または IP を転送できます。インターフェイスのクロスドメイン問題を解決するためのプロキシ バックエンド

• Nginx サービスの開始

  ##設定が完了したら、nginxExecute nginx - を開始できます。 t

  を使用して、Nginx 構成が正しいかどうかをテストします。

nginx

を実行すると、設定ファイルが正しければ nginx サービスを開始できます。

nginx 設定ファイルを変更した後、

nginx -s reload
を実行してスムーズな移行を完了し、設定をリロードします
Nginx 共通コマンド

コマンド

説明

#nginx -hNginx ヘルプを表示nginx -vNginx バージョンの確認nginx -tNginx 構成のテストnginx -TNginx 構成をテストし、構成情報を出力します#nginxnginx を開始しますnginx -s reload設定ファイルをリロードして nginx をスムーズに起動しますnginx -s stopnginx を停止しますコマンド # 上記はこの記事の全内容です。皆様の学習に役立つことを願っています。その他の関連コンテンツについては、PHP 中国語に注目してください。 Webサイト！ Nginx はアクセスを禁止するためにバインドされていないドメイン名を設定します

関連する推奨事項:

nginx はリバース プロキシと負荷分散を実装します

Nginx が静的ページをデプロイする

#

以上がNginx はフロントエンドとバックエンドの分離サービスと構成手順を展開しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。