Docker+Nginx を使ってシングルページアプリケーションをデプロイする

Docker+Nginx を使ってシングルページアプリケーションをデプロイする

開発から導入まで自分で行う

シングルページアプリケーションを開発する場合、ビルドを実行した後

npm 実行ビルド

dist ディレクトリに index.html が生成されます。この index.html をサーバーにデプロイするにはどうすればよいでしょうか?

ディレクトリ構造

  • dist/: フロントエンドが構築された後の静的ファイル
  • docker/: イメージに必要な設定ファイル

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

要約する

現在の展開方法は比較的シンプルです。基本的なイメージとイメージリポジトリの使用は後で追加されます。まずは今後の方向性を検討してみましょう。

以下もご興味があるかもしれません:
  • DockerでNginx+PHP+MySQL環境を構築し、WordPressをデプロイする
  • Dockerでnginxをデプロイし、設定ファイルを変更する方法
  • 初心者のための Docker と NGINX の導入手順の詳細
  • 複数のプロジェクトをデプロイする Docker nginx の例
  • Docker デプロイメント nginx 実装プロセスのグラフィックとテキストによる詳細な説明
  • DockerはNginxをデプロイし、リバースプロキシを構成する
  • Docker Nginxコンテナの制作と展開の実装方法
  • Docker に Nginx をデプロイする方法

<<:  MySQL5.7.03 上位バージョンから MySQL 5.7.17 への置き換えインストール プロセスと見つかった問題の解決策

>>:  Nodejs エラー処理プロセス記録

推薦する

CentOS7 から CentOS8 にアップグレードする方法 (詳細な手順)

この記事では、具体的な例を使用して、CentOS 7 から CentOS 8 にアップグレードする方...

MySQL データ操作 - DML ステートメントの使用

例示するDML(データ操作言語)とは、データベースの追加、削除、変更を行うための操作命令のことです。...

Nginx の Docker インストールの問題とエラー分析

質問: DockerにNginxをインストールするときに次のエラーが発生しました: docker: ...

CentOS8でのnmcliの使い方の詳しい説明

RHEL8/CentOS8 に基づく一般的な nmcli コマンド # IP を表示する (ifco...

MySql で正規表現クエリを使用する方法

正規表現は、特定のパターンに一致するテキストを検索および置換するためによく使用されます。たとえば、テ...

Dockerの基本的なネットワーク構成の詳細な説明

外部アクセスポートをランダムにマップする -P フラグを使用すると、Docker は 49000 か...

ビューポートの基本原理と詳細な使用方法

1. ビューポートの概要モバイル ブラウザは通常、画面よりも幅の広い仮想ウィンドウにページをレンダリ...

MySQL マスタースレーブレプリケーションの原理と注意点

前面に書かれた最近、Mycat で特別なトピックを書いています。最近、多くの友人が面接に出かけている...

vscode dockerプラグインのdocker.socket権限問題を解決する

解決策: システム内のすべての .vscode 関連プロセスを終了します (または、remote-s...

Reactイベントバインディングの詳細な説明

1. 何ですかreactアプリケーションでは、イベント名はキャメルケース形式で記述されます。たとえ...

div タグ内の要素の margin-top が無効である場合の解決策

タイトル通りです。その質問は非常に奇妙です。要素の親タグはdivで、幅や高さなどの属性は設定されてい...

Vue.js スタイルレイアウト Flutter ビジネス開発共通スキル

シャドウスタイルにおけるフラッターとCSSの対応UIによって指定されたCSSスタイル 幅: 75px...

ウェブサイトをIE6、7、8、9の古いバージョンに対応させるための3つのソリューション

Microsoft は後からブラウザの研究開発に力を入れてきましたが、実際のところ、最新の IE ブ...

Node.js のワーカー スレッドの詳細な理解

目次概要Node.js における CPU バウンド アプリケーションの歴史CPUを集中的に使用する操...

html、xhtml、xmlの違い

開発動向: html (ハイパーテキスト マークアップ言語) - xhtml (拡張ハイパーテキスト...