我的客户端不在 aws(amazon) Ec2 实例上工作
[英]My client side is not working on aws(amazon) Ec2 Instance
问题描述
My project is in MERN(mongo db,express,react and node) stack.My Client side not working on Amazon instance but same client side folder is correctly working on heroku.
我的项目在 MERN（mongo db、express、react 和 node）堆栈中。我的客户端不在 Amazon 实例上工作，但相同的客户端文件夹在 heroku 上正常工作。 I made build folder by running command npm build and upload that build folder on Amazon instance.My back end is working but front-end not working.我通过运行命令 npm 构建构建文件夹并将该构建文件夹上传到 Amazon 实例上。我的后端工作但前端不工作。 I am sharing all screen shots Screen shoot of directory on amazon instance我正在分享所有屏幕截图亚马逊实例上目录的屏幕截图
i am also sharing my package.json file in client side...By using that file file i created build folder by creating npm run build command.我还在客户端共享我的 package.json 文件...通过使用该文件文件，我通过创建 npm 运行构建命令来创建构建文件夹。 May be some issue there but that build folder correctly working on heroku Package.json file in client side可能存在一些问题，但构建文件夹在客户端的 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"
}
}
My index file in build folder (i created build folder by npm run build)我在构建文件夹中的索引文件（我通过 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>
The console message I got when i upload build folder on amazon instance and then access the public address我在亚马逊实例上上传构建文件夹然后访问公共地址时收到的控制台消息
Screen Shot of console after deploy on amazon instance在亚马逊实例上部署后的控制台屏幕截图
**Note:My that build folder correctly working on heroku but not working on amazon instance but if I upload different project build folder on same instance with same setting then its work.. ** **注意：我的构建文件夹在 heroku 上正常工作，但不适用于亚马逊实例，但如果我在具有相同设置的同一实例上上传不同的项目构建文件夹，那么它的工作.. **
2 个解决方案
解决方案1
1 2020-05-24 16:55:12
After running npm run build i run that command serve -s build and i can easily access my client side on my local machine.Its mean my build folder at client side working fine.运行 npm 运行构建后，我运行该命令 serve -s build 并且我可以轻松地在本地机器上访问我的客户端。这意味着我在客户端的构建文件夹工作正常。 There is some issue at amazon instance Screen Shot after run npm run build and run serve -s build运行 npm 运行构建并运行服务 -s 构建后，亚马逊实例屏幕截图存在一些问题
解决方案2
0 2020-05-27 19:16:03
I solved my Issue actually all things are working fine.我解决了我的问题，实际上一切正常。 There was only issue in one line一行只有一个问题
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
When I removed that line all things working fine..Now that Query is closed..Thanks all当我删除那条线时，一切正常..现在查询已关闭..谢谢大家
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.