React と Docker Compose を使用して複雑なフロントエンドおよびバックエンド アプリケーションをデプロイする方法

React と Docker Compose を使用して複雑なフロントエンドおよびバックエンド アプリケーションをデプロイする方法

概要
最新のソフトウェア開発では、コンテナ化テクノロジを使用してアプリケーションをデプロイします。が主流となり、推奨される実践となっています。その中でも、Docker は人気のあるコンテナ化されたデプロイメント ツールであり、React はユーザー インターフェイスの構築に使用される強力な JavaScript ライブラリです。この記事では、React と Docker Compose を使用して、複雑なフロントエンドおよびバックエンド アプリケーションをデプロイする方法を紹介します。

1. 準備
開始する前に、次の準備が必要です:

1. Docker と Docker Compose をインストールする
   Docker 公式 Web サイト (https:/ /www.docker.com/get-started) を参照して、Docker と Docker Compose をダウンロードしてインストールします。

2. React アプリケーションの作成
   ターミナルを開き、次のコマンドを実行して React アプリケーションを作成します:

   npx create-react-app my-app
   cd my-app

2. Dockerfile を作成します
プロジェクト内で、ルート ディレクトリに Dockerfile という名前のファイルを作成し、次の内容を追加します:

# 基于Node镜像构建
FROM node:14-alpine

# 创建工作目录
WORKDIR /app

# 安装项目依赖
COPY package*.json ./
RUN npm install

# 拷贝项目代码
COPY . .

# 构建生产环境代码
RUN npm run build

# 暴露容器端口
EXPOSE 80

# 启动应用
CMD ["npm", "start"]

3. docker-compose.yml ファイルを作成します。プロジェクトのルート ディレクトリ ファイルを開き、次の内容を追加します。

version: "3"
services:
  web:
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - 3000:80
    volumes:
      - ./src:/app/src
      - ./public:/app/public
  backend:
    image: your-backend-image
    ports:
      - 8080:8080

上記の構成では、2 つのサービス

web と backend を定義しました。 web サービスは React フロントエンド アプリケーションであり、backend はバックエンド アプリケーションです。 your-backend-image を独自のバックエンド アプリケーション イメージ名に置き換えることに注意してください。

4. アプリケーションのビルドと開始

1. React フロントエンド アプリケーション イメージのビルド

   次のコマンドを実行して、React フロントエンド アプリケーション イメージをビルドします。
   

   docker-compose build

2. フロントエンド アプリケーションとバックエンド アプリケーションを開始する

   次のコマンドを実行して、フロントエンド アプリケーションとバックエンド アプリケーションを開始します:
   

   docker-compose up

この時点で、React フロントエンド アプリケーションとバックエンド アプリケーションを Docker コンテナーに一緒にデプロイすることに成功しました。 http://localhost:3000 にアクセスすると React アプリケーション インターフェイスを表示でき、http://localhost:8080 にアクセスするとバックエンド アプリケーションにアクセスできます。

5. 継続的インテグレーションとデプロイメント

継続的インテグレーションとデプロイメントを実現するには、Jenkins、GitLab CI などの CI/CD ツールを使用できます。ビルドとデプロイのステップを CI/CD パイプラインに追加して、コードが変更されるたびに最新のアプリケーションを自動的にビルドしてデプロイできます。

6. 概要

この記事では、React と Docker Compose を使用して複雑なフロントエンドおよびバックエンド アプリケーションをデプロイする方法を紹介します。コンテナ化された展開を通じて、環境構成を簡素化し、アプリケーションの移植性と拡張性を向上させることができます。この記事の紹介を通じて、フロントエンドとバックエンドのアプリケーションを正常にデプロイし、React と Docker Compose についての理解を深めていただければ幸いです。申請がスムーズにオンライン化されることを願っています。

以上がReact と Docker Compose を使用して複雑なフロントエンドおよびバックエンド アプリケーションをデプロイする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。