My client side is not working on aws(amazon) Ec2 Instance
Question
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. 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. 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. May be some issue there but that build folder correctly working on heroku Package.json file in client side
{
"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)
<!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.. **
2 answers
solution1
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. There is some issue at amazon instance Screen Shot after run npm run build and run serve -s build
solution2
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.