2017-02-16 14 views
-2

AWSでAngularアプリを初めてホストしました。ドメインを設定し、セキュリティグループを設定します。現時点では、サイトから転送されるユーザー情報や支払い情報がないため、HTTP上でのみホストされます。しかし、私は公共のIPからサイトにアクセスしようとすると、すべてのjavascriptが壊れていると実行されていないと思われるので、ページ上のhtmlコンポーネントだけが実行されているようです。ほとんどのサイトは角度を持って構築されており、HTMLの大半は角型テンプレートを使用して構築されているため、痛いパブリックIPアクセス時にAWSホストされたサイトでスクリプトが実行されていない

ご了承ください。

私はモバイル(とSEOアナライザサイト)から見たときに見るもののスクリーンショットを添付しましたし、何を自分のPCからの眺めがこのアドレス

mobile screenshot

fully function screenshot

を使用しているとき、私は見ますメインページ用のHTMLが含まれています。

<!DOCTYPE html> 
 
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> 
 
<%@page session="true"%> 
 

 
<html ng-app="landingApp" > 
 
<head> 
 

 
<link rel="stylesheet" type="text/css" href="./presentationResources/css/bootstrap.css"> 
 
<link rel="stylesheet" type="text/css" href="./presentationResources/css/bootstrap.min.css"> 
 
<link rel="stylesheet" type="text/css" href="./presentationResources/css/bootstrap-custom.css"> 
 
<link rel="stylesheet" type="text/css" href="./presentationResources/css/font-awesome.css"> 
 
<link rel="stylesheet" type="text/css" href="./presentationResources/css/responsive.css"> 
 
<link rel="stylesheet" type="text/css" href="./presentationResources/css/myStyles.css"> 
 
<link rel="stylesheet" type="text/css" href="./presentationResources/css/landing.css"> 
 
<link rel="stylesheet" type="text/css" href="./presentationResources/css/demoApp.css"> 
 
<link rel="stylesheet" type="text/css" href="./presentationResources/css/animation.css"> 
 
    <link rel="stylesheet" type="text/css" href="./presentationResources/css/searchFacets.css"> 
 
<link rel="stylesheet" type="text/css" href="./presentationResources/css/jquery.bxslider.css"> 
 

 
<link href="https://fonts.googleapis.com/css?family=Lobster|Open+Sans+Condensed:300" rel="stylesheet"> 
 
<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet"> 
 

 
<link rel="shortcut icon" href="./presentationResources/images/favicon.png" type="image/x-icon"> 
 

 
<script type="text/javascript" src="./presentationResources/js/highlighter.js"></script> 
 
<script type="text/javascript" src="./presentationResources/js/jquery-1.9.1.js"></script> 
 
<script type="text/javascript" src="./presentationResources/js/jquery-ui.js"></script> 
 
<script type="text/javascript" src="./presentationResources/js/angular.js"></script> 
 
<script type="text/javascript" src="./presentationResources/js/landing.js"></script> 
 
<script type="text/javascript" src="./presentationResources/js/landingAboutUs.js"></script> 
 
<script type="text/javascript" src="./presentationResources/js/landingMainAppDemoSupp.js"></script> 
 
<script type="text/javascript" src="./presentationResources/js/landingMainAppDemo.js"></script> 
 
<script type="text/javascript" src="./presentationResources/js/jquery.bxslider.min.js"></script> 
 

 
<title>Personnel Tracker</title> 
 
<style> 
 

 

 

 
</style> 
 

 
<script> 
 

 

 

 
\t $(document).ready(function(){ 
 

 
\t \t \t \t \t document.getElementById("openByDefault").click(); 
 
\t \t \t \t \t $('.bxslider').bxSlider({ 
 
\t \t \t \t \t \t \t captions: true 
 
\t \t \t \t \t }); 
 

 
      var bxViewportHeight = $(".bx-viewport").height(); 
 
      console.log("height : "+bxViewportHeight); 
 

 
      if(bxViewportHeight < 300){ 
 
       $(".carouselAndBuzzSection").css("margin-bottom", "20%"); 
 
      }else{ 
 
       $(".carouselAndBuzzSection").css("margin-bottom", "0%"); 
 
      } 
 

 
    }); 
 

 

 
</script> 
 

 
\t <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
\t <meta name="title" content="Personnel Tracker 360" /> 
 
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' /> 
 
<meta name="description" content="Personnel Tracker 360 by Scion Solutions Group empowers organisations to accurately track all aspects of employee management. Matching skillset to current roles and providing performance reporting. " /> 
 

 
</head> 
 
<body> 
 

 

 
\t <div id="main-box" class="main-box responsive"> 
 

 
<h1 class="pageHeaderLogo responsive"> Personnel Tracker <span>360</span> </h1> 
 
<ul class="tab"> 
 
    <li><a href="javascript:void(0)" class="tablinks defaultTab glyphicon glyphicon-blackboard" 
 
\t \t \t \t onclick="openTab(event, 'welcomeTab')" id="openByDefault" > 
 
\t \t \t \t  <span style="font-family: 'Roboto Condensed',sans-serif !important;">Welcome </span></a></li> 
 

 
    <li><a href="javascript:void(0)" class="tablinks glyphicon glyphicon-home" onclick="openTab(event, 'appTab')"> 
 
\t \t <span style="font-family: 'Roboto Condensed',sans-serif !important;"> Demo App</span></a></li> 
 

 
    <li><a href="javascript:void(0)" class="tablinks glyphicon glyphicon-info-sign" onclick="openTabAboutUs(event, 'aboutTab')"> 
 
\t \t <span style="font-family: 'Roboto Condensed',sans-serif !important;">About Us</span></a></li> 
 
\t <div class="_stickFigureElement responsive"><img class="imgAnime" src='./presentationResources/images/profilePics/stickfigure2.png' /></div> 
 
</ul> 
 

 

 

 

 
<div id="welcomeTab" class="tabcontent"> 
 
    <welcome-page></welcome-page> 
 
</div> 
 
<div id="appTab" class="tabcontent"> 
 
    <app-page-demo></app-page-demo> 
 
</div> 
 
<div id="aboutTab" class="tabcontent"> 
 
    <about-us-page></about-us-page> 
 
</div> 
 

 

 

 
\t </div> 
 

 

 
</body> 
 
</html>

私は、リモートから任意のJavaScriptを参照しません。

+0

開発者コンソールを開き、[ネットワーク]タブを表示します。エラーがあれば教えてください。 – TRiNE

+1

ブラウザのデバッグコンソールを開き、javascriptのエラーを確認する必要があるようです。さらに情報を収集したら、それでも解決できない場合は、質問を追加情報で更新してください。それがあるので、誰でもあなたを助けるための詳細はここにはありません。 –

+0

プロジェクトにどのようにjsを含めるのですか?あなたは急行で奉仕していますか?あなたが提供しているページがあなたのjsファイル/ファイルにアクセスできないように思えます。 – Snarf

答えて

関連する問題