Разверните программу NUXT на S3 за 5 минут

1656638411 razvernite programmu nuxt na s3 za 5 minut

Гарет Фуллер

Пошаговое руководство по развертыванию NUXT с Vue.js в сегменте AWS S3 с собственным доменом и всем остальным! ?

Для начала я предполагаю, что вы кое-что знакомы с сегментами Vue.js, NUXT и Amazon AWS S3.

У нас всего 5 минут, так что начнем.

1. Установите Vue CLI

В командной строке:

npm install -g @vue/cli

потом

npm install -g @vue/cli-init

2. Создайте свое приложение NUXT

В командной строке:

vue init nuxt-community/starter-template exampleapp-frontend

потом

cd exampleapp-frontend

3. Проверьте среду разработки

В командной строке:

npm install

потом

npm run dev

Если вы перейдете в localhost:3000 в своем браузере, вы увидите типовую домашнюю страницу NUXT.

4. Создайте свою программу NUXT

В командной строке:

npm run generate

Это рождает a /dist папку с рабочим собранием программы NUXT. Это папка, которую мы будем разворачивать на S3.

5. Установите AWS CLI

Нам необходим AWS CLI, чтобы мы могли быстро создавать и управлять нашим сегментом S3 из командной строки.

pip install awscli --upgrade --user

6. Настройте AWS CLI

Этот шаг предназначен для того, чтобы вы получили разрешение создать сегмент S3 в своем аккаунте AWS с помощью командной строки.

aws configure

Затем он спросит некоторые учетные данные:

AWS Access Key ID: [ENTER YOUR ACCESS KEY]
AWS Secret Access Key: [ENTER YOUR SECRET ACCESS KEY]
Default region name: [ENTER YOUR PREFERRED REGION NAME]
Default output format: json

Для «Названия региона по умолчанию» выберите то, что вам больше всего подходит. Вот список доступных регионов для S3.

7. Создайте свое ведро S3

В командной строке:

aws s3api create-bucket --bucket yourdomain.com --region eu-west-1 --create-bucket-configuration LocationConstraint=eu-west-1

Обратите внимание, что мы назвали сегмент в соответствии с доменным именем, которое мы хотим использовать. Замените yourdomain.com любым доменом, в котором вы хотите разместить свою программу. Также замените eu-west-1 на желаемый регион.

8. Включите размещение статического веб-сайта сегмента S3

В командной строке:

aws s3 website s3://yourdomain.com/ --index-document index.html --error-document index.html

Обратите внимание, что здесь мы также устанавливаем индекс и документы об ошибках нашего сегмента статического хостинга S3. Для этого примера мы установили для них обоих страницу индекса NUXT (index.html), но в будущем вы можете изменить --error-document на страницу фактической ошибки.

9. Включите управление версиями сегмента S3

В командной строке:

aws s3api put-bucket-versioning --bucket yourdomain.com --versioning-configuration Status=Enabled

10. Создайте политику S3 для загрузки в сегмент S3

Это позволяет получить доступ к сегменту S3 через публичный URL.

В локальном каталоге создайте файл JSON под названием policy.json и добавить следующее:

{
  "Statement": [
    {
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::yourdomain.com/*"
    }
  ]
}

Затем добавьте политику в свой сегмент из командной строки:

aws s3api put-bucket-policy --bucket yourdomain.com --policy file://policy.json

11. Разверните свою программу NUXT на S3

В командной строке:

aws s3 cp dist s3://yourdomain.com --recursive

Здесь мы фактически загружаем содержимое нашего /dist папку к ведру S3, которое мы только что создали.

12. Направьте собственный URL-адрес на новое приложение

Получите URL-адрес сегмента S3 из раздела «Свойства» сегмента S3:

1*Xw6OooWmB0S-uAM6VpqyIA

Настройте корневую запись CNAME вашего специального домена, чтобы она указывала на эту конечную точку. Если вы используете Cloudflare для DNS, вы настроите его следующим образом:

1*i3kV5BUyqmcOYqUF-CuO_g

Примечание. Также может потребоваться удалить все записи DNS A, связанные с вашим доменом.

И все это!

Если вы перейдете к домену, который вы указали (в нашем случае yourdomain.com), вы можете увидеть страницу программы NUXT по умолчанию.

Не верите, что это можно сделать через 5 минут? Я следил за своей статьей, записал ее на скрин-каст и сделал это ровно 5 минут!

На самом деле полная случайность.

Вот видео:

Добавить комментарий

Ваш адрес email не будет опубликован.