AWS усиливается Это набор инструментов и услуг, чтобы помочь Frontend Web и Mobile Developers Build Build Bearable Applications с инфраструктурой AWS, который включает в себя:
- Усилить консоль Для управления веб-приложением Frontend, Backeng, Ci/Cd и admin ui
- Усилить CLI Для создания и развертывания Облачность стеки
- Библиотеки с открытым исходным кодом для JavaScript , IOS С Android и Трепетание
- Admin ui Для моделирования данных, Добавление аутентификации, авторизации и управления пользователями и группами
Благодаря этим инструментам объединены, усиление достигла уникальной синекдоче, создавая свою собственную самоуверенную версию AWS в самой AWS.
Этот учебник будет следовать за руководством по работе на реагирование от Усилить документацию , кроме мы будем использовать виту и Официально поддерживается Реактивный шаблон вместо Create-raction-app Отказ Таким образом, дети будут знать, что я, «с этим».
Настраивать
Код этой статьи можно найти на моем Github Отказ
Настроить AWS CLI с AWS настроить
Убедитесь, что у вас есть AWS CLI Установлен и AWS Account Отказ Для общего пользования AWS Configure
Рекомендуется как самый быстрый способ настроить установку AWS CLI.
aws configure
Когда вы вводите эту команду, AWS CLI предлагает вам четыре части информации:
- Доступ ключевое идентификатор
- Секретный ключ доступа
- AWS Область
- Формат вывода
Перейти к Мои учетные данные о безопасности Чтобы найти идентификатор ключа доступа, ключ секретного доступа и региону по умолчанию. Вы можете оставить выходной формат пустым.
AWS Access Key ID:AWS Secret Access Key: Default region name: Default output format [None]:
Установите усилитель CLI
npm install -g @aws-amplify/cli
Выход:
--------------------------------------------- Successfully installed the Amplify CLI --------------------------------------------- JavaScript Getting Started https://docs.amplify.aws/start Android Getting Started https://docs.amplify.aws/start/q/integration/android iOS Getting Started https://docs.amplify.aws/start/q/integration/ios Flutter Getting Started https://docs.amplify.aws/start/q/integration/flutter Amplify CLI collects anonymized usage data, which is used to help understand how to improve the product. If you don't wish to send anonymized Amplify CLI usage data to AWS, run amplify configure --usage-data-off to opt-out. Learn more - https://docs.amplify.aws/cli/reference/usage-data + @aws-amplify/cli@4.50.2 added 1186 packages from 776 contributors in 79.825s
Создать приложение React
Вам нужно приложение React, что означает, что вы должны создать один. Вы могли бы сделать разумную вещь и использовать инструмент, буквально называемый Create-raction-app Или вы можете слушать случайного человека в Интернете и использовать эту вещь, о которой вы никогда не слышали и не знаете, как произносится. Если вы не убеждены, вы можете обратиться к Этот блог пост от вышеупомянутого случайного человека в интернете.
Инициализировать проект
Vite (Французское слово для «быстро», произносится /vit/
, рифмы с «Улицом») – это инструмент сборки, который направлен на то, чтобы обеспечить более быстрый опыт работы и умеренного развития для современных веб-проектов. Он состоит из двух частей:
- Сервер Dev с заменой горячей модуля (HMR)
- Команда сборки, которая связывает ваш код с Рулон предварительно сконфигурирован для вывода высоко оптимизированных статических активов для производства
yarn create @vitejs/app ajcwebdev-amplify --template react
Выход:
success Installed "@vitejs/create-app@2.2.5" with binaries: - create-app - cva Scaffolding project in /Users/ajcwebdev/ajcwebdev-amplify... Done. Now run: cd ajcwebdev-amplify yarn yarn dev ✨ Done in 2.18s.
Начать разработку сервера
cd ajcwebdev-amplify yarn yarn dev
vite v2.2.4 dev server running at: > Local: http://localhost:3000/ > Network: http://10.0.0.175:3000/ ready in 668ms.
Вы можете нажать на счетчик. Или вы не могли нажать на счетчик и вместо этого живут остаток жизни, задаваясь вопросом, будет ли она на самом деле увеличить или нет.
Структура проекта
├── src │ ├── App.css │ ├── App.jsx │ ├── index.css │ └── main.jsx ├── .gitignore ├── index.html ├── package.json ├── vite.config.js └── yarn.lock
Package.json.
Наше package.json
Включает в себя скрипты для запуска сервера разработки, создания для производства и обслуживания локальных превью продуктов производства.
{ "name": "ajcwebdev-amplify", "version": "0.0.0", "scripts": { "dev": "vite", "build": "vite build", "serve": "vite preview" }, "dependencies": { "react": "^17.0.0", "react-dom": "^17.0.0" }, "devDependencies": { "@vitejs/plugin-react-refresh": "^1.3.1", "vite": "^2.2.3" } }
Компонент приложения
// src/App.jsx import React, { useState } from 'react' import logo from './logo.svg' import './App.css' function App() { const [count, setCount] = useState(0) return () } export default App![]()
Hello Vite + React!
Edit App.jsx and save to test HMR updates.
Learn React {' | '} Vite Docs
Изменить вещи
// src/App.jsx import React from 'react' import logo from './logo.svg' import './App.css' function App() { return ( ) } export default App
Инициализировать усилитель проекта с усилением init
Чтобы инициализировать новый проект усиления, запустить усилить init
Из корневого каталога вашего приложения Frontend.
amplify init
? Enter a name for the project ajcwebdevamplify ? Enter a name for the environment dev ? Choose your default editor: Visual Studio Code ? Choose the type of app that you're building javascript Please tell us about your project ? What javascript framework are you using react ? Source Directory Path: src ? Distribution Directory Path: dist ? Build Command: yarn build ? Start Command: yarn dev Using default provider awscloudformation ? Select the authentication method you want to use: AWS profile For more information on AWS Profiles, see: https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-profiles.html ? Please choose the profile you want to use default
Выход:
CREATE_IN_PROGRESS amplify-ajcwebdevamplify-dev-172320 AWS::CloudFormation::Stack - Sun May 09 2021 17:23:21 User Initiated CREATE_IN_PROGRESS AuthRole AWS::IAM::Role - Sun May 09 2021 17:23:26 CREATE_IN_PROGRESS UnauthRole AWS::IAM::Role - Sun May 09 2021 17:23:26 CREATE_IN_PROGRESS DeploymentBucket AWS::S3::Bucket - Sun May 09 2021 17:23:26 CREATE_IN_PROGRESS AuthRole AWS::IAM::Role - Sun May 09 2021 17:23:26 Resource creation Initiated CREATE_IN_PROGRESS UnauthRole AWS::IAM::Role - Sun May 09 2021 17:23:26 Resource creation Initiated CREATE_IN_PROGRESS DeploymentBucket AWS::S3::Bucket - Sun May 09 2021 17:23:27 Resource creation Initiated CREATE_COMPLETE UnauthRole AWS::IAM::Role - Sun May 09 2021 17:23:41 CREATE_COMPLETE AuthRole AWS::IAM::Role - Sun May 09 2021 17:23:41 CREATE_COMPLETE DeploymentBucket AWS::S3::Bucket - Sun May 09 2021 17:23:48 CREATE_COMPLETE amplify-ajcwebdevamplify-dev-172320 AWS::CloudFormation::Stack - Sun May 09 2021 17:23:50 ✔ Successfully created initial AWS cloud resources for deployments. ✔ Initialized provider successfully. Initialized your environment successfully. Your project has been successfully initialized and connected to the cloud!
Развертывание для хостинга с Cloudfront и S3
amplify add hosting
? Select the plugin module to execute Amazon CloudFront and S3 ? Select the environment setup: DEV (S3 only with HTTP) ? hosting bucket name ajcwebdevamplify-20210509181751-hostingbucket ? index doc for the website index.html ? error doc for the website index.html You can now publish your app using the following command: Command: amplify publish
amplify publish
✔ Successfully pulled backend environment dev from the cloud. Current Environment: dev | Category | Resource name | Operation | Provider plugin | | -------- | --------------- | --------- | ----------------- | | Hosting | S3AndCloudFront | Create | awscloudformation | ? Are you sure you want to continue? Yes
Выход:
UPDATE_IN_PROGRESS amplify-ajcwebdevamplify-dev-181429 AWS::CloudFormation::Stack Sun May 09 2021 18:18:10 User Initiated CREATE_IN_PROGRESS hostingS3AndCloudFront AWS::CloudFormation::Stack Sun May 09 2021 18:18:15 CREATE_IN_PROGRESS hostingS3AndCloudFront AWS::CloudFormation::Stack Sun May 09 2021 18:18:16 Resource creation Initiated CREATE_IN_PROGRESS amplify-ajcwebdevamplify-dev-181429-hostingS3AndCloudFront-OTPFNWODIIBU AWS::CloudFormation::Stack Sun May 09 2021 18:18:16 User Initiated CREATE_IN_PROGRESS S3Bucket AWS::S3::Bucket Sun May 09 2021 18:18:20 CREATE_IN_PROGRESS S3Bucket AWS::S3::Bucket Sun May 09 2021 18:18:21 Resource creation Initiated CREATE_COMPLETE S3Bucket AWS::S3::Bucket Sun May 09 2021 18:18:44 CREATE_COMPLETE amplify-ajcwebdevamplify-dev-181429-hostingS3AndCloudFront-OTPFNWODIIBU AWS::CloudFormation::Stack Sun May 09 2021 18:18:45 CREATE_COMPLETE hostingS3AndCloudFront AWS::CloudFormation::Stack Sun May 09 2021 18:18:50 UPDATE_COMPLETE_CLEANUP_IN_PROGRESS amplify-ajcwebdevamplify-dev-181429 AWS::CloudFormation::Stack Sun May 09 2021 18:18:52 UPDATE_COMPLETE amplify-ajcwebdevamplify-dev-181429 AWS::CloudFormation::Stack Sun May 09 2021 18:18:53 All resources are updated in the cloud Hosting endpoint: http://ajcwebdevamplify-20210509181751-hostingbucket-dev.s3-website-us-west-1.amazonaws.com yarn run v1.22.10 warning package.json: No license field $ vite build vite v2.2.4 building for production... ✓ 21 modules transformed. dist/assets/favicon.17e50649.svg 1.49kb dist/assets/logo.ecc203fb.svg 2.61kb dist/index.html 0.51kb dist/assets/index.0673ce28.css 0.76kb / brotli: 0.40kb dist/assets/index.e0cc5c52.js 1.32kb / brotli: 0.55kb dist/assets/vendor.de62f314.js 127.23kb / brotli: 36.03kb ✨ Done in 1.87s. frontend build command exited with code 0 Publish started for S3AndCloudFront ✔ Uploaded files successfully. Your app is published successfully. http://ajcwebdevamplify-20210509181751-hostingbucket-dev.s3-website-us-west-1.amazonaws.com
Затем вы будете доставлены в Очень запоминается конечная точка для вашего ведра S3.
[1] – в котором часть чего-то представляет собой целое или наоборот.
Оригинал: “https://dev.to/ajcwebdev/a-first-look-at-amplify-with-vite-1g7j”