Nginx静的Webサイトの展開とデバッグ
- 1）npmはjsvuecliを管理します
Npmはビルドパッケージを実行してデプロイします - 2）従来のhtml + cssは、従来の静的なjsを直接導入し、
直接コピーします。
静的ウェブサイトの動的デバッグ-開発段階
-
vuecliプロジェクトは、npm rundevでデバッグを開始できます
-
js開発をインポートする従来のモードでは、サーバーモードで直接デバッグすることはできません。ライブサーバーサーバーをインストールする必要があります。このサーバーはノードモジュールとして非常にシンプルです。
npm install -g live-server
live-server --port=6002
Nginxは、異なるドメイン名またはポートを持つ異なるディレクトリを転送するように仮想ホストを構成します（フロントエンドプロジェクト）
- 「ウェブサイトスペース」とも呼ばれる仮想ホスティングは、インターネット上で実行されている物理サーバーを複数の「仮想」サーバーに分割することです。仮想ホスト技術は、ネットワーク技術の応用と普及を大いに促進してきました。同時に、仮想ホストのレンタルサービスはインターネット時代の新しい経済形態になりました。
ポートに基づいて仮想ホストを構成する
（1）静的Webサイトをアップロードします：
nginx / html_xxxの下のフロントエンドの従来のプロジェクト
フロントエンドのvuecliプロジェクトはパッケージ化され、nginx / vuecli_xxxにアップロードされます
（2）Nginx構成ファイルを変更します：conf / nginx.conf
server {
listen 8081;
server_name localhost;
location / {
root html_xxx;
index index.html;
}
}
server {
listen 80;
server_name localhost;
location / {
root vuecli_xxx;
index index.html;
}
}
（3）アクセステスト：Nginxリロード
アドレスバーをリロードし、http：// localhost：82
アドレスバーを入力してhttp：// localhost：83を入力します
ドメイン名に基づいて仮想ホストを構成する
- ドメイン名とIPバインディング：
1つのドメイン名は1つのIPアドレスに対応し、1つのIPアドレスは複数のドメイン名でバインドできます。
ローカルテストでは、hostsファイル（C：\ Windows \ System32 \ drivers \ etc）
を変更して、ドメイン名とIPの間のマッピング関係を構成できます。ドメイン名とipの間の対応する関係が、hostsファイルで構成されている場合は、 dnsサーバーに移動する必要はありません。バインディングルールのIPドメイン名を指定して確認します。ドメイン名を指定したら、nginx構成ファイルを変更します。
ホスト
127.0.0.1 app_html_xxx
127.0.0.1 admin_vuecli_xxx
（1）静的Webサイトをアップロードします
。nginx/ html_xxxの下にあるフロントエンドの従来のプロジェクトで
、フロントエンドのvuecliプロジェクトをパッケージ化してアップロードします。 nginx / vuecli_xxxへ
（2）Nginx構成ファイルを変更します：conf / nginx.conf
server {
listen 80;
server_name app_html_xxx;
location / {
root html_xxx;
index index.html;
}
}
server {
listen 80;
server_name admin_vuecli_xxx;
location / {
root vuecli_xxx;
index index.html;
}
}
リバースプロキシとしてのNginx-異なるドメイン名またはアドレスが異なるサーバーに転送されます
- 静的プロジェクトは仮想ホストを介して複数のプロジェクトをデプロイできますが、動的Tomcat Webサイトは機能せず、nginxは解釈および実行できません。
リバースプロキシ構成
Nginx構成ファイルを変更します：conf / nginx.conf
server {
listen 80;
server_name java_web;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
proxy_pass http://127.0.0.1:6002; #访问域名为java_web都交给6002处理
index index.html index.htm;
}
}
server {
listen 80;
server_name admin.com;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
proxy_pass http://127.0.0.1:8082; #访问域名为 admin.com都交给8082处理
index index.html index.htm;
}
}
リバースプロキシのルールは、さまざまなドメイン名で区別できます。また、さまざまなURIで区別することもできます。
クロスドメインを解決します。
server {
listen 80;
server_name admin.mall.com;
location / {
# 检查域名后缀
if ($http_origin ~ \.mall\.com) {
add_header Access-Control-Allow-Origin $http_origin;
add_header Access-Control-Allow-Methods GET,POST,DELETE,PUT,OPTIONS;
add_header Access-Control-Allow-Credentials true;
add_header Access-Control-Allow-Headers DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,U-TOKEN;
add_header Access-Control-Max-Age 1728000;
}
# options请求不转给后端，直接返回204
# 第二个if会导致上面的add_header无效，这是nginx的问题，这里直接重复执行下
if ($request_method = OPTIONS) {
add_header Access-Control-Allow-Origin $http_origin;
add_header Access-Control-Allow-Methods GET,POST,DELETE,PUT,OPTIONS;
add_header Access-Control-Allow-Credentials true;
add_header Access-Control-Allow-Headers DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,U-TOKEN;
add_header Access-Control-Max-Age 1728000;
return 204;
}
# 其他请求代理到后端
proxy_set_header Host $host;
proxy_redirect off;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Scheme $scheme;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_pass http://localhost:8081;
}
}