web-dev-qa-db-fra.com

Comment déployer un site Web statique à AWS S3 en utilisant NEXTJS

Je suis toujours nouveau à React et j'ai commencé à écrire un site Web statique à l'aide de NextJS. Mais lorsque je veux déployer sur AWS S3, j'ai des problèmes seulement. J'avais l'habitude d'utiliser Webpack uniquement et quand je tiens à taper yarn build Je reçois un fichier dist et il est facile pour moi de télécharger le contenu dans le fichier dist sur le godet S3.

Cependant, après avoir utilisé NEXTJS pour SSR, j'ai trouvé qu'après avoir construit le projet, je reçois un .next Fichier avec cache, server et static Subfiles ainsi que BUILD_ID, build-manifest.json, react-loadable-manifest.json, records.json. Je n'ai aucune idée de ce que je devrais télécharger sur S3 et ce que signifient ces fichiers.

C'est peut-être une question idiote mais j'ai déjà passé plus d'une journée à essayer de trouver la solution.

javascriptreactjsamazon-web-servicesnext.js
8
CH L

Vous pouvez changer Package.json comme suit.

"build": "next build && next export",

Ensuite, vous pouvez exécuter "construction de fil". Il générera des répertoires de haut niveau/de votre projet. Téléchargez tous les contenus dans le dossier en utilisant la commande pour plus de commodité.

aws s3 sync ./out s3://your-s3-bucket-name

Assurez-vous d'avoir défini votre godet pour servir le site Web statique et disposez de la stratégie de godet suivante.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": {
                "AWS": "*"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::your-bucket-name/*"
        },
    ]
}
1
R.Cha

La question originale est très ancienne, si vous êtes arrivé ici en utilisant une recherche, et recevez Error: Cannot export when target is not server - Assurez-vous de supprimer la cible target: 'serverless' de next.config.js

Sinon, suivez la réponse ci-dessus de @ r.cha https://stackoverflow.com/a/62465471/13749957 qui résume les documents ici et ajoute des étapes spécifiques S3 HTTPS: // NextJs.org/docs/advanced-Features/static-html-export ====

0
Ramakay