"यदि कोई कर्मचारी अपना काम अच्छी तरह से करना चाहता है, तो उसे पहले अपने औजारों को तेज करना होगा।" - कन्फ्यूशियस, "द एनालेक्ट्स ऑफ कन्फ्यूशियस। लू लिंगगोंग"
मुखपृष्ठ > प्रोग्रामिंग > किसी रिएक्ट एप्लिकेशन को डॉकराइज़ कैसे करें

किसी रिएक्ट एप्लिकेशन को डॉकराइज़ कैसे करें

2024-08-06 को प्रकाशित
ब्राउज़ करें:767

How to Dockerize a React Application

किसी रिएक्ट एप्लिकेशन को डॉकराइज़ कैसे करें

रिएक्ट एप्लिकेशन को डॉकराइज़ करना आपके विकास वर्कफ़्लो को सुव्यवस्थित कर सकता है, विकास के विभिन्न चरणों में सुसंगत वातावरण सुनिश्चित कर सकता है और तैनाती प्रक्रियाओं को सरल बना सकता है। यह मार्गदर्शिका आपको डॉकर वातावरण स्थापित करने से लेकर डॉकर छवियां बनाने और चलाने तक, रिएक्ट एप्लिकेशन को डॉकराइज़ करने के चरणों के बारे में बताएगी।

आवश्यक शर्तें

  1. डॉकर: सुनिश्चित करें कि डॉकर आपकी मशीन पर स्थापित है। आप इसे डॉकर की आधिकारिक वेबसाइट से डाउनलोड कर सकते हैं।

  2. रिएक्ट एप्लिकेशन: आपके पास create-react-app या किसी अन्य विधि का उपयोग करके बनाया गया एक रिएक्ट एप्लिकेशन होना चाहिए। यदि आपके पास एक नहीं है, तो आप create-react-app का उपयोग करके एक बुनियादी ऐप बना सकते हैं।

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

चरण 1: एक डॉकरफ़ाइल बनाएं

डॉकरफ़ाइल एक स्क्रिप्ट है जिसमें आपके एप्लिकेशन के लिए डॉकर छवि बनाने के तरीके पर निर्देशों की एक श्रृंखला शामिल है। अपने रिएक्ट एप्लिकेशन की रूट डायरेक्टरी में, निम्नलिखित सामग्री के साथ Dockerfile नाम की एक फ़ाइल बनाएं:

# Use an official node runtime as a parent image
FROM node:16-alpine

# Set the working directory
WORKDIR /app

# Copy the package.json and package-lock.json files to the working directory
COPY package*.json ./

# Install the dependencies
RUN npm install

# Copy the rest of the application code to the working directory
COPY . .

# Build the React app
RUN npm run build

# Install a simple server to serve the React app
RUN npm install -g serve

# Set the command to run the server
CMD ["serve", "-s", "build"]

# Expose port 3000
EXPOSE 3000

चरण 2: एक .dockerignore फ़ाइल बनाएँ

एक .dockerignore फ़ाइल निर्दिष्ट करती है कि डॉकर छवि में फ़ाइलों की प्रतिलिपि बनाते समय किन फ़ाइलों और निर्देशिकाओं को अनदेखा किया जाना चाहिए। यह छवि का आकार कम करने और निर्माण प्रक्रिया को तेज़ करने में मदद कर सकता है। निम्नलिखित सामग्री के साथ रूट निर्देशिका में एक .dockerignore फ़ाइल बनाएँ:

node_modules
build
.dockerignore
Dockerfile
.git
.gitignore

चरण 3: डॉकर छवि बनाएं

अपने रिएक्ट एप्लिकेशन के लिए डॉकर छवि बनाने के लिए, अपने एप्लिकेशन की रूट निर्देशिका पर नेविगेट करें और निम्नलिखित कमांड चलाएँ:

docker build -t my-react-app .

यह कमांड डॉकर को संदर्भ के रूप में वर्तमान निर्देशिका (.) का उपयोग करके टैग my-react-app के साथ एक छवि बनाने के लिए कहता है।

चरण 4: डॉकर कंटेनर चलाएँ

एक बार डॉकर छवि बन जाने के बाद, आप इसे निम्नलिखित कमांड का उपयोग करके एक कंटेनर में चला सकते हैं:

docker run -p 3000:3000 my-react-app

यह कमांड आपके स्थानीय मशीन पर पोर्ट 3000 को कंटेनर में पोर्ट 3000 पर मैप करता है, जिससे आप http://localhost:3000 पर अपने ब्राउज़र में रिएक्ट एप्लिकेशन तक पहुंच सकते हैं।

चरण 5: डॉकर कंपोज़ (वैकल्पिक)

यदि आप एकाधिक कंटेनर प्रबंधित करना चाहते हैं या अधिक कॉन्फ़िगरेशन जोड़ना चाहते हैं, तो आप डॉकर कंपोज़ का उपयोग कर सकते हैं। निम्नलिखित सामग्री के साथ रूट निर्देशिका में एक docker-compose.yml फ़ाइल बनाएं:

version: '3'

services:
  react-app:
    build: .
    ports:
      - "3000:3000"

docker-compose.yml फ़ाइल में परिभाषित सेवाओं को प्रारंभ करने के लिए, निम्न आदेश चलाएँ:

docker-compose up

निष्कर्ष

इन चरणों का पालन करके, आपने अपने रिएक्ट एप्लिकेशन को सफलतापूर्वक डॉकराइज़ कर लिया है। आपके एप्लिकेशन को डॉकराइज़ करने से न केवल विभिन्न परिवेशों में एकरूपता सुनिश्चित होती है, बल्कि परिनियोजन प्रक्रिया भी सरल हो जाती है, जिससे आपके एप्लिकेशन को प्रबंधित करना और स्केल करना आसान हो जाता है।

अतिरिक्त संसाधन

  • डॉकर दस्तावेज़ीकरण
  • प्रतिक्रिया दस्तावेज़ीकरण
  • डॉकर कंपोज़ दस्तावेज़ीकरण

अपने प्रोजेक्ट की विशिष्ट आवश्यकताओं के अनुसार Dockerfile और Docker Compose कॉन्फ़िगरेशन को अनुकूलित करने के लिए स्वतंत्र महसूस करें। हैप्पी डॉकराइज़िंग!

विज्ञप्ति वक्तव्य यह आलेख यहां पुन: प्रस्तुत किया गया है: https://dev.to/sh20raj/how-to-dockerize-a-react-application-19kc?1 यदि कोई उल्लंघन है, तो कृपया इसे हटाने के लिए [email protected] से संपर्क करें।
नवीनतम ट्यूटोरियल अधिक>

चीनी भाषा का अध्ययन करें

अस्वीकरण: उपलब्ध कराए गए सभी संसाधन आंशिक रूप से इंटरनेट से हैं। यदि आपके कॉपीराइट या अन्य अधिकारों और हितों का कोई उल्लंघन होता है, तो कृपया विस्तृत कारण बताएं और कॉपीराइट या अधिकारों और हितों का प्रमाण प्रदान करें और फिर इसे ईमेल पर भेजें: [email protected] हम इसे आपके लिए यथाशीघ्र संभालेंगे।

Copyright© 2022 湘ICP备2022001581号-3