1.nginxをダウンロード

ダウンロードアドレス： https: //nginx.org/en/download.html

二、スタート

2 つの方法:

1)このディレクトリの「 nginx.exe 」をダブルクリックして、nginx サーバーを起動します。

2) コマンドライン(cmd)でフォルダーに入り、nginx サーバーを直接起動する start nginx コマンドを実行します。

注: ファイアウォールをオフにすることを忘れないでください

3.検証

ブラウザーを開き、アドレス: http://localhost を入力してページにアクセスすると、次のページが表示され、アクセスが成功したことが示されます。

四、窓操作ガイド

サービスを開始します: nginx を開始します

サービスを終了します: nginx -s quit

サービスを強制的にシャットダウンします: nginx -s stop

サービスのリロード: nginx -s reload (サービス構成ファイルのリロード、再起動と同様、サービスは停止しません)

構成ファイルを確認します: nginx -t

構成ファイルを使用します: nginx -c "構成ファイルのパス"

ヘルプを使用: nginx -h

5. カタログ紹介

conf: 構成ファイルは、ここで仮想ホストファイルを構成します

html: nginx のデフォルトの Web ルートパスの場所

ログ: ログファイル

sbin: バイナリプログラムの開始/停止/リロードサービスコマンドはこちら

6. 展開

nginx フォルダーの下にある conf ファイルを入力し、nginx.conf ファイルを開き、ポートを変更してサブディレクトリを構成します。

Windows の Nginx は、テキストまたは vscode などのコードエディターで開くことができます。

1. コマンド npm run build:prod を使用して、プロジェクトをパッケージ化します。

2. パッケージ化されたファイルの名前は dist です。dist フォルダー全体を nginx フォルダー (html フォルダーと同じレベル) にコピーします。

3. conf フォルダーに移動して、nginx.conf ファイルを構成および構成し、関連する構成を変更します。

ファイル内の / {} の場所のルートは、nginx を解凍したディレクトリです。つまり、ルート (つまり、ルートディレクトリ) の下にある HTML の index.html/index.htm Web ページが開かれます。デフォルト。

location / {                  # 表示 以'/'开头的请求怎样处理
            root   html;      #指定root文件夹为 上面提到的html文件夹
            index  index.html index.htm;   #返回index.html
        }

これを dist の下の html に変更します

location / {
            root   dist;
            index  index.html index.htm;
        }

変更が完了したら、nginx を再起動する必要があり、再起動後に有効になります。

7.展開の問題

1.クロスドメイン

クリックしてログインしたところ、リクエストは正常に送信されたものの、戻り値がなく、ネットワークエラーが報告されていることがわかりました.確認したところ、コンソールでクロスドメインが報告されていることがわかりました.フロントエンドがリバースプロキシ vue.config.js を使用しました

devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true,
    },
    // 反向代理
    proxy: {
       "/api": {
         target: "http://192.168.4.95:8092/", //本地地址
         changeOrigin: true,
         pathRewrite: {
           "^/api": "/api",
         },
       },
    },
  },

したがって、nginx の構成を変更する場合は、nginx.conf で変更する必要があります。

server {
        listen       80; #监听端口
        server_name  localhost; #可以改成自己的域名或者ip
 
        #charset koi8-r;
 
        #access_log  logs/host.access.log  main;
 
        location / {
            root   dist; 
            index  index.html index.htm; 
        }

        location / {       #想要访问的baseurl
            proxy_pass http://192.168.4.95:8092;       #反向代理的服务器真正的ip
            add_header 'Access-Control-Allow-Origin' '*';      #允许来自所有的访问地址
            add_header 'Access-Control-Allow-Credentials' 'true';   #允许携带Cookie
            add_header 'Access-Control-Allow-Methods' *;  #允许所有的请求
            add_header 'Access-Control-Allow-Headers' 'Content-Type,*';#允许所有的header
        }
}

ここで話そう、nginxのクロスドメインとバックエンドは一緒に設定できないらしいので注意が必要

フロントエンドはnginxを使用してプロジェクトをサーバーにデプロイします