How to build reliable containerized applications with React and Kubernetes

How to use React and Kubernetes to build reliable containerized applications

With the rapid development of cloud native technology, containerized applications have become a hot trend in software development today. As a popular front-end framework, React's flexibility and efficiency make it the first choice for many developers. This article will introduce how to build reliable containerized applications using React and Kubernetes, and provide some specific code examples.

1. Creating a React application
   First, we need to create a basic React application. Create React App can be used to initialize a new React project. Use the following command:

   npx create-react-app my-app
   cd my-app
   npm start

   Copy after login

This will create a new project called my-app and start the local development server. After ensuring that the project can run normally, we can continue with the next steps.

2. Writing a Dockerfile
   In order to package a React application into a container, we need to create a Dockerfile. In the root directory of the project, create a file called Dockerfile and add the following content to the file:

   # 使用Node镜像作为基础镜像
   FROM node:14-alpine
   
   # 将工作目录设置为/app
   WORKDIR /app
   
   # 将package.json和package-lock.json复制到容器中
   COPY package*.json ./
   
   # 安装应用的依赖
   RUN npm install
   
   # 将项目文件复制到容器中
   COPY . ./
   
   # 构建React应用
   RUN npm run build
   
   # 在容器中运行React应用
   CMD ["npm", "start"]

   Copy after login

This Dockerfile defines how to build and run the image of the React application . It uses an Alpine image based on Node, first installs the project's dependencies, then copies the project files to the container, and runs the React application in the container.

3. Build Docker image
   In the root directory of the project, use the following command to build the Docker image:

   docker build -t my-react-app .

   Copy after login

   This will build a named Docker image based on the definition of the Dockerfile file. Is the mirror of my-react-app.

4. Create Kubernetes deployment file
   Next, we need to create a Kubernetes deployment file to deploy our application. In the root directory of the project, create a file called deployment.yaml and add the following content to the file:

   apiVersion: apps/v1
   kind: Deployment
   metadata:
     name: my-react-app
     labels:
    app: my-react-app
   spec:
     replicas: 1
     selector:
    matchLabels:
      app: my-react-app
     template:
    metadata:
      labels:
        app: my-react-app
    spec:
      containers:
      - name: my-react-app
        image: my-react-app
        ports:
        - containerPort: 3000

   Copy after login

This file defines a file called my-react- To deploy the app, use the my-react-app image you just built and expose it to port 3000.

5. Deploy the application to the Kubernetes cluster
   In the command line, use the following command to deploy the application to the Kubernetes cluster:

   kubectl apply -f deployment.yaml

   Copy after login

   This will be based on the deployment.yaml file Definition, create a deployment named my-react-app in the Kubernetes cluster.

6. Verify that the app is running properly
   You can check that the app is running properly using the following command:

   kubectl get pods

   Copy after login

   If everything is fine, you should see a message named my- react-app's Pod is running.

7. Accessing the application
   Finally, we can access our application through the service. In the root directory of the project, create a file named service.yaml and add the following content to the file:

   apiVersion: v1
   kind: Service
   metadata:
     name: my-react-app-service
   spec:
     selector:
    app: my-react-app
     type: LoadBalancer
     ports:
    - protocol: TCP
      port: 80
      targetPort: 3000

   Copy after login

   This file defines a service named my-react-app-service, External requests can be forwarded to our application through the load balancer.

Create the service using the following command:

kubectl apply -f service.yaml

Run the following command to get the external IP address of the service:

kubectl get services

Finally, you can open the application using a browser ：

http://<EXTERNAL-IP>

Through the above steps, we have successfully built a reliable containerized application using React and Kubernetes. React provides powerful front-end development capabilities, while Kubernetes provides reliable container orchestration and operating environment. Their combination allows us to easily build, deploy and manage containerized applications.

I hope this article will be helpful to you, and also encourage you to continue to study and explore the development of cloud native technology in depth.

The above is the detailed content of How to build reliable containerized applications with React and Kubernetes. For more information, please follow other related articles on the PHP Chinese website!