প্রতিক্রিয়া অ্যাপ্লিকেশন ত্রুটি: 'ওয়েবসকেট' তৈরি করতে ব্যর্থ: এইচটিটিপিএস-এর মাধ্যমে লোড হওয়া পৃষ্ঠা থেকে একটি সুরক্ষিত ওয়েবস্কট সংযোগ আরম্ভ করা হতে পারে না

Question

আমি একটি প্রতিক্রিয়া অ্যাপ্লিকেশন নিযুক্ত করছি তবে https- র মাধ্যমে পৃষ্ঠাটি দেখার সময় আমি একটি অদ্ভুত ত্রুটি পাচ্ছি।

আমি যখন পৃষ্ঠাটি https- র উপরে দেখি তখন আমি নিম্নলিখিত ত্রুটিটি পাই:

সিকিউরিটিআরআর: 'ওয়েবসকেট' তৈরি করতে ব্যর্থ: এইচটিটিপিএস-এর মাধ্যমে লোড হওয়া পৃষ্ঠা থেকে একটি সুরক্ষিত ওয়েবস্কট সংযোগ আরম্ভ করা হতে পারে না।

কিন্তু আমি যখন পৃষ্ঠায় HTTP এ যাই তবে এটি পুরোপুরি কার্যকর হয়।

সমস্যাটি হ'ল আমি যতদূর বলতে পারি ওয়েবসকেট ব্যবহার করছি না। আমি কোডটির মাধ্যমে অনুসন্ধানের জন্য HTTP- র কোনও অনুরোধ আছে কিনা তা https তে বা ডাব্লুএসএসের কাছে হওয়া উচিত: ডাব্লুএসএসের পরিবর্তে: তবে আমি কিছুই দেখতে পাচ্ছি না।

এর আগে কেউ কি এর মধ্যে দৌড়েছে?

আমি প্যাকেজ.জসন ফাইলের একটি অনুলিপি অন্তর্ভুক্ত করছি। আপনার যদি প্রয়োজন হয় তবে আমাকে ডিবাগ করতে সহায়তা করার জন্য কোডের অন্য কোনও অংশ আপলোড করতে হবে কিনা তা আমাকে জানান।

আগাম ধন্যবাদ.

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "baffle": "^0.3.6",
    "cross-env": "^6.0.3",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-player": "^1.14.2",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.3.0",
    "react-typist": "^2.0.5",
    "webpack-hot-dev-clients": "^2.0.2"
  },
  "scripts": {
    "start": "cross-env react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Answer 1

লোকেরা প্যাচের জন্য প্রতিক্রিয়া-স্ক্রিপ্টগুলির জন্য অপেক্ষা করছে:

Https- র মাধ্যমে স্থানীয় পরীক্ষার জন্য , আপনি ম্যানুয়ালি সম্পাদনা করতে পারেন

node_modules/react-dev-utils/webpackHotDevClient.js

এই ফাইলটির 62 লাইনে আপনি যে কোডটি চান তা এখানে রয়েছে:

protocol: window.location.protocol === 'https:' ? 'wss' : 'ws',

স্থাপনার জন্য নীচের পদক্ষেপগুলি অনুসরণ করুন:

npm install -g serve // This can be done locally too

npm run build

এবং তারপরে আপনার প্যাকেজটিতে

"scripts": {
    "deploy": "serve -s build",
}

এবং তারপর

npm deploy or yarn deploy

আশা করি এই উত্তরটি আপনাকে ত্রুটি থেকে মুক্তি পেতে সহায়তা করবে।

আরও তথ্যের জন্য এখানে দেখুন `

Comments

আমার একই সমস্যা আছে, তাই আমাকে কেবল নোড মডিউলগুলির মধ্যে এই ফাইলটি সম্পাদনা করতে হবে?

— Versifiction

@ প্রশংসন হ্যাঁ একটি নতুন প্রতিক্রিয়া-স্ক্রিপ্টস প্যাচ প্রকাশ না হওয়া পর্যন্ত এটি করতে হবে।

— প্রতাপ শর্মা

সম্ভবত node_modulesম্যানুয়ালি সংশোধন করা উচিত নয় কারণ এগুলি ভাগ করা

— রেপোতে

সুতরাং আমি একই সমস্যা হচ্ছে এবং আমি আমার অ্যাপ্লিকেশনটিকে হিরকুতে স্থাপন করছি। আমি এমনকি জোর করে কেবল ওয়েবসকেট ফাইলটি প্রতিশ্রুতিবদ্ধ করেছি এবং এটি হিরকুতে স্থাপন করেছি তবে আমি এখনও একই ত্রুটি পেয়েছি, কারও কি এটার চারপাশে কাজ আছে? কেবলমাত্র আমি চেষ্টা করিনি তা হ'ল সম্পূর্ণ নোড_মডিউলগুলি নির্দেশ করে।

— টাইলার স্ট্রোথ

@ টাইলারস্ট্রোথের কি কোনও সম্ভাবনা আছে যে আপনি হিরোকুতে নোড মডিউলগুলি সম্পাদনা করতে পারেন ?? একবার আপনি হিরকুতে মোতায়েন হয়ে গেলে এটি প্যাকেজ.জসনে উল্লিখিত প্যাকেজগুলি ইনস্টল করুন। এইভাবে উপরের ফাইলটিতে আপনার করা পরিবর্তনগুলিও ওভাররাইড হয়ে যায়। হিরকুতে নোড মডিউলগুলির ভিতরে ফাইলটি সম্পাদনা করার চেষ্টা করুন।

— প্রতাপ শর্মা

Answer 2

উত্তর অনেক এখানে আসলে ইস্যু কিন্তু সহজ উপায় যেহেতু আমি জিজ্ঞেস করলাম এই প্রশ্নের npm প্যাকেজ যোগ করার জন্য আমি খুঁজে পেয়েছি সমাধান না পরিবেশন করা আপনার নির্ভরতা পূর্ণ করার উদ্দেশ্যে।

yarn add serve অথবা npm i serve

এবং তারপরে নিম্নলিখিতটি দিয়ে আপনার শুরু স্ক্রিপ্টটি প্রতিস্থাপন করুন:

"scripts": {
    "start": "serve -s build",
}

এটি আসলে তৈরি-প্রতিক্রিয়া-অ্যাপ্লিকেশন ডক্সের বাইরে

Comments

এই গ্রহণযোগ্য উত্তর হওয়া উচিত ছিল

— দীনেশ শেখাওয়াত

এটি আমার পক্ষে কাজ করে না আমি যখন স্থানীয়ভাবে আমার সার্ভারটি চালু করি তখন আমি 404 ত্রুটি পাই

— হুগো

দেরিতে প্রতিক্রিয়ার জন্য দুঃখিত, আপনাকে স্থানীয় বিকাশের জন্য অন্য একটি স্ক্রিপ্ট তৈরি করতে হবে। উদাহরণ স্বরূপ. "dev": "react scripts start" আপনি npm run devস্থানীয়ভাবে চালানোর জন্য দৌড়াবেন।

— লিও পলিকাস্ট্রো

Answer 3

এখানে একটি সহজ সমাধান। আপনার ডাউনগ্রেড react-scriptsকরার 3.2.0আপনার package.json(খনি ছিল 3.3.0)।

আপনার নিজের package-lock.jsonএবং node_modules( rm -rf package-lock.json node_modules) মুছতে হবে , তারপরে একটি করুন npm i। আপনার নতুন package.jsonএবং package-lock.jsonরেপো উভয় প্রতিশ্রুতিবদ্ধ ।

Comments

আমার জন্য কাজ করেছেন। প্রাথমিকভাবে এটি ৩.৩.০ এ ফিরে গেছে কারণ এনপিএম ইনস্টল শেষ হওয়ার পরে আমি প্রস্তাবিত অডিট ফিক্সটি সহজাতভাবে চালাচ্ছি।

— মার্সএন্ডব্যাক

Answer 4

আমি যখন প্রতিক্রিয়া react-scriptsনিয়ে ঘাটাঘাটি করছি তখন কিছুক্ষণ হয়েছে, তবে ওয়েবপ্যাকের উপরে নির্মিত যদি আমি ভুল না করি তবে এটি সম্ভবত বিকাশের গতিতে ওয়েবপ্যাক-ডেভ-সার্ভার ব্যবহার করে। এটি যখন ডিস্কে পরিবর্তনগুলি আবিষ্কার করে তখন একটি পুনরায় লোড ট্রিগার করতে ক্লায়েন্টের সাথে যোগাযোগ করার জন্য ওয়েবসকেট ব্যবহার করে।

আপনি সম্ভবত অ্যাপ্লিকেশনটি ডেভলপমেন্ট মোডে শুরু করছেন, সুতরাং আপনি যদি এটি কোনও উত্পাদন পরিবেশে স্থাপন করছেন, আপনার চালানো উচিত npm run buildযা জাভাস্ক্রিপ্ট ফাইলগুলির একটি সেট তৈরি করবে যা আপনি আপনার প্রিয় ওয়েবসারভারের সাথে পরিবেশন করতে পারেন।

Comments

এটা ঠিক শোনাচ্ছে, ধন্যবাদ! আমি এটি চেষ্টা করব এবং এটি যদি কাজ করে তবে আপনাকে জানাতে পারি।

— লিও পলিকাস্ট্রো

আমার ঠিক একই সমস্যা হচ্ছে, আমি এটি গিটহাব পৃষ্ঠাগুলিতে স্থাপন করার জন্য এনপিএম রান বিল্ড চালিয়েছি কিন্তু এটি কার্যকর হয়নি, তাই হিরোকুকে চেষ্টা করে আমি উল্লিখিত ত্রুটি পেয়েছি, এটি এইচটিটিপিতে কাজ করে যদি আমি অনিরাপদ লোড করার কোনও বিকল্প তৈরি করি তবে স্ক্রিপ্ট। এটিকে সুরক্ষিত করার এবং এই ত্রুটিটি সমাধানের সমাধান কার্যকর হবে!

— গণেশ

@ গণেশ, তাহলে আপনি এটি ভুল করছেন। আপনাকে একটি করতে হবে npm run buildএবং buildডিরেক্টরিতে কেবল সামগ্রীগুলি আপলোড করতে হবে ।

— জিমি স্টেনকে

প্রতিক্রিয়া স্ক্রিপ্টগুলির 3.3.0 সংস্করণে এটি একটি সমস্যা। আপনি এখানে " github.com/facebook/create-react-app/pull/8079 " বিস্তারিত ডকুমেন্টেশন খুঁজে পেতে পারেন । আমি স্ক্রিপ্টগুলিতে প্রতিক্রিয়াটি ডাউনগ্রেড করেছি - ৩.২.০ এবং আমি এখন কোনও ত্রুটি পাচ্ছি না

— গণেশ

@ মন্টেরপিস, আজব। আমি যখন হিরকুতে পরীক্ষা নিইনি তবে স্থানীয়ভাবে পরীক্ষা করেছিলাম তখন ফলাফল ছিল না। এটি সম্ভবত যে env একটি সমস্যা তাই সম্ভবত স্পষ্টভাবে এটি উল্লেখ করা সর্বদা সেরা। NODE_ENV=production npm run build, এবং তারপরে কেবল buildহিরকুতে ডিরেক্টরি আপলোড করুন (এটি হ'ল বিল্ড ওয়েবসারভারে আপনার ওয়েবরুট হবে, এসএসআর ব্যবহার না করে সার্ভারে নোডের প্রয়োজন হবে না)। প্রোডাকশন বিল্ডে এমনকি ওয়েবপ্যাক ডেভ সার্ভারটি অন্তর্ভুক্ত করা উচিত নয় , আমি বলব যে সে ক্ষেত্রে এটি একটি বাগ।

— জিমি স্টেনকে

Answer 5

• ফোল্ডার এবং নোড.জেএস অ্যাপের পিছনে তৈরি করুন
• আপনার অ্যাপের মূলটিতে এক্সপ্রেস রাউটার তৈরি করুন
• একটি সার্ভার.জেএস ফাইল তৈরি করুন

এই কোডটি সার্ভার.জেজে যুক্ত করুন

const express = require('express')
const path = require('path')
const app = express()

if (process.env.NODE_ENV === 'production') {
  // Serve any static files
  app.use(express.static(path.join(__dirname, 'client/build')))
  // Handle React routing, return all requests to React app
  app.get('*', (request, response) => {
    response.sendFile(path.join(__dirname, 'client/build', 'index.html'))
  })
}
const port = process.env.PORT || 8080
app.listen(port, () => {
  console.log(`API listening on port ${port}...`)
})

In pakage.json

,
  "scripts": {
    "start": "node server.js",
    "heroku-postbuild": "cd client && yarn && yarn run build"
  }

এবং রুট প্রক্সিটি / ফোল্ডার-নাম-react-app/pakage.json এ যুক্ত করুন

  "proxy": "http://localhost:8080"

Answer 6

যে কেউ এই সমস্যাটির সাথে হিরকু মোতায়েনের বিষয়ে লড়াই করছেন আপনি reac-scriptsমডিউলটি ডাউনগ্রেড করে 3.2.0।

1. package-lock.jsonফাইল সরান
2. node_modulesফোল্ডার সরান
3. react-scriptsসংস্করণ প্রতিস্থাপন করুন3.2.0
4. npm install সমস্ত মডিউল আবার

Answer 7

আপনার এই নিবন্ধটি তৈরি-প্রতিক্রিয়া-অ্যাপ্লিকেশন ওয়েবসাইট থেকে দেখার প্রয়োজন। এটি ব্যাখ্যা করে যে কীভাবে 'ক্রিয়েট-রিঅ্যাক্ট-অ্যাপ' দিয়ে তৈরি অ্যাপ্লিকেশনটিকে সঠিকভাবে স্থাপন করা যায় যা গিথুবটিতে হিরোকু অ্যাপ্লিকেশন তৈরি করার সময় আপনার প্রয়োজনীয় গিথুবে রিট্যাক্ট অ্যাপ, মার্স / ক্রিয়েট-রিএ্যাক্ট-অ্যাপ-বিল্ডপ্যাকের জন্য নির্দিষ্ট বিল্ডপ্যাকের দিকে নির্দেশ করে point

https://create-react-app.dev/docs/deployment/#heroku

https://github.com/mars/create-react-app-buildpack

প্রত্যেকের এখানে থাকা নিরাপত্তাহীন ওয়েবসকেট ইস্যুতে আমার একই সমস্যা ছিল, তাই আমি তৈরি-প্রতিক্রিয়া-অ্যাপ নিবন্ধ থেকে সমাধানটি পরীক্ষা করেছি। এটি সমস্যার সমাধান করেছে। নোড_মডিউল বা কোনও কিছু সংশোধন করার দরকার নেই।

প্রতিক্রিয়া অ্যাপ্লিকেশনটির মূলটিতে সিএলআই থেকে হিরকু অ্যাপ তৈরি করার সময় আপনার যা করা দরকার তা হ'ল:

heroku create --buildpack mars/create-react-app

তারপর:

git push heroku master

আপনি যখন হিরোকুতে আপনার ওয়েবসাইটে যান। এটি কোনও "সুরক্ষিত ওয়েবসকেট" ত্রুটি ছাড়াই প্রত্যাশার মতো চলবে।

(আপনি ইতিমধ্যে হেরোকুতে তৈরি / মোতায়েনের পরে এটিতে কীভাবে মঙ্গল / ক্রিয়েট-রিঅ্যাক্ট-অ্যাপ বিল্ডপ্যাক যুক্ত করবেন তা আমি জানি না I আমি এখনও সে অংশে উঠিনি))

উপরের সমাধানটি হেরোকুতে মোতায়েনের জন্য তৈরি-প্রতিক্রিয়া-অ্যাপ্লিকেশনটির টিমের যে সমস্যাটি রয়েছে তা সমাধান করছে বলে মনে হচ্ছে।

Comments

বিল্ডপ্যাক যুক্ত করার পরে এটি হিরোকুতে মোতায়েনের পরে, হেরোকু অ্যাপ্লিকেশন পৃষ্ঠা-> 'সেটিং' ট্যাব -> 'বিল্ডপ্যাকস' বিভাগে যান। আপনি mers যোগ / তৈরি-প্রতিক্রিয়া-অ্যাপ্লিকেশন তারপর 'বিল্ডপ্যাক যোগ করুন' বোতামটি ক্লিক করুন।

— জন টাওয়ার