从AWS S3构建并提供REACT/Nextjs

au9on6nz  于 2022-10-01  发布在  React
关注(0)|答案(2)|浏览(174)

我正在构建一个Reaction/Nextjs应用程序,并计划将其推送到AWS S3并从AWS CloudFront提供服务(使用S3存储桶作为分发来源)。我将使用Route53和DNS配置将我的域(比如https://myapp.example.com)Map到CF分发。但我能处理好这件事。

在文档中,我看到我可以通过以下方式以“生产模式”构建和运行Nextjs应用程序:

npm run build
npm run start

然而,在这里,我想要获取npm run build生成的所有内容(可能.next/目录的内容??)并将该输出上传到我的S3存储桶中。

显然,我希望这将是足够的,以便当用户访问我的域时,他们被指向CF分发版(以及随后支持该分发版的S3存储桶),他们下载完全构建的+已转换的应用程序,并在他们的浏览器中加载和运行。

我怎样才能做到这一点呢?S3上需要存储什么内容?是否需要提供任何特殊配置,以便在他们从S3获取构建/传输的应用程序时立即在浏览器中运行?

3bygqnnd

3bygqnnd1#

您将需要一个反向代理服务,将请求URL与您的网站URL匹配,然后返回响应。阅读有关Nginx或类似的AWS相关服务的信息。

如果只运行构建并启动NPM命令,则需要有一个节点服务器。你可以导出,这将是一个完整的静态网站,可以在没有节点的情况下运行。

bvjxkvbb

bvjxkvbb2#

首先,您需要在构建之后从NEXT运行一个额外的命令到generate the static files

next export

此命令将创建一个out目录。此目录的内容应上载到您的S3存储桶中。

然后,您需要通过AWS控制台在您的S3存储桶上启用“静态网站托管”(通过存储桶属性启用)。对于索引和错误文档,添加index.html(或任何您的主html文件)。

您还需要允许使用以下权限访问S3文件

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::[your-bucket-name]/*"
        }
    ]
}

相关问题