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 エラー処理プロセス記録

推薦する

テキストまたはJSONを返すようにnginxを設定する方法

特定のインターフェースをリクエストするときに、指定されたテキスト文字列または JSON 文字列を返す...

Vueはvue-quill-editorリッチテキストエディタを使用し、画像をサーバーにアップロードします。

目次1. 準備2. グローバルコンポーネント quill-editor を定義する1. テンプレート...

外部ファイル(js/vbs/css)をインポートするときに文字化けを回避する方法

ページ内にはjs、cssなどの外部ファイルが導入されており、外部ファイルのエンコードが現在のページフ...

Raspberry Pi 3B+ に 64 ビット Ubuntu システムと Docker ツールをインストールする詳細な手順

Raspberry Pi 3B に 64 ビット アプリケーション (64 ビット JDK など) ...

バッテリー残量が少なくなったときに Linux を自動シャットダウンする方法

序文最近、私の住居の電力事情が不安定で、突然の停電が頻繁に起こります。ノートパソコンを持っているので...

MYSQL は、指定されたユーザーのランキングとクエリを実装します。ランキング関数 (並列ランキング関数) のサンプルコード

序文この記事は主に、MYSQL でランキングを実現し、指定ユーザーランキング関数 (並列ランキング関...

React useEffect の理解と使用

目次繰り返しレンダリングループを避ける副作用の除去についてReact16.8 の新しい useEff...

ウェブページの内部アンカーポイントを実現するための純粋なCSSの上下オフセットコード例

最近、「フットボール ナビゲーション」Web サイトに取り組んでいるときに、上部の固定ナビゲーション...

デザインにおいて無視できないインタラクティブデザインにおける製品状態の分析

製品デザインのプロセスにおいて、デザイナーは常に写真を非常に美しくすることを好みます。仮想ページのコ...

Dockerカスタムネットワーク実装

目次1. コンテナ相互接続を実現するためにネットワークをカスタマイズする2. ネットワーク接続1. ...

CSS3+ベジェ曲線でスケーラブルな入力検索ボックス効果を実現

では、早速レンダリングを見てみましょう。 コア コードはtransition: cubic-bezi...

Typora コードブロックのカラーマッチングとタイトルシリアル番号実装コード

効果: タイトルには独自のシリアル番号があり、コードブロックには配色があり、コードブロックの左上隅に...

MySQL 8.0 のユーザーとロールの管理原則と使用方法の詳細

この記事では、MySQL 8.0 のユーザーとロールの管理について例を挙げて説明します。ご参考までに...

Vue router-viewとrouter-linkの実装原理

使用 <div id="アプリ"> <router-link ...