AWS 未使用 CloudFront 显示整个网站

Question

为了简短起见，我将 CloudFront 设置为“修复”我的问题，当我进入我的 AWS 网站时，它显示了我的 Social header，但没有别的： AWS Website

但是当我尝试使用 CloudFront 时： CloudFront Website it still looks the same... when i test my code in VSC it shows me the whole website like its supposed to What its Supposed to look like

我使用 Amazon 的教程进行设置，它已重定向到正确的网站，但它仍然没有显示...它的 HTTPS，所以不是...有什么建议吗？

<html>
<title>Future Company Design</title>
<head><link rel="shortcut icon" type="image/x-icon" href="file:///C:/Users/LNGM/OneDrive%20-%20System%20Industrie%20Electronic%20GmbH/Bilder/favicon.ico" /></head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {margin:0;height:2000px;}
body,h1 {font-family: "Raleway", sans-serif}
body, html {height: 100%}
.bgimg {
  background-image: url('file:///C:/Users/LNGM/Downloads/website.jpg');
  min-height: 100%;
  background-position: center;
  background-size: cover;
}

.icon-bar {
 position: absolute;
  right: -720;
  top: -50;
}

.icon-bar a {
  display:flex; 
  text-align: left;
  padding: 16px;
  transition: all 0.3s ease;
  color: white;
  font-size: 20px;
}

.icon-bar a:hover {
  background-color: rgb(196, 44, 44);
}

.Twitch {
  background: #6441a5;
  color: white;
}

.twitter {
  background: #55ACEE;
  color: white;
}

.instagram {
  background: #125688;
  color: white;
}

.linkedin {
  background: #007bb5;
  color: white;
}

</style>
<body>

  
<script>
var countDownDate = new Date("Dec 23, 2022 08:00:00").getTime();

var x = setInterval(function() {

  var now = new Date().getTime();

  var distance = countDownDate - now;

  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  document.getElementById("demo").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";

  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "Website going Live in only a Couple of Minutes";
  }
}, 1000);

</script>

<div class="bgimg w3-display-container w3-animate-opacity w3-text-white">
  <div class="w3-display-topleft w3-padding-large w3-xlarge">
    <img src="file:///C:/Users/LNGM/Downloads/rsz_logo_small.png">
  </div>
  <div class="w3-display-middle">
    <h1 class="w3-jumbo w3-animate-top">Work in Progress</h1>
    <hr class="w3-border-grey" style="margin:auto;width:40%">
    <p id="demo" class="w3-large w3-center"></p>    

    <div class="icon-bar">
      <a href="https://twitter.com/MaaxyBaxy" target="_blank" class="twitter"><i class="fa fa-twitter"></i></a>
      <a href="https://www.instagram.com/lurinoxii/" target="_blank" class="instagram"><i class="fa fa-instagram"></i></a>
      <a href="https://www.linkedin.com/in/matteo-lang-620881201/" target="_blank" class="linkedin"><i class="fa fa-linkedin"></i></a>
      <a href="https://Twitch.tv/Lurinoxi" target="_blank" class="Twitch"><i class="fa fa-Twitch"></i></a>

</body>
</html>

Answer 1

建议在引用您网站中的其他静态资源时使用相对路径。当您在 S3 中部署时，这将防止链接断开。例如。 file:///C:/Users/LNGM/Downloads/website.jpg S3 中不存在，它是对您 PC 中特定路径的引用

AWS 未使用 CloudFront 显示整个网站

AWS not showing whole webiste with CloudFront

amazon-s3

amazon-web-services

amazon-cloudfront