Amazon S3 и Cloudfront столкнулись с проблемой zip-файла

ProgramBox

Amazon S3 и Cloudfront столкнулись с проблемой zip-файла

Post author:admin
Запись опубликована:23 февраля, 2023
Post category:Вопросы по программированию

#amazon-web-services #amazon-s3 #amazon-cloudfront

#amazon-веб-сервисы #amazon-s3 #amazon-cloudfront

Вопрос:

Я совсем новичок в AWS, и я пытаюсь загрузить zip-файл в s3 через веб-браузер и использовать приложение в Lambda, чтобы разархивировать его. После того, как файл был разархивирован в s3, я использую cloudfront для размещения веб-сайта в качестве index.html находится во вложенной папке. Однако, когда я запускаю веб-сайт в своем браузере, он отображается как загруженный файл с неизвестным типом вместо отображения содержимого html. Есть ли что-то, что я делаю неправильно?

     <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>AWS S3 File Upload</title>
    <script src="https://sdk.amazonaws.com/js/aws-sdk-2.1.12.min.js"></script>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Serverless web application example">
    <meta name="author" content="">

    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/reveal.css">
    <link rel="stylesheet" href="css/theme/black.css">

    <!-- Theme used for syntax highlighting of codes -->
    <link rel="stylesheet" href="lib/css/monokai.css">
    <link rel="stylesheet" href="css/font.css">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://js.arcgis.com/4.3/esri/css/main.css">
    <link rel="stylesheet" href="/css/ride.css">
    <link rel="stylesheet" href="/css/message.css">
</head>

<body>
    <input type="file" id="file-chooser" />
    <button id="upload-button">Upload to S3</button>
    <div id="results"></div>
    <script type="text/javascript">
    AWS.config.region = 'region'; // 1. Enter your region

    AWS.config.credentials = new AWS.CognitoIdentityCredentials({
        IdentityPoolId: 'poolid' // 2. Enter your identity pool
    });

    AWS.config.credentials.get(function(err) {
        if (err) alert(err);
        console.log(AWS.config.credentials);
    });

    var bucketName = 'bucketname'; // Enter your bucket name
    var bucket = new AWS.S3({
        params: {
            Bucket: bucketName
        }
    });

    var fileChooser = document.getElementById('file-chooser');
    var button = document.getElementById('upload-button');
    var results = document.getElementById('results');
    button.addEventListener('click', function() {

        var file = fileChooser.files[0];

        if (file) {

            results.innerHTML = '';
            var objKey = file.name;
            var params = {
                Key: objKey,
                ContentType: file.type,
                Body: file,
                ACL: 'public-read'
            };

            bucket.putObject(params, function(err, data) {
                if (err) {
                    results.innerHTML = 'ERROR: '   err;
                } else {
                    listObjs();
                }
            });
        } else {
            results.innerHTML = 'Nothing to upload.';
        }
    }, false);
    function listObjs() {
        var prefix = 'testing';
        bucket.listObjects({
            Prefix: prefix
        }, function(err, data) {
            if (err) {
                results.innerHTML = 'ERROR: '   err;
            } else {
                var objKeys = "";
                data.Contents.forEach(function(obj) {
                    objKeys  = obj.Key   "<br>";
                });
                results.innerHTML = objKeys;
            }
        });
    }
    </script>
                
    <div id="authTokenModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="authToken">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">amp;times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Your Auth Token</h4>
                </div>
                <div class="modal-body">
                    <textarea class="authToken"></textarea>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    
    <script src="js/reveal.js?2"></script>
        <script>
            // More info about config amp; dependencies:
            // - https://github.com/hakimel/reveal.js#configuration
            // - https://github.com/hakimel/reveal.js#dependencies
            Reveal.initialize({
                dependencies: [
                    { src: 'plugin/markdown/marked.js' },
                    { src: 'plugin/markdown/markdown.js' },
                    { src: 'plugin/notes/notes.js', async: true },
                    { src: 'plugin/highlight/highlight.js', async: true }
                ]
            });
        </script>
        <script>

            // More info https://github.com/hakimel/reveal.js#configuration
            Reveal.initialize({
                controls: true,
                progress: true,
                center: true,
                hash: true,

                transition: 'slide', // none/fade/slide/convex/concave/zoom

                // More info https://github.com/hakimel/reveal.js#dependencies
                dependencies: [
                    { src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
                    { src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
                    { src: 'plugin/highlight/highlight.js', async: true },
                    { src: 'plugin/search/search.js', async: true },
                    { src: 'plugin/zoom-js/zoom.js', async: true },
                    { src: 'plugin/notes/notes.js', async: true }
                ]
            });

        </script>
    <script src="js/vendor/jquery-3.1.0.js"></script>
    <script src="js/vendor/bootstrap.min.js"></script>
    <script src="js/vendor/aws-cognito-sdk.min.js"></script>
    <script src="js/vendor/amazon-cognito-identity.min.js"></script>
    <script src="https://js.arcgis.com/4.3/"></script>
    <script src="js/config.js"></script>
    <script src="js/cognito-auth.js"></script>
    <script src="js/esri-map.js"></script>
    <script src="js/ride.js"></script>
</body>

</html>

Любая помощь будет оценена.
Спасибо

1. Проверьте тип содержимого в S3 вашего index.html

2. Пожалуйста, поделитесь кодом загрузки и текущими настройками корзины S3.

3. Я делюсь приведенным ниже кодом в качестве ответа. Спасибо за вашу помощь.

4. Привет, вы можете отредактировать свой вопрос и добавить код в вопрос, вместо того, чтобы делиться им в качестве ответа. Поскольку многие люди не могут отличить ответ от ответа. Раздел ответов предназначен только для ответов. Не могли бы вы удалить это и включить в свой вопрос?

5. Хорошо. Я отредактировал и перенес код в вопросы. Спасибо, что рассказали

Ответ №1:

Вам необходимо настроить статический веб-хостинг в корзине S3 для отображения содержимого html. Пожалуйста, ознакомьтесь с этой документацией.