開発から導入まで自分で行う シングルページアプリケーションを開発する場合、ビルドを実行した後 npm 実行ビルド dist ディレクトリに index.html が生成されます。この index.html をサーバーにデプロイするにはどうすればよいでしょうか? ディレクトリ構造
Nginx を設定する いくつかの設定について説明します。まず、Gzip はリソースを圧縮して帯域幅を節約し、ブラウザの読み込み速度を向上させます。 Webpackはすでにビルド時に.gz圧縮パッケージを生成することをサポートしていますが、Nginx経由でも有効にすることができます。 gzip オン; gzip_disable "msie6"; # 0 ~ 9 レベル。レベルが高いほど、圧縮されたパッケージは小さくなりますが、サーバーのパフォーマンス要件は高くなります。gzip_comp_level 9; gzip_min_length 100; # Gzip は圧縮された画像をサポートしていないため、フロントエンド リソースのみを圧縮する必要があります gzip_types text/css application/javascript; 次に、APIをバックエンドサービスにリバースプロキシするサービスポートの構成があります。 サーバー{ 8080を聴く; サーバー名 www.frontend.com; ルート /usr/share/nginx/html/; 位置 / { インデックス index.html index.htm; try_files $uri $uri/ /index.html; # 最新の CSS および JS リソースが参照されるように HTML のキャッシュを無効にします。expires -1; } 場所 /api/v1 { proxy_pass http://backend.com; } } 完全な構成は次のようになります ワーカープロセス 1; イベント { ワーカー接続 1024; } http { ## # 基本設定 ## ファイル送信オン; tcp_nopush オン; tcp_nodelay オン; キープアライブタイムアウト65; タイプハッシュの最大サイズは2048です。 /etc/nginx/mime.types を含めます。 デフォルトタイプ アプリケーション/オクテットストリーム; ## # ログ設定 ## アクセスログ /var/log/nginx/access.log; エラーログ /var/log/nginx/error.log; ## # Gzip設定 ## gzip オン; gzip_disable "msie6"; gzip_comp_レベル9; gzip_min_length 100; gzip_types テキスト/css アプリケーション/javascript; サーバー{ 8080を聴く; サーバー名 www.frontend.com; ルート /usr/share/nginx/html/; 位置 / { インデックス index.html index.htm; try_files $uri $uri/ /index.html; 有効期限 -1; } 場所 /api/v1 { proxy_pass http://backend.com; } } } Dockerの設定 これは簡単なものです。基本イメージに基づいて、書き込んだ nginx.conf と index.html をイメージにコピーします。 nginx:alpineから nginx.conf をコピー /etc/nginx/nginx.conf /usr/share/nginx/html をコピーする Makefile の作成 上記の準備が完了したら、イメージのパッケージ化を実行するコマンドを記述できます。 まずイメージに名前とポート番号を付けます アプリケーション名 = spa_nginx_docker ポート = 8080 ビルドによるイメージのパッケージ化 建てる: docker/Dockerfile をコピーします。 docker/nginx.conf をコピーします。 docker build -t $(APP_NAME) を実行します。 rm Dockerファイル nginx.conf を消去する デプロイを通じてイメージを起動する 展開する: docker run -d -it -p=$(PORT):$(PORT) --name="$(APP_NAME)" $(APP_NAME) 最後に、画像を停止してクリーンアップするための停止があります。 停止: docker stop $(APP_NAME) docker rm $(アプリ名) docker rmi $(アプリ名) 完全な構成は次のようになります アプリケーション名 = spa_nginx_docker ポート = 8080 建てる: docker/Dockerfile を参照します。 docker/nginx.conf をコピーします。 docker build -t $(APP_NAME) を実行します。 rm Dockerファイル nginx.conf を消去する 展開する: docker run -d -it -p=$(PORT):$(PORT) --name="$(APP_NAME)" $(APP_NAME) 停止: docker stop $(APP_NAME) docker rm $(アプリ名) docker rmi $(アプリ名) 完全なコマンドは次のようになります。 # 静的リソースのビルド npm run build # イメージのパッケージ化 make build # 停止して古いイメージを削除します(最初は無視できます) 停止する # イメージの起動 make deploy 要約する 現在の展開方法は比較的シンプルです。基本的なイメージとイメージリポジトリの使用は後で追加されます。まずは今後の方向性を検討してみましょう。 以下もご興味があるかもしれません:
|
<<: MySQL5.7.03 上位バージョンから MySQL 5.7.17 への置き換えインストール プロセスと見つかった問題の解決策
この記事では、具体的な例を使用して、CentOS 7 から CentOS 8 にアップグレードする方...
例示するDML(データ操作言語)とは、データベースの追加、削除、変更を行うための操作命令のことです。...
質問: DockerにNginxをインストールするときに次のエラーが発生しました: docker: ...
RHEL8/CentOS8 に基づく一般的な nmcli コマンド # IP を表示する (ifco...
正規表現は、特定のパターンに一致するテキストを検索および置換するためによく使用されます。たとえば、テ...
外部アクセスポートをランダムにマップする -P フラグを使用すると、Docker は 49000 か...
1. ビューポートの概要モバイル ブラウザは通常、画面よりも幅の広い仮想ウィンドウにページをレンダリ...
前面に書かれた最近、Mycat で特別なトピックを書いています。最近、多くの友人が面接に出かけている...
解決策: システム内のすべての .vscode 関連プロセスを終了します (または、remote-s...
1. 何ですかreactアプリケーションでは、イベント名はキャメルケース形式で記述されます。たとえ...
タイトル通りです。その質問は非常に奇妙です。要素の親タグはdivで、幅や高さなどの属性は設定されてい...
シャドウスタイルにおけるフラッターとCSSの対応UIによって指定されたCSSスタイル 幅: 75px...
Microsoft は後からブラウザの研究開発に力を入れてきましたが、実際のところ、最新の IE ブ...
目次概要Node.js における CPU バウンド アプリケーションの歴史CPUを集中的に使用する操...
開発動向: html (ハイパーテキスト マークアップ言語) - xhtml (拡張ハイパーテキスト...