Nginx を使用したフロントエンド アプリケーションの Docker 化によるシームレスなデプロイメント

導入

ほとんどの場合、フロントエンド アプリケーションをデプロイするには、静的アセットの提供をバックエンド API から分離する必要があります。これに対する良いアプローチは、Nginx をリバース プロキシとして、Web サーバーを Docker と組み合わせてコンテナ化することです。このガイドでは、Nginx と Docker を使用してフロントエンド アプリケーションをデプロイする方法のプロセスを説明します。

前提条件

Nginx と Docker を使用してフロントエンド アプリケーションをデプロイする方法
はじめに
フロントエンド アプリケーションを効率的にデプロイするには、多くの場合、静的アセットの提供をバックエンド API から分離する必要があります。強力なアプローチは、リバース プロキシとしての Nginx と、コンテナ化のための Web サーバーと Docker を組み合わせることです。このガイドでは、Nginx と Docker を使用してフロントエンド アプリケーションをデプロイするプロセスについて説明します。

前提条件
このガイドに従うには、以下が必要です:

• React (または任意のフロントエンド フレームワーク) の基本的な知識。
• Docker および Nginx についての知識。

アプリケーションのセットアップ

明確なプロジェクト構造により、展開が簡素化されます。必要なファイルをすべてフォルダーに配置して、Docker イメージを構築します。これらのファイルには次のものが含まれている必要があります:

• build/ フォルダー (運用準備が整った静的ファイルが含まれます)。
• Dockerfile (イメージの構築方法を定義します)。
• nginx.conf (カスタム Nginx 構成)。
• sites-enabled/ (オプションの追加の Nginx 構成).

Nginx 構成の詳細な説明については、この

を参照してください。

React の向上: Nginx のパワーを解放して簡単にデプロイする

Amit Kumar Rout ・ 2023 年 12 月 9 日

#javascript ＃チュートリアル #反応する #nginx

手順:

1. アプリケーションの実稼働バージョンをビルドします:

npm run build

このコマンドは、最適化された静的ファイルを含む build/ ディレクトリを作成します。

1. Dockerfile を作成します: 次の Dockerfile を作成してコンテナを定義します。

FROM nginx:latest

# Clean the default HTML directory and remove default nginx.conf
RUN rm -rf /usr/share/nginx/html/*
RUN rm /etc/nginx/nginx.conf

# Copy custom Nginx configuration
COPY nginx.conf /etc/nginx/

# Copy the production build files into Nginx's HTML directory
COPY build/ /usr/share/nginx/html/

# Copy additional Nginx configurations (if any)
COPY ./sites-enabled/* /etc/nginx/sites-enabled/

# Expose port 80
EXPOSE 80

# Start Nginx
CMD ["nginx", "-g", "daemon off;"]

Docker イメージの構築

ファイルの準備ができたら、Docker イメージをビルドします。

docker build -t my-app-img:prod .

別の VM にデプロイする場合は、イメージを .tar ファイルとしてパッケージ化できます。

docker save my-app-img > my-app-img.tar

Docker イメージの実行

オプション 1: イメージを直接実行する

1. .tar ファイルから Docker イメージをロードします (システム間で転送する場合)。

cat my-app-img.tar | docker load

1. コンテナを実行します。

docker run -itd -p 80:80 --name my-app my-app-img

これによりコンテナが起動され、ポート 80 で公開されます。

オプション 2: Docker Compose の実行

docker-compose.yml ファイルの作成:

version: "3"
services:
  web:
    container_name: my_app
    image: my-app-img
    ports:
      - "80:80"
    volumes:
      - ./template:/etc/nginx/templates/
    environment:
      NGINX_ENVSUBST_OUTPUT_DIR: /etc/nginx/sites-enabled

次に、コンテナを起動します。

docker-compose up -d

結論

Nginx と Docker を使用してフロントエンド アプリケーションをデプロイすると、強力でスケーラブルなソリューションが得られます。これは、静的アセットをバックエンド API から分離し、最高のパフォーマンスを提供するためです。次のようなニーズに合わせて Nginx 構成をカスタマイズします。

• HTTPS サポート用に SSL/TLS を追加します。
• 高パフォーマンスを実現するにはキャッシュを有効にしてください。

この設定により、フロントエンド アプリケーションは実稼働環境で信頼できるものになります。

プロセスを改善するための提案がある場合は、コメント欄に残してください。この投稿が役に立ったと思われた場合は、「いいね」を押して共有してください。

コーディングを楽しんでください!

以上がNginx を使用したフロントエンド アプリケーションの Docker 化によるシームレスなデプロイメントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。