超シンプルなフロントエンド静的リソース サーバーのデプロイメント -- nginx
説明する
- この記事は、最も単純かつ最速の方法を使用して、フロントエンド静的リソースのデプロイ要件を解決することを目的としています。
- 会社は通常、多くの静的リソースをデプロイするために Tomcat を使用します。今年の 3 月にサーバーを購入しました。残業で忙しく、まだ使い始めていません。今日使い始めました。
前提
サーバーが必要です~~
購入後、以下のように開きます
ステップ 1: サーバーに接続する
- パブリックIPを見つける
- パスワードを変更する
- FinalShell をダウンロードし、インストールして開きます
- FinalShell
名を開いて、好きなものを入力できます~~ サーバーの名前を自分で作成します。これは、将来のリンクの使用に便利です。
- ダブルクリックして開きます。リンクは成功しました。
ステップ 2: Nginx をインストールする
- nginx 圧縮パッケージをダウンロードします。nginx
をダウンロードするにはクリックしてください
- インストールする必要があるパスを見つけて、ダウンロードしたばかりの圧縮パッケージをそのパスにドラッグします。
3. ファイルを解凍し、ディレクトリを更新します。
tar -zxvf nginx-1.18.0.tar.gz
4. 依存関係をインストールする
yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel
5. ディレクトリに入り、コマンドを実行します。
cd nginx-1.18.0
./configure
make install
6. nginx.conf の設定
この項目は要件に応じて操作することも、設定しないこともでき、デフォルトのポート番号が使用されます。
# 打开配置文件
vi /usr/local/nginx/conf/nginx.conf
下矢印を押したままにしてポート番号を探し、ポート番号を変更します
ファイルを編集して Linux 上に保存します
- cd ファイルのディレクトリに移動します
- vi 編集するファイルの名前を指定し、通常モードに入り、ファイルの内容を表示します。
- 「i」を入力して編集モードに入り、テキストの編集を開始します
- 編集後、ESC キーを押して通常モードに戻ります。
- 通常モードで、次のように入力してコマンドモードに入ります。
- コマンドモードで「wq」と入力し、保存して終了します。
7.nginxを起動する
/usr/local/nginx/sbin/nginx -s reload
8. nginxプロセスが起動しているか確認する
ps -ef | grep nginx
備考: 起動に失敗した場合は、表示すると以下の1つしかありませんので、
これを使用して起動できますリロードではなく、
nginx
./usr/local/nginx/sbin/nginxを起動してください
ステップ 3: テスト
- サーバー管理インターフェイスに入り、セキュリティ グループを構成します。
- テストインターフェイスへのアクセス
ステップ 4: 他のプロジェクトをデプロイする
- サーバーの静的リソース ディレクトリを入力し、パッケージ化されたプロジェクトをそこにドラッグします。
ディレクトリ アドレス: /usr/local/nginx/html
2. アクセス
Nginx.conf 設定に関する注意事項
1. フロントエンドルーティングハッシュとヒストリーデプロイメントの違い
ルーティング機能:
1. 現在のページの状態を記録します (現在のページの URL を保存または共有します。URL を再度開いても、Web ページの状態は引き続き保存 (共有) されます)。 2. 前方および後方関数を使用します。ブラウザ（戻るボタンをクリックするなど
、ページをajax更新ページ前の状態に戻すことができ、URLも前の状態に戻ります）
ハッシュ モードとヒストリー モードは次の機能を実現します。
1. URL を変更し、ブラウザがサーバーにリクエストを送信しないようにします;
2. URL の変更を監視します;
3. URL アドレスを傍受し、ルーティング ルールと一致するために必要な情報を解析します。
ハッシュ モード - # を含む URL
機能:
ハッシュ値の変更により、ブラウザはサーバーにリクエストを送信しません。また、ハッシュの変更によりページがリロードされません。ハッシュの変更により、hashchange イベントがトリガーされます。このイベントは、次の場合にも制御できます
。ブラウザが前進したり後退したりする
ハッシュは本来ページの位置決めに使われる ルーティングに使うと本来のアンカー関数では
ハッシュが使えず、パラメータの受け渡しはURLベースになる 複雑なデータを渡したい場合は音量制限。
履歴モード - URL の後に # を付けない
特徴:
履歴モードでは、URL にパラメータを設定できるだけでなく、特定のオブジェクトにデータを保存することもできます。
履歴 - HTML5 履歴インターフェイスの新しい PushState() メソッドと replaceState() メソッドの使用は、
IE8 より前のバージョンをサポートしていません。
導入要件
ここでは、デプロイ パス /usr/local/nginx/html を例として取り上げます:
1. 1 つの nginx は 1 つの静的リソースをデプロイしますか、それとも複数の静的リソースをデプロイしますか?
2. パッケージ化後のルーティングにはハッシュ モードとヒストリー モードを使用する必要がありますか?
ハッシュモードでパッケージ化した後、nginxにデプロイします
- あまり多くの設定を追加せずに単一のプロジェクトをデプロイします。ここに静的リソースを配置するだけです。IP + ポート番号を使用してアクセスできます。
- 複数のプロジェクトを 1 つの nginx にデプロイし、IP+ポート番号+フォルダー名でアクセス
備考 (以下は発生した問題の記録の一部です)
- 同一サーバー上でのハッシュ ルーティング マルチプロジェクト デプロイメントのリンク アクセスの問題について
IIS を例として、index.html をルート ディレクトリに配置し、別のテスト プロジェクトを追加する場合、最初のステップは
、 Index.html A TEST フォルダの隣に新しいものを追加します。
ステップ 2、TEST フォルダを開き、その中に新しいプロジェクトを置きます。
ステップ 3、http://10.10.10.10:8088/TEST/#/ にアクセスします
。 注: 後に TEST を追加しないでください。 #、そうでない場合は、外層のindex.htmlにジャンプします~~
面倒な場合は、フォルダを使用してすべてをフレーム化し、すべての項目にフォルダ名を追加すると、この問題を回避できます。
履歴メソッドを使用してパッケージ化します (一般的に、URL の後に # は付きません)。
- ここでnginxを設定する必要があります
location / {
try_files $uri $uri/ /index.html;
}
- try_files 現在のブラウザによって要求されたページへのアクセスを試みます
- $uri 現在要求されているパスが見つかった場合は返されます。
- $uri/ 現在のリクエストのパスを検索し、次のファイルを見つけて、見つかった場合は返します。
- /index.html 保証された解決策: 上記 2 つが見つからない場合は、index.html に直接戻ります。
- root は、/ に対応する単一ページの静的リソース ディレクトリを指定します。
2. nginx プロキシは 1M を超えるファイルをアップロードできません
- 解決するには、proxy_pass の場所に次の 2 行を追加します。
client_max_body_size 512m;
client_body_buffer_size 10m;
3.位置一致ルール
-
location ~ url {…} は location url {…} よりも優先されます。【部分一致の場合】
-
location ~ url {...} は通常の一致です。URL が通常のルールを満たす限り、関連する一致セグメントに入ります。
-
location url {…} は最初の一致です。url の最初の部分が location で指定された URL と一致する限り、関連する一致セグメントに入ります。[この修飾子なしルール、URL は正規表現をサポートしていないことに注意してください]
エピローグ
このチュートリアルは、プロジェクトのデプロイメントを迅速に完了することを目的としており、他の構成項目はリストされていません...後で時間があるときに構成記事を追加します~~修正が必要な記事を指摘してください
~
より良い方法を提案して、一緒に進歩してください~~