我的客戶端不在 aws(amazon) Ec2 實例上工作
[英]My client side is not working on aws(amazon) Ec2 Instance
問題描述
我的項目在 MERN（mongo db、express、react 和 node）堆棧中。我的客戶端不在 Amazon 實例上工作，但相同的客戶端文件夾在 heroku 上正常工作。 我通過運行命令 npm 構建構建文件夾並將該構建文件夾上傳到 Amazon 實例上。我的后端工作但前端不工作。 我正在分享所有屏幕截圖亞馬遜實例上目錄的屏幕截圖
我還在客戶端共享我的 package.json 文件...通過使用該文件文件，我通過創建 npm 運行構建命令來創建構建文件夾。 可能存在一些問題，但構建文件夾在客戶端的 heroku Package.json 文件上正確工作
{
"name": "now-ui-kit-react",
"version": "1.0.0",
"private": true,
"dependencies": {
"@material-ui/core": "^4.9.14",
"@material-ui/lab": "^4.0.0-alpha.53",
"@pathofdev/react-tag-input": "^1.0.7",
"async": "^3.1.0",
"aws-sdk": "^2.682.0",
"axios": "^0.19.2",
"bcrypt": "^3.0.6",
"body-parser": "^1.19.0",
"bootstrap": "^4.4.1",
"cookie-parser": "^1.4.3",
"cors": "^2.8.5",
"express": "^4.17.1",
"jsonwebtoken": "^8.5.1",
"mdbootstrap": "^4.16.0",
"mdbreact": "^4.25.6",
"moment": "2.24.0",
"mongoose": "^5.4.20",
"move-file": "^2.0.0",
"multer": "^1.4.2",
"multer-s3": "^2.9.0",
"node-sass": "^4.14.1",
"nouislider": "14.0.2",
"npm": "^6.14.5",
"path": "^0.12.7",
"progressbar": "^1.3.0",
"react": "^16.8.6",
"react-apple-login": "^1.0.11",
"react-audio-player": "^0.13.0",
"react-audio-waveform": "0.0.5",
"react-bootstrap": "^1.0.0",
"react-bootstrap-switch": "15.5.3",
"react-datetime": "2.16.3",
"react-dom": "16.8.6",
"react-facebook-login": "^4.1.1",
"react-google-login": "^5.1.3",
"react-howler": "^3.7.4",
"react-redux": "^5.0.7",
"react-router": "5.0.1",
"react-router-dom": "5.0.1",
"react-scripts": "^3.4.1",
"react-soundplayer": "^1.0.4",
"react-wavesurfer": "^0.8.6",
"reactstrap": "8.0.1",
"semantic-ui-react": "^0.88.2",
"socket.io": "^2.2.0",
"socket.io-client": "^2.3.0",
"styled-components": "^5.1.0",
"use-global-hook": "^0.1.12",
"waveform-data": "^1.4.3",
"wavesurfer.js": "^2.0.0-beta01"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start",
"compile-sass": "node-sass src/assets/scss/now-ui-kit.scss src/assets/css/now-ui-kit.css",
"minify-sass": "node-sass src/assets/scss/now-ui-kit.scss src/assets/css/now-ui-kit.min.css --output-style compressed",
"map-sass": "node-sass src/assets/scss/now-ui-kit.scss src/assets/css/now-ui-kit.css --source-map true"
},
"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"
]
},
"optionalDependencies": {
"typescript": "3.5.3"
}
}
我在構建文件夾中的索引文件（我通過 npm 運行構建創建了構建文件夾）
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
<link rel="icon" type="image/png" href="/favicon.png"/>
<link rel="apple-touch-icon" href="/apple-icon.png"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<meta name="theme-color" content="#000000"/>
<link rel="manifest" href="/manifest.json"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Allerta" rel="stylesheet">
<script src="https://kit.fontawesome.com/ebcffbdb17.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css"/>
<script src="https://code.iconify.design/1/1.0.5/iconify.min.js"></script>
<title>Musicmax</title>
<link href="/static/css/2.c4e2230b.chunk.css" rel="stylesheet">
<link href="/static/css/main.2398cf45.chunk.css" rel="stylesheet">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script><script src="semantic/dist/semantic.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/wavesurfer.min.js"></script><script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script><script>!function(l){function e(e){for(var r,t,n=e[0],o=e[1],u=e[2],f=0,i=[];f<n.length;f++)t=n[f],p[t]&&i.push(p[t][0]),p[t]=0;for(r in o)Object.prototype.hasOwnProperty.call(o,r)&&(l[r]=o[r]);for(s&&s(e);i.length;)i.shift()();return c.push.apply(c,u||[]),a()}function a(){for(var e,r=0;r<c.length;r++){for(var t=c[r],n=!0,o=1;o<t.length;o++){var u=t[o];0!==p[u]&&(n=!1)}n&&(c.splice(r--,1),e=f(f.s=t[0]))}return e}var t={},p={1:0},c=[];function f(e){if(t[e])return t[e].exports;var r=t[e]={i:e,l:!1,exports:{}};return l[e].call(r.exports,r,r.exports,f),r.l=!0,r.exports}f.m=l,f.c=t,f.d=function(e,r,t){f.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},f.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},f.t=function(r,e){if(1&e&&(r=f(r)),8&e)return r;if(4&e&&"object"==typeof r&&r&&r.__esModule)return r;var t=Object.create(null);if(f.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:r}),2&e&&"string"!=typeof r)for(var n in r)f.d(t,n,function(e){return r[e]}.bind(null,n));return t},f.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return f.d(r,"a",r),r},f.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},f.p="/";var r=window.webpackJsonp=window.webpackJsonp||[],n=r.push.bind(r);r.push=e,r=r.slice();for(var o=0;o<r.length;o++)e(r[o]);var s=n;a()}([])</script><script src="/static/js/2.9d8867b1.chunk.js"></script><script src="/static/js/main.8452b760.chunk.js"></script>
</body>
</html>
我在亞馬遜實例上上傳構建文件夾然后訪問公共地址時收到的控制台消息
**注意：我的構建文件夾在 heroku 上正常工作，但不適用於亞馬遜實例，但如果我在具有相同設置的同一實例上上傳不同的項目構建文件夾，那么它的工作.. **
2 個解決方案
解決方案1
1 2020-05-24 16:55:12
運行 npm 運行構建后，我運行該命令 serve -s build 並且我可以輕松地在本地機器上訪問我的客戶端。這意味着我在客戶端的構建文件夾工作正常。 運行 npm 運行構建並運行服務 -s 構建后，亞馬遜實例屏幕截圖存在一些問題
解決方案2
0 2020-05-27 19:16:03
我解決了我的問題，實際上一切正常。 一行只有一個問題
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
當我刪除那條線時，一切正常..現在查詢已關閉..謝謝大家
如何配置AWS EC2實例中的Node.js以接受來自客戶端的HTTPS請求
[英]How to configure Nodejs that is in AWS EC2 Instance to accept HTTPS request from client side
如何在amazon EC2 Linux實例上托管我的應用程序（MEAN）？
[英]How to host my application (MEAN) on amazon EC2 Linux instance?
AWS EC2 - 公共 IPv4 地址無法在正在運行的 EC2 實例上運行
[英]AWS EC2 - Public IPv4 address not working on a running EC2 instance
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
Nodemailer不在Amazon EC2實例上工作
如何配置AWS EC2實例中的Node.js以接受來自客戶端的HTTPS請求
不能讓nodejs在亞馬遜ec2實例上工作
如何在amazon EC2 Linux實例上托管我的應用程序（MEAN）？
平均堆棧應用程序在 AWS EC2 實例上無法正常運行
節點 js 路由在本地主機上工作但不在 AWS ec2 實例上
AWS EC2 - 公共 IPv4 地址無法在正在運行的 EC2 實例上運行
打開Amazon EC2實例以進行HTTP請求
將Amazon EC2 Node.js實例重定向到HTTPS
在Amazon AWS EC2上托管Web應用程序
相關標簽