ホームページ >ウェブフロントエンド >jsチュートリアル >Nginx を使用したフロントエンド アプリケーションの Docker 化によるシームレスなデプロイメント
ほとんどの場合、フロントエンド アプリケーションをデプロイするには、静的アセットの提供をバックエンド API から分離する必要があります。これに対する良いアプローチは、Nginx をリバース プロキシとして、Web サーバーを Docker と組み合わせてコンテナ化することです。このガイドでは、Nginx と Docker を使用してフロントエンド アプリケーションをデプロイする方法のプロセスを説明します。
Nginx と Docker を使用してフロントエンド アプリケーションをデプロイする方法
はじめに
フロントエンド アプリケーションを効率的にデプロイするには、多くの場合、静的アセットの提供をバックエンド API から分離する必要があります。強力なアプローチは、リバース プロキシとしての Nginx と、コンテナ化のための Web サーバーと Docker を組み合わせることです。このガイドでは、Nginx と Docker を使用してフロントエンド アプリケーションをデプロイするプロセスについて説明します。
前提条件
このガイドに従うには、以下が必要です:
明確なプロジェクト構造により、展開が簡素化されます。必要なファイルをすべてフォルダーに配置して、Docker イメージを構築します。これらのファイルには次のものが含まれている必要があります:
Nginx 構成の詳細な説明については、この
を参照してください。React の向上: Nginx のパワーを解放して簡単にデプロイする
Amit Kumar Rout ・ 2023 年 12 月 9 日
#javascript #チュートリアル #反応する #nginx
npm run build
このコマンドは、最適化された静的ファイルを含む build/ ディレクトリを作成します。
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 build -t my-app-img:prod .
別の VM にデプロイする場合は、イメージを .tar ファイルとしてパッケージ化できます。
docker save my-app-img > my-app-img.tar
cat my-app-img.tar | docker load
docker run -itd -p 80:80 --name my-app my-app-img
これによりコンテナが起動され、ポート 80 で公開されます。
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 構成をカスタマイズします。
この設定により、フロントエンド アプリケーションは実稼働環境で信頼できるものになります。
プロセスを改善するための提案がある場合は、コメント欄に残してください。この投稿が役に立ったと思われた場合は、「いいね」を押して共有してください。
コーディングを楽しんでください!
以上がNginx を使用したフロントエンド アプリケーションの Docker 化によるシームレスなデプロイメントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。