開発から導入まで自分で行う シングルページアプリケーションを開発する場合、ビルドを実行した後 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 への置き換えインストール プロセスと見つかった問題の解決策
特定のインターフェースをリクエストするときに、指定されたテキスト文字列または JSON 文字列を返す...
目次1. 準備2. グローバルコンポーネント quill-editor を定義する1. テンプレート...
ページ内にはjs、cssなどの外部ファイルが導入されており、外部ファイルのエンコードが現在のページフ...
Raspberry Pi 3B に 64 ビット アプリケーション (64 ビット JDK など) ...
序文最近、私の住居の電力事情が不安定で、突然の停電が頻繁に起こります。ノートパソコンを持っているので...
序文この記事は主に、MYSQL でランキングを実現し、指定ユーザーランキング関数 (並列ランキング関...
目次繰り返しレンダリングループを避ける副作用の除去についてReact16.8 の新しい useEff...
最近、「フットボール ナビゲーション」Web サイトに取り組んでいるときに、上部の固定ナビゲーション...
製品デザインのプロセスにおいて、デザイナーは常に写真を非常に美しくすることを好みます。仮想ページのコ...
目次1. コンテナ相互接続を実現するためにネットワークをカスタマイズする2. ネットワーク接続1. ...
では、早速レンダリングを見てみましょう。 コア コードはtransition: cubic-bezi...
効果: タイトルには独自のシリアル番号があり、コードブロックには配色があり、コードブロックの左上隅に...
この記事では、MySQL 8.0 のユーザーとロールの管理について例を挙げて説明します。ご参考までに...
使用 <div id="アプリ"> <router-link ...
1. Dockerネットワークカードを作成する [root@i ~]# brctl addbr d...