我在尝试部署Google Cloud App Engine时遇到问题。我正在尝试在Google Cloud中部署angular 6应用程序,但发现未加载我在资产文件夹中添加的那些JS和CSS。下面是我遇到的错误:
GET http://tidy-etching-224411.appspot.com/assets/js/main-headlinev2.js net::ERR_ABORTED 404 (Not Found)
jquery-migrate-1.4.1.min.js:2 JQMIGRATE: Migrate is installed, version 1.4.1
tidy-etching-224411.appspot.com/:17 GET http://tidy-etching-224411.appspot.com/node_modules/smartmenus/src/jquery.smartmenus.js net::ERR_ABORTED 404 (Not Found)
tidy-etching-224411.appspot.com/:19 GET http://tidy-etching-224411.appspot.com/assets/css/bootstrap-3.3.7/js/bootstrap.min.js net::ERR_ABORTED 404 (Not Found)
tidy-etching-224411.appspot.com/:21 GET http://tidy-etching-224411.appspot.com/assets/js/jquery.smartmenus.min.js net::ERR_ABORTED 404 (Not Found)
tidy-etching-224411.appspot.com/:22 GET http://tidy-etching-224411.appspot.com/node_modules/sticky-kit/dist/sticky-kit.min.js net::ERR_ABORTED 404 (Not Found)
tidy-etching-224411.appspot.com/:20 GET http://tidy-etching-224411.appspot.com/assets/js/jquery.fitvids.js net::ERR_ABORTED 404 (Not Found)
tidy-etching-224411.appspot.com/:32 GET http://tidy-etching-224411.appspot.com/node_modules/font-awesome/css/font-awesome.min.css net::ERR_ABORTED 404 (Not Found)
tidy-etching-224411.appspot.com/:34 GET http://tidy-etching-224411.appspot.com/assets/animated-headline.css net::ERR_ABORTED 404 (Not Found)
tidy-etching-224411.appspot.com/:33 GET http://tidy-etching-224411.appspot.com/assets/style.css net::ERR_ABORTED 404 (Not Found)
tidy-etching-224411.appspot.com/:35 GET http://tidy-etching-224411.appspot.com/assets/css/bootstrap-3.3.7/css/bootstrap.min.css net::ERR_ABORTED 404 (Not Found)
tidy-etching-224411.appspot.com/:36 GET http://tidy-etching-224411.appspot.com/assets/css/htmlTag.css net::ERR_ABORTED 404 (Not Found)
tidy-etching-224411.appspot.com/:38 GET http://tidy-etching-224411.appspot.com/assets/css/portfoilo-main.css net::ERR_ABORTED 404 (Not Found)
tidy-etching-224411.appspot.com/:37 GET http://tidy-etching-224411.appspot.com/assets/css/animate.css net::ERR_ABORTED 404 (Not Found)
tidy-etching-224411.appspot.com/:41 GET http://tidy-etching-224411.appspot.com/dist/royAngularProjectv/assets/css/popup.css net::ERR_ABORTED 404 (Not Found)
tidy-etching-224411.appspot.com/:42 GET http://tidy-etching-224411.appspot.com/assets/css/common.css net::ERR_ABORTED 404 (Not Found)
tidy-etching-224411.appspot.com/:114 GET http://tidy-etching-224411.appspot.com/styles.44d3eb7da3544ddab0d2.css net::ERR_ABORTED 404 (Not Found)
tidy-etching-224411.appspot.com/:23 GET http://tidy-etching-224411.appspot.com/assets/js/jquery.nicescroll.min.js net::ERR_ABORTED 404 (Not Found)
tidy-etching-224411.appspot.com/:24 GET http://tidy-etching-224411.appspot.com/assets/js/formFilling.js net::ERR_ABORTED 404 (Not Found)
tidy-etching-224411.appspot.com/:25 GET http://tidy-etching-224411.appspot.com/src/assets/js/imagesloaded.min.js?ver=3.2.0 net::ERR_ABORTED 404 (Not Found)
tidy-etching-224411.appspot.com/:26 GET http://tidy-etching-224411.appspot.com/node_modules/masonry-layout/dist/masonry.pkgd.min.js net::ERR_ABORTED 404 (Not Found)
tidy-etching-224411.appspot.com/:29 GET http://tidy-etching-224411.appspot.com/assets/js/contactUs.js net::ERR_ABORTED 404 (Not Found)
2tidy-etching-224411.appspot.com/:307 GET http://tidy-etching-224411.appspot.com/polyfills.8d49802c7c9430759c40.js net::ERR_ABORTED 404 (Not Found)
tidy-etching-224411.appspot.com/:27 GET http://tidy-etching-224411.appspot.com/assets/js/general.js net::ERR_ABORTED 404 (Not Found)
tidy-etching-224411.appspot.com/:28 GET http://tidy-etching-224411.appspot.com/assets/js/modernizr-2.6.2.min.js net::ERR_ABORTED 404 (Not Found)
tidy-etching-224411.appspot.com/:18 GET http://tidy-etching-224411.appspot.com/assets/js/main-headlinev2.js net::ERR_ABORTED 404 (Not Found)
2tidy-etching-224411.appspot.com/:307 GET http://tidy-etching-224411.appspot.com/scripts.66445d745b5a386b2ba7.js net::ERR_ABORTED 404 (Not Found)
tidy-etching-224411.appspot.com/:19 GET http://tidy-etching-224411.appspot.com/assets/css/bootstrap-3.3.7/js/bootstrap.min.js net::ERR_ABORTED 404 (Not Found)
tidy-etching-224411.appspot.com/:20 GET http://tidy-etching-224411.appspot.com/assets/js/jquery.fitvids.js net::ERR_ABORTED 404 (Not Found)
tidy-etching-224411.appspot.com/:21 GET http://tidy-etching-224411.appspot.com/assets/js/jquery.smartmenus.min.js net::ERR_ABORTED 404 (Not Found)
tidy-etching-224411.appspot.com/:22 GET http://tidy-etching-224411.appspot.com/node_modules/sticky-kit/dist/sticky-kit.min.js net::ERR_ABORTED 404 (Not Found)
tidy-etching-224411.appspot.com/:23 GET http://tidy-etching-224411.appspot.com/assets/js/jquery.nicescroll.min.js net::ERR_ABORTED 404 (Not Found)
tidy-etching-224411.appspot.com/:24 GET http://tidy-etching-224411.appspot.com/assets/js/formFilling.js net::ERR_ABORTED 404 (Not Found)
tidy-etching-224411.appspot.com/:25 GET http://tidy-etching-224411.appspot.com/src/assets/js/imagesloaded.min.js?ver=3.2.0 net::ERR_ABORTED 404 (Not Found)
tidy-etching-224411.appspot.com/:26 GET http://tidy-etching-224411.appspot.com/node_modules/masonry-layout/dist/masonry.pkgd.min.js net::ERR_ABORTED 404 (Not Found)
tidy-etching-224411.appspot.com/:27 GET http://tidy-etching-224411.appspot.com/assets/js/general.js net::ERR_ABORTED 404 (Not Found)
tidy-etching-224411.appspot.com/:28 GET http://tidy-etching-224411.appspot.com/assets/js/modernizr-2.6.2.min.js net::ERR_ABORTED 404 (Not Found)
tidy-etching-224411.appspot.com/:29 GET http://tidy-etching-224411.appspot.com/assets/js/contactUs.js 404 (Not Found)
tidy-etching-224411.appspot.com/:34 Active resource loading counts reached a per-frame limit while the tab was in background. Network requests will be delayed until a previous loading finishes, or the tab is brought to the foreground. See https://www.chromestatus.com/feature/5527160148197376 for more details
tidy-etching-224411.appspot.com/:32 GET http://tidy-etching-224411.appspot.com/node_modules/font-awesome/css/font-awesome.min.css 404 (Not Found)
tidy-etching-224411.appspot.com/:35 GET http://tidy-etching-224411.appspot.com/assets/css/bootstrap-3.3.7/css/bootstrap.min.css net::ERR_ABORTED 404 (Not Found)
tidy-etching-224411.appspot.com/:36 GET http://tidy-etching-224411.appspot.com/assets/css/htmlTag.css net::ERR_ABORTED 404 (Not Found)
tidy-etching-224411.appspot.com/:33 GET http://tidy-etching-224411.appspot.com/assets/style.css net::ERR_ABORTED 404 (Not Found)
tidy-etching-224411.appspot.com/:34 GET http://tidy-etching-224411.appspot.com/assets/animated-headline.css net::ERR_ABORTED 404 (Not Found)
tidy-etching-224411.appspot.com/:41 GET http://tidy-etching-224411.appspot.com/dist/royAngularProjectv/assets/css/popup.css net::ERR_ABORTED 404 (Not Found)
tidy-etching-224411.appspot.com/:37 GET http://tidy-etching-224411.appspot.com/assets/css/animate.css net::ERR_ABORTED 404 (Not Found)
tidy-etching-224411.appspot.com/:38 GET http://tidy-etching-224411.appspot.com/assets/css/portfoilo-main.css net::ERR_ABORTED 404 (Not Found)
tidy-etching-224411.appspot.com/:42 GET http://tidy-etching-224411.appspot.com/assets/css/common.css net::ERR_ABORTED 404 (Not Found)
tidy-etching-224411.appspot.com/:114 GET http://tidy-etching-224411.appspot.com/styles.44d3eb7da3544ddab0d2.css net::ERR_ABORTED 404 (Not Found)
4(index):307 GET http://tidy-etching-224411.appspot.com/runtime.a66f828dca56eeb90e02.js net::ERR_ABORTED 404 (Not Found)
我的app.yaml
#service: stage
runtime: python27
api_version: 1
threadsafe: true
skip_files:
- ^(?!dist) # Skip any files not in the dist folder
handlers:
# Routing for bundles to serve directly
- url: /((?:runtime|main|polyfills|styles|vendor)\.[a-z0-9]+\.js)
secure: always
redirect_http_response_code: 301
static_files: dist/royAngularProjectv/\1
upload: dist/royAngularProjectv/.*
# Routing for bundle maps to serve directly
- url: /((?:runtime|main|polyfills|styles|vendor)\.[a-z0-9]+\.js\.map)
secure: always
redirect_http_response_code: 301
static_files: dist/royAngularProjectv/\1
upload: dist/royAngularProjectv/.*
# Routing for a prod styles.bundle.css to serve directly
- url: /(styles\.[a-z0-9]+\.css)
secure: always
redirect_http_response_code: 301
static_files: dist/my-app/\1
upload: dist/my-app/.*
# Routing for typedoc, assets, and favicon.ico to serve directly
- url: /((?:assets|docs)/.*|favicon\.ico)
secure: always
redirect_http_response_code: 301
static_files: dist/my-app/\1
upload: dist/my-app/.*
# Routing for service worker files serve directly
- url: /(manifest\.json|ngsw\.json|ngsw-worker\.js|safety-worker\.js|worker-basic\.min\.js|ngsw_worker\.es6\.js\.map)
secure: always
redirect_http_response_code: 301
static_files: dist/royAngularProjectv/\1
upload: dist/royAngularProjectv/.*
# Any other requests are routed to index.html for angular to handle so we don't need hash URLs
- url: /.*
secure: always
redirect_http_response_code: 301
static_files: dist/royAngularProjectv/index.html
upload: dist/royAngularProjectv/index\.html
http_headers:
Strict-Transport-Security: max-age=31536000; includeSubDomains
X-Frame-Options: DENY
最后但并非最不重要的是我的index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Roy Yip's Portfoilo using Angular 6</title>
<!-- Magnific Popup core CSS file -->
<!--<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>-->
<!--<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>-->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type='text/javascript' src='http://stills.mauer.co/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
<script src='/node_modules/smartmenus/src/jquery.smartmenus.js'></script>
<script src='assets/js/main-headlinev2.js'></script>
<script src='/src/assets/css/bootstrap-3.3.7/js/bootstrap.min.js'></script>
<script src='/src/assets/js/jquery.fitvids.js'></script>
<script src='/src/assets/js/jquery.smartmenus.min.js'></script>
<script src='/node_modules/sticky-kit/dist/sticky-kit.min.js'></script>
<script src='/src/assets/js/jquery.nicescroll.min.js'></script>
<script src='/src/assets/js/formFilling.js'></script>
<script type='text/javascript' src='/src/assets/js/imagesloaded.min.js?ver=3.2.0'></script>
<script type='text/javascript' src='/node_modules/masonry-layout/dist/masonry.pkgd.min.js'></script>
<script type='text/javascript' src='/src/assets/js/general.js'></script>
<script src="/src/assets/js/modernizr-2.6.2.min.js"></script>
<script src="/src/assets/js/contactUs.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css">
<link rel="stylesheet" href="/node_modules/font-awesome/css/font-awesome.min.css" defer>
<link rel="stylesheet" type="text/css" href="/assets/style.css">
<link rel="stylesheet" href="assets/animated-headline.css">
<link rel='stylesheet' id='bootstrap-css' href='/src/assets/css/bootstrap-3.3.7/css/bootstrap.min.css' type='text/css' media='all' />
<link rel="stylesheet" type="text/css" href='/src/assets/css/htmlTag.css' />
<link rel="stylesheet" href="/src/assets/css/animate.css">
<link rel="stylesheet" href="/src/assets/css/portfoilo-main.css"/>
<link rel="stylesheet" href="/src/assets/css/htmlTag.css"/>
<link rel="stylesheet" href="/src/assets/css/popup.css"/>
<link rel="stylesheet" type="text/css" href='/src/assets/css/common.css' />
<!--for main page-->
<!--for Portfolio page-->
<!--<link rel='stylesheet' id='mauer-stills-stylesheet-css' href='/assets/stylePaulForPort.css' type='text/css' media='all' />-->
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">-->
<!--<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>-->
<!--<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>-->
<!-- Bootstrap Js CDN -->
<!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>-->
<!-- jQuery Custom Scroller CDN -->
<!--<link rel='stylesheet' id='bootstrap-css' href='/node_modules/bootstrap/dist/css/bootstrap.min.css' type='text/css' media='all' />-->
<!--<link rel='stylesheet' id='bootstrap-css' href='http://stills.mauer.co/wp-content/themes/mauer-stills/includes/bootstrap/css/bootstrap.min.css?ver=4.9.6' type='text/css' media='all' />-->
<!--<script type='text/javascript' src='http://stills.mauer.co/wp-content/themes/mauer-stills/includes/bootstrap/js/bootstrap.min.js?ver=4.9.6'></script>-->
<!--<script type='text/javascript' src='http://stills.mauer.co/wp-includes/js/masonry.min.js?ver=3.3.2'></script>-->
<!--<script type='text/javascript' src='http://stills.mauer.co/wp-includes/js/jquery/jquery.masonry.min.js?ver=3.1.2b'></script>-->
<!--<script type='text/javascript' src='http://stills.mauer.co/wp-content/themes/mauer-stills/includes/placeholdersJS/placeholders.jquery.min.js?ver=4.9.6'></script>-->
<!--<script type='text/javascript' src='http://stills.mauer.co/wp-content/themes/mauer-stills/js/general.js?ver=1.1'></script>-->
<!--Load JavaScript-->
<!-- <script src='js/imagesloaded.pkgd.js'></script> -->
<!-- <script src='js/isotope.pkgd.js'></script> -->
<!-- <script src='js/jquery.carouFredSel-6.0.0-packed.js'></script> -->
<!-- <script src='js/jquery.mousewheel.min.js'></script> -->
<!-- <script src='js/jquery.touchSwipe.min.js'></script> -->
<!-- <script src='js/jquery.easing.1.3.js'></script> -->
<!-- <script src='js/main-headline.js'></script> -->
<!-- Icomoon Icon Fonts-->
<!-- <link rel="stylesheet" href="css/icomoon.css"> -->
<!-- Bootstrap -->
<!--<link rel="stylesheet" href="css/bootstrap.css">-->
<!-- Flexslider -->
<!-- <link rel="stylesheet" href="css/flexslider.css"> -->
<!-- Theme style -->
<!-- Modernizr JS -->
<!--<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">-->
<style type="text/css">
#lightbox .modal-content {
display: inline-block;
text-align: center;
}
#lightbox .close {
opacity: 1;
color: rgb(255, 255, 255);
background-color: rgb(25, 25, 25);
padding: 5px 8px;
border-radius: 30px;
border: 2px solid rgb(255, 255, 255);
position: absolute;
top: -15px;
right: -55px;
z-index:1032;
}
</style>
<base href="/">
</head>
<body>
<app-root class="wrapper"></app-root>
<div id="lightbox" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog">
<button type="button" class="close hidden" data-dismiss="modal" aria-hidden="true">×</button>
<div class="modal-content">
<div class="modal-body">
<img src="" alt="" />
</div>
</div>
</div>
</div>
<script type="text/javascript">
//$.noConflict();
jQuery(document).ready(function ($) {
$("#sidebar").mCustomScrollbar({
theme: "minimal"
});
$('#sidebarCollapse').on('click', function () {
$('#sidebar, #content').toggleClass('active');
$('.collapse.in').toggleClass('in');
$('a[aria-expanded=true]').attr('aria-expanded', 'false');
});
$("#wrapper").click(function() {
$(".menu").toggleClass("close");
});
});
</script>
<script type="text/javascript">
jQuery(document).ready(function($) {
var $lightbox = $('#lightbox');
$('[data-target="#lightbox"]').on('click', function(event) {
var $img = $(this).find('img'),
src = $img.attr('src'),
//src = 'https://s3.amazonaws.com/ooomf-com-files/lqCNpAk3SCm0bdyd5aA0_IMG_4060_1%20copy.jpg',
alt = $img.attr('alt'),
id = $img.attr('id'),
css = {
'maxWidth': $(window).width() - 100,
'maxHeight': $(window).height() - 100
};
if (id=='Taxi_cal')
{
src='/src/assets/images/screenshot_android_studio.jpg';
}
else if (id=='Taxi_cal_por')
{
src="/src/assets/images/Mobile_Portrait.png";
}
else if (id=='NS_photo')
{
src='/src/assets/images/NS_photo.jpg';
}
else if (id=='NCS_collages')
{
src='/src/assets/images/achievement_img/NCS_collages(1440x810).jpg';
}
else if (id=='gold_swim')
{
src='/src/assets/images/achievement_img/Gold_swimming.jpg';
}
else if (id=='sliver_swim')
{
src='/src/assets/images/achievement_img/Sliver_swimming.jpg';
}
else if (id=='broze_swim')
{
src='/src/assets/images/achievement_img/Broze_Swimming.jpg';
}
else if (id=='kayking')
{
src='/src/assets/images/achievement_img/Kayking.jpg';
}
else if (id=='ncc_course')
{
src='/src/assets/images/achievement_img/NCC_course_cert.jpg';
}
else if (id=='ncc_badge')
{
src='/src/assets/images/achievement_img/Army_NCC_badge.jpg';
}
else if (id=='ns_cert')
{
src='/src/assets/images/achievement_img/NS_cert.jpg';
}
else if (id=='ns_compelites')
{
src='/src/assets/images/achievement_img/NS_compelites.jpg';
}
else if (id=='touch_youth')
{
src='/src/assets/images/achievement_img/Touch_Youth.jpg';
}
else if (id=='TP_voulteer')
{
src='/src/assets/images/achievement_img/TP_voulteering.jpg';
}
else if (id=='yog_cert')
{
src='/src/assets/images/achievement_img/YOG_cert.jpg';
}
else if (id=='staff_wellence_mobile')
{
src='/src/assets/images/wireframe(Staff wellence)(login mobile).png';
}
else if (id=='staff_wellence_tab')
{
src='/src/assets/images/wireframe(Staff wellence)(login table).png';
}
else if (id=='staff_wellence_desk')
{
src='/src/assets/images/wireframe(Staff wellence).png';
}
else if (id=='staff_wellence_chart')
{
src='/src/assets/images/wireframe(Staff wellence)(chart page).png';
}
else if (id=='staff_wellence_main')
{
src='/src/assets/images/wireframe(Staff wellence)(main page).png';
}
else if (id=='android_studio')
{
src='/src/assets/images/Android_Studio.png';
}
else if (id=='mobile_faq')
{
src='/src/assets/images/Mobile_Portrait_FAQ.png';
}
else if (id=='mobile_popup')
{
src='/src/assets/images/Mobile_Portrait_pop_up.png';
}
else if (id=='mobile_port')
{
src='/src/assets/images/Mobile_Portrait.png';
}
else if (id=='Website_portfolio')
{
src='/src/assets/images/WebsitePortfolio.JPG'
}
$lightbox.find('.close').addClass('hidden');
$lightbox.find('img').attr('src', src);
$lightbox.find('img').attr('alt', alt);
$lightbox.find('img').css(css);
});
$lightbox.on('shown.bs.modal', function (e) {
var $img = $lightbox.find('img');
$lightbox.find('.modal-dialog').css({'width': $img.width()});
$lightbox.find('.close').removeClass('hidden');
});
});
</script>
<!--<script type='text/javascript' src='http://stills.mauer.co/wp-content/themes/mauer-stills/includes/bootstrap/js/bootstrap.min.js?ver=4.9.6'></script>
<script type='text/javascript' src='http://stills.mauer.co/wp-includes/js/imagesloaded.min.js?ver=3.2.0'></script>
<script type='text/javascript' src='http://stills.mauer.co/wp-includes/js/masonry.min.js?ver=3.3.2'></script>
<script type='text/javascript' src='http://stills.mauer.co/wp-includes/js/jquery/jquery.masonry.min.js?ver=3.1.2b'></script>
<script type='text/javascript' src='http://stills.mauer.co/wp-content/themes/mauer-stills/includes/placeholdersJS/placeholders.jquery.min.js?ver=4.9.6'></script>
<script type='text/javascript' src='http://stills.mauer.co/wp-content/themes/mauer-stills/js/general.js?ver=1.1'></script>-->
</body>
</html>
我可以知道该怎么做吗?
答案 0 :(得分:0)
乍一看,我发现app.yaml的网址配置中出现错误
((?:assets|docs)/.*|favicon\.ico)
我认为应该是
((?:assets|docs)\.*|favicon\.ico)
我也尝试复制您的问题,但是由于无法看到您要上载的目录,所以没有找到您要面对的确切问题。
我建议您以一种简单的方式开始,只需在首次访问URL时将目录中的所有文件上载,就像这样:
- url: /(.+)
static_files: dist/royAngularProjectv/\1
upload: dist/royAngularProjectv/.*
完成此操作后,您可以尝试在app.yaml中优化URL处理程序。
您还可以使用static_dir,它在匹配的url模式结束之后获取所有内容,并将其附加到static_dir上,以形成所请求文件的完整路径。您可以找到有关提供静态文件的简单示例