Недавно у меня есть шанс развернуть приложение React, используя Next.js, который является частью компонентов JS. Если вы новичок с Nextjs, вы можете обратиться к этому ссылка Чтобы узнать, что это такое.
Вы можете генерировать все активы, такие как CSS, JS, ETC автоматически с помощью Next.js, а затем, попробуйте загрузить его на S3 (если вы новичны с AWS S3, обратитесь к этому ссылка ) и подайте ее через Cloudfront ( Если вы новичок с AWS CloudFront, обратитесь к этому ссылка ). С помощью этой Cloudfront S3 + мы можем полностью обслуживать наши активы от ресурсов AWS вместо использования наших ресурсов обслуживания.
Я начал проводить исследование онлайн и нашел фрагмент в Github, который может быть так много помощи для этого проекта. Вот ссылка на фрагмент
Итак, что нам нужно подготовить перед этим проектом, есть правильный доступ IAM (если вы новичок с AWS IAM, обратитесь к этому ссылка ) для доступа к S3 и Cloudfront, а затем создать сертификат для Cloudfront/S3 Поскольку мы собираемся сохранить наши активы внутри этих услуг.
На моей первой попытке я следую по статье слепо и обнаружил, что каждый раз, когда я развернул новые услуги, все активы, которые были сгенерированы из Nextjs, всегда будут иметь разные преимущества, чем активы, которые NextJS пытались получить доступ, когда мы запустим приложение. Это потому, что мы пытались создать активы из приложения внутри нашего Ci/CD, а затем попытаемся снова создать наше приложение внутри Dockerfile, что сделает его двойным прогресным для генерации активов в одном процессе сборки приложений.
Затем я понял проблему, я попытался обновить и изменять DockerFile для удовлетворения наших потребностей, которые мы хотим загрузить активы вскоре после того, как мы создаем приложение.
После пары «играть», это мой докер выглядит как:
FROM node:10.16.0 as build ENV AWS_ACCESS_KEY_ID=give-your-AWS access KEY ENV AWS_SECRET_ACCESS_KEY=give-your-AWS-secret-key #it will made awscli we generated, can be access in node10 ENV PATH=/root/.local/bin:$PATH RUN apt-get update && apt-get install -y python3-pip && pip3 install awscli --upgrade WORKDIR /app ENV PATH /app/node_modules/.bin:$PATH COPY ./package.json /app # To handle 'not get uid/gid' RUN npm config set unsafe-perm true RUN npm install --silent RUN npm install react-scripts@3.0.1 -g --silent COPY ./app RUN npm run build RUN npm run export #it can make us running in multiple environment RUN mv out/_next . RUN mv out _out RUN mkdir -p out/builds/Our-BUild-Hash RUN mv _out/* out/builds/Our-BUild-Hash RUN rm -rf _out RUN mv _next out/ RUN aws s3 cp ./out/_next s3://name-of-yours3bucket/test/_next --cache-control public --acl public-read --recursive RUN aws s3 cp .//static s3://name-of-yours3bucket/test/static --cache-control public --acl public-read --recursive RUN aws s3 cp ./out/builds s3://name-of-yours3bucket/test/builds --acl public-read --recursive RUN aws s3 sync s3://name-of-yours3bucket/test/builds/$BITBUCKET_COMMIT s3://name-of-yours3bucket/test/current --delete --acl public-read FROM node:10.16.0 COPY --from=0 /app /app WORKDIR /app EXPOSE 3000 CMD npm run start
Здесь есть пара новых вещей, в Docker Node 10.16.0. Мы все еще можем установить AWS CLI, похожий на процесс установки Ubuntu (в другой статье, я нашел почти аналогичный процесс, но с узлом 9).
Другие вещи, которые мы можем сделать с несколькими средами, состоит в том, что мы можем сделать процесс в том же ведре, но в разной папке.
Оригинал: «https://dev.to/iilness2/practical-approach-deploy-nextjs-with-s3-4k3l»