vue プロジェクトのデプロイと Nginx でのプロキシ設定の問題の分析

1. nginxをインストールして起動する

# nginxをインストールする
sudo apt-get でnginxをインストールします
# sudo service nginx start を開始します

インストールの確認

# インストールが完了したら、nginx -v を使用して確認します。nginx バージョン情報の出力がインストールが成功したことを示している場合は、nginx -v
# 出力がこのバージョン番号に似ている場合、インストールは完了です。nginx バージョン: nginx/1.14.0 (Ubuntu)

2. nginx設定ファイルを変更し、プロジェクトをデプロイする

nginx の設定を確認します。Linux システムの設定ファイルは通常、/etc ディレクトリの下の nginx ディレクトリに保存されます。
nginx設定ファイルは/etc/nginxフォルダにあります。/etc/nginx/sites-available/defaultファイルを開きます。
(nginx には複数の設定ファイルがあり、通常はこのファイルを変更して nginx を設定します)

接続ツールに付属のエディタを使用して開くか、vimを使用してください
プロジェクトを正常にデプロイするには、次の2か所を変更します。

nginxの設定が正しいか確認する

nginx を -t で実行します。

成功と表示されます。

nginx: 設定ファイル /etc/nginx/nginx.conf のテストが成功しました

nginx設定を読み込む

sudo nginx -s リロード

プロジェクトがクロスドメインAPIで構成されている場合は、ポイント3を参照してください。そうでない場合は、ポイント4に進んでプロジェクトにアクセスしてください。

3. プロキシAPIを構成する

一般的に、フロントエンドとバックエンドが分離されたプロジェクトはクロスドメインである必要がある。

または/etc/nginx/sites-available/defaultファイルを編集します

#vueプロジェクトのリクエストアドレスの前にはapiが必要です
#リクエストを開始するためのプロキシ設定。/api を含むすべてのアドレスが置き換えられ、proxy_pass location /api/ の下のアドレスに転送されます。{
 		書き換え ^/b/(.*)$ /$1 break;
 		proxy_pass http://www.ifyyf.com/; 	
	}

図のように

vue.config.jsのオリジナルのクロスドメインプロキシにプロキシすることができます

4. プロジェクトにアクセスする

プロジェクトにアクセスするには、サーバーのIPまたはドメイン名を開きます

5. セカンダリメニューの404問題

vimはデフォルトのファイルを開きます

try_ファイル$uri $uri/ =404;

変更後

try_ ファイル $uri $uri/ /index.html;

これで、vue プロジェクトのデプロイと Nginx でのプロキシの設定に関するこの記事は終了です。Nginx での vue プロジェクトのデプロイの詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。