Amazon S3下载index.html而非服务

Question

我已经设置了Amazon S3来为我的静态站点提供服务speakeasylinguistics.com.所有的DNS东西似乎都运行正常,因为dig +recurse +trace www.speakeasylinguistics.com输出正确的DNS信息.

但是当您使用端点在浏览器中访问该站点时,index.html页面将下载而不是被提供.我该如何解决？

我试过Chrome,Safari,FF.它发生在所有这些上.我使用亚马逊的演练来托管自定义域名.

Answer 1

针对您发布的网址运行curl -I会产生以下结果:

curl -I http://speakeasylinguistics.com.s3-website-us-east-1.amazonaws.com/
HTTP/1.1 200 OK
x-amz-id-2: DmfUpbglWQ/evhF3pTiXYf6c+gIE8j0F6mw7VmATOpfc29V5tb5YTeojC68jE7Rd
x-amz-request-id: E233603809AF9956
Date: Sun, 18 Aug 2013 07:58:55 GMT
Content-Disposition: attachment
Last-Modified: Sun, 18 Aug 2013 07:05:20 GMT
ETag: "eacded76ceb4831aaeae2805c892fa1c"
Content-Type: text/html
Content-Length: 2585
Server: AmazonS3

这条线是罪魁祸首:

Content-Disposition: attachment

如果您使用的是AWS控制台,我相信可以通过在S3中选择文件并通过删除此属性来修改其元数据来更改此控制台.

Answer 2

如果您以编程方式执行此操作,则可以在上载中设置ContentType和/或ContentDisposition参数.

[PHP示例]

      $output = $s3->putObject(array(
          'Bucket' => $bucket,
          'Key' => md5($share). '.html',
          'ContentType' => 'text/html',
          'Body' => $share,
      ));

putObject文档

Answer 3

如果您正在使用Hashicorp Terraform,您可以content-type在aws_s3_bucket_object上指定如下

resource "aws_s3_bucket_object" "index" {
  bucket = "yourbucketnamehere"
  key = "index.html"
  content = "<h1>Hello, world</h1>"

  content_type = "text/html"
}

这应该在浏览器中适当地提供您的内容.

Answer 4

对于面临此问题的其他人，您可以在 下找到 URL 中的拼写错误Properties > Static website hosting。例如，提供的 URL 是

http://{bucket}.s3-website-{region}.amazonaws.com

但应该是

http://{bucket}.s3-website.{region}.amazonaws.com

注意和.之间。websiteregion

Answer 5

如果你们尝试使用 Boto3 和 python 3.7 或更高版本上传它，请尝试使用

s3 = boto3.client('s3')
S3.upload_file(local_file,bucket,S3_file,ExtraArgs={'ContentType':'text/html'})

用于更新内容类型

Answer 6

从 NodeJS 上传到 S3 静态站点时，我遇到了同样的问题。content-type正如其他人提到的，该问题是由于上传文件时缺少 引起的。使用网页界面时，content-type会自动为您申请；但是，手动上传时您需要指定它。S3 内容类型列表。

在 NodeJS 中，您可以像这样附加内容类型：

const { extname } = require('path');
const { createReadStream } = require('fs');

// add more types as needed
const getMimeType = ext => {
    switch (ext) {
        case '.js':
            return 'application/javascript';
        case '.html':
            return 'text/html';
        case '.txt':
            return 'text/plain';
        case '.json':
            return 'application/json';
        case '.ico':
            return 'image/x-icon';
        case '.svg':
            return 'image/svg+xml';
        case '.css':
            return 'text/css'
        case '.jpg':
        case '.jpeg':
            return 'image/jpeg';
        case '.png':
            return 'image/png';
        case '.webp':
            return 'image/webp';
        case '.map':
            return 'binary/octet-stream'
        default:
            return 'application/octet-stream'    
    }
};

(async() => {
    const file = './index.html';
    const params = {
        Bucket: 'myBucket',
        Key: file,
        Body: createReadStream(file),
        ContentType: getMimeType(extname(file)),
    };
    await s3.putObject(params).promise();
})();