Что будет покрыто?

Это учебное пособие является лишь минимальным учебным пособием и научит вас, как настроить среду разработки для всех будущих веб-руководств HawaiiDev.
В этом учебном пособии рассматриваются:

  • Настройка VSCode
  • Создание папки сервера
  • Создание интерфейса React с помощью create-react-app
  • Настройка внешнего интерфейса и внутреннего интерфейса для общего репозитория
  • Развертывание интерфейса для netlify
  • Развертывание серверной части в Heroku с помощью Docker

Шаг 1. VSCode

  • Начните с загрузки VSCode с: https://code.visualstudio.com/download
  • Когда VSCode установлен, регистрация/авторизация в левом нижнем углу.
  • Когда вы вошли в систему, перейдите в «Файл/Открыть папку» и создайте новую папку. Назовите эту папку именем вашего проекта. Теперь вы готовы к шагу 2. Настройка пакетов.

Шаг 2. Настройка расширений

Если вы хотите, вы можете добавить расширения в VSCode. Вот мой список предпочтительных расширений для веб-разработки.

  • Автоматическое переименование тега: полезно при работе с реакцией, поскольку он быстро меняет конечный тег при изменении открытого тега. Особенно полезно в больших файлах.
  • Docker: необходим для работы с файлами Docker, которые будут рассмотрены в этом руководстве.
  • dotENV: подсветка синтаксиса для файлов .env (файлов окружения)
  • Material Icon Theme: Более приятные значки в структуре папок.
  • One Dark Pro: цветная тема для VSCode
  • Prettier — средство форматирования кода: форматирует ваш код в хороший и структурированный вид.

Шаг 3: Инициализация сервера

Теперь появляется много команд:
Снизу можно перетащить терминальную сессию. Здесь мы потратим большую часть учебного времени.
Первая команда:

mkdir server; cd ./server

Что это на самом деле делает? Команду можно разделить на 2 части (mkdir server, cd ./server). Первая часть создает каталог с именем server. Вторая часть перемещает терминал в эту папку для дальнейших команд. Теперь, когда у нас есть каталог сервера, мы можем запустить еще одну команду для инициализации каталога сервера.
Вторая команда: npm init
Вам будет предложено ввести несколько полей.

Имя пакета: имя этого сервера. Я назову свой «сервер»

  1. Версия: какая версия этого сервера. Я просто нажму Enter, и он будет использовать значение по умолчанию «1.0.0».
  2. Описание: краткое описание, описывающее сервер. Я оставлю это пустым на данный момент
  3. Точка входа: где должен запускаться сервер. Я установлю это значение по умолчанию «index.js»
  4. Тестовая команда: где NPM может найти ваш тест. Поскольку это не будет охватывать тесты, я оставлю это пустым.
  5. Репозиторий Git: Является ли этот каталог сервера частью репозитория git. Мы создадим это позже, так что оставьте это пустым
  6. Ключевые слова: если вы загрузите это на NPM.js, люди смогут искать эти ключевые слова и находить ваш серверный пакет.
  7. Автор: Ваше имя/псевдоним. Я наберу «HawaiiDev»
  8. Лицензия: Какова лицензия этого кода. Я буду использовать «ISC» по умолчанию.

Теперь он спросит, все ли у вас в порядке с настройками. Нажмите Enter, и все готово. :D

Шаг 4: Инициализация клиента React

В этом уроке мы будем использовать React для внешнего интерфейса. Чтобы установить реакцию, нам сначала нужно вернуться в корневой каталог в терминале.
В терминале введите:

cd ../ (Notice the double dots)

Во-вторых, введите:

 npx create-react-app client — template typescript

Это займет некоторое время, но как только оно будет завершено, у вас будет реагирующее приложение в каталоге с именем client. Кстати, вы можете изменить «клиент» на что угодно. Просто помните об этом на следующих шагах.
«npx create-react-app» — это команда для создания шаблонного приложения реагирования с установленными наиболее важными компонентами.

Шаг 5: Создание репозитория

Теперь, когда у нас есть интерфейс (клиент) и сервер (сервер), мы можем создать репозиторий для сохранения в облаке. Для этого начните с ввода в терминале:

New-File README.md

Это создаст файл в корневом каталоге. Дважды щелкните этот файл и напишите, о чем этот сайт. Объясните, например, что он делает.
Во-вторых, перейдите в левую часть VSCode и найдите значок с 3 точками и 2 линиями. Щелкните этот значок, должны появиться 2 кнопки, если вы вошли в GitHub, как описано в первом шаге. Нажмите самую верхнюю кнопку с надписью «Инициализировать репозиторий». Будет предупреждение о слишком большом количестве файлов, но это нормально, сейчас мы это исправим. Две кнопки должны были измениться на список файлов с некоторыми кнопками вверху. Нажмите кнопку обновления в верхней части элемента управления версиями. Это уменьшит количество файлов примерно до 22.

Шаг 6: Настройка сервера

Для этого и последующих руководств сервер будет состоять из Express и MongoDB. Чтобы установить эти пакеты npm, сначала введите эту команду.

cd ./server

Затем введите: npm install expressmonk
Теперь система управления версиями откроется с количеством добавленных файлов. Чтобы исправить это, запустите эту команду:

New-Item .gitignore

Затем, чтобы открыть файл, дважды щелкните файл с именем .gitignore в нем в навигации слева под желтым каталогом с именем server. Здесь мы напишем пару строк, о которых вам не стоит беспокоиться в данный момент. Просто помните, что они здесь и удаляйте файлы из системы контроля версий.
Пишите:

/node_modules
.env

Сохраните файл, вернитесь к системе управления версиями и нажмите «Обновить». Почти все файлы должны исчезнуть.
Поскольку я хочу использовать машинописный текст на сервере, я установлю его сейчас. Во-первых, typescript — это способ строго типизировать код javascript. Установите typescript с помощью этой команды:

npm install typescript — save-dev

После этого создайте новый файл с именем tsconfig.json с помощью следующей команды:
New-Item tsconfig.json
Откройте этот файл и вставьте это:

{ “compilerOptions”: { “target”: “es5”, “module”: “commonjs”, “forceConsistentCasingInFileNames”: true, “strict”: true, “skipLibCheck”: true, “baseUrl”: “./”, “paths”:{ “*”:[“src/Interfaces/Custom/*”] }, “typeRoots”: [“@types”,”./node_modules/@types”] }, “include”: [ “./src/” ] }

Сохраните и закройте файл. При желании щелкните файл правой кнопкой мыши и выберите «Форматировать документ с помощью», а затем выберите JSON, чтобы расположить параметры в удобном виде.
Теперь, когда машинописный текст включен, я установлю еще несколько пакетов, которые я считаю удобными и полезными.

  1. cors: обеспечивает межсайтовый доступ и позволяет клиенту взаимодействовать с сервером.
  2. dotenv: загрузить файл .env с парами ключ-значение
  3. nodemon: Быстрое повторное развертывание сервера при сохранении файла
  4. ts-node: запустить typescript без предварительной компиляции в javascript

Установите все эти скрипты с помощью этой команды:

npm install cors dotenv nodemon ts-node

Поскольку cors и express не поставляются автоматически с машинописными типами, установите их с помощью этой команды:

npm install @types/cors @types/express — save-dev

Теперь, когда все установлено, мы можем открыть package.json и отредактировать раздел scripts, чтобы он выглядел следующим образом:

{
“start”:”node src/index.js”,
“dev”:”nodemon — exec ts-node src/index.ts”,
“build”:”tsc && node src/index.js”
}

Наконец, мы можем проверить все это, запустив в терминале следующую команду:
New-Item src -ItemType Directory; New-Item src/index.ts
Откройте только что созданный файл, найденный в папке src/, и напишите «console.log('Hello World!');»
Сохраните файл и откройте терминал для окончательного время и бег:

npm run dev

В терминале вы должны увидеть «Hello World!». Поздравляем, сервер настроен и готов.
Остановите сервер в терминале, нажав Ctrl+C, а затем Y и, наконец, Enter
Для получения дополнительной информации об использовании «экспресс» на сервере следуйте этому руководству: Скоро будет
Для получения дополнительной информации об использовании «MongoDB» с монахом на сервере следуйте этому руководству: Скоро будет

Шаг 7: Настройка клиента

Приложение npx create-react-app поставляется с множеством файлов, которые в данный момент не нужны. Мы начнем с удаления этих файлов. Запустите эту команду:

cd ../client/

Теперь, когда мы находимся в клиентском каталоге, откройте слева в /client/ каталог src. Чтобы удалить файл, выберите этот файл в файловом браузере и нажмите «Удалить».
Удалите эти файлы:

  • app.css
  • приложение.test.tsx
  • index.css
  • логотип.svg
  • реакция-приложение-env.d.ts
  • отчетWebVitals.ts
  • setupTests.ts

После удаления файлов откройте файл с именем index.tsx. Вверху удалите последний оператор импорта (импортируйте reportWebVitals из «./reportWebVitals»;), а также удалите оператор импорта с «./index.css». В нижней части файла удалите комментарий, а также вызов reportWebVitals(). Сохраните файл и вместо этого откройте app.tsx. В верхней части файла удалите оба «импортировать логотип из «./logo.svg»;» и «импортировать «./App.css»;». В операторе возврата удалите все и вместо этого верните тег h1 с текстом «Hello World!». Сохраните файл. Все настройки внешнего интерфейса выполнены:D.
Для проверки откройте терминал и запустите:

npm start

Это должно открыть веб-страницу с URL-адресом http://localhost:3000
На странице в верхнем левом углу вы должны увидеть Hello World!
Для получения дополнительной информации о настройке клиента React. см. это руководство: Скоро будет

Шаг 8: Загрузите это в Интернет

Публикация репозитория на GitHub

Прежде чем загружать это в Интернет, сохраните все файлы и закройте их. Перейдите в раздел управления версиями и в окне сообщения введите «init». Над окном сообщения должна появиться галочка. Нажмите на это и во всплывающем окне нажмите «Да». Все файлы должны исчезнуть, и должна появиться кнопка «Опубликовать ветку», нажмите ее. Выберите частный или общедоступный репозиторий. Подождите, пока репозиторий будет создан, а затем перейдите к следующему шагу.

Развертывание клиента с помощью Netlify

Поскольку мне нужен файл .env при развертывании моего клиента, я сначала перейду в каталог клиента и создам новый файл с именем «.env»
Теперь в приложении я могу использовать переменные среды с помощью process.env. Просто убедитесь, что все переменные .env в приложении реагирования начинаются с REACT_APP_.
Сохраните все изменения и отправьте их в репозиторий. Затем откройте «https://www.netlify.com/» и зарегистрируйтесь или войдите в систему. Когда вы вошли в систему, перейдите к сайтам и нажмите «Добавить новый сайт». Выберите Импортировать существующий репозиторий в раскрывающемся списке. Затем выберите GitHub внизу страницы, это авторизует ваш GitHub и покажет вам все ваши репозитории. Найдите и выберите репозиторий, который был только что создан на предыдущих шагах. Должна появиться новая страница с множеством настроек. Хозяином должен быть ты сам, а веткой должен быть хозяин. Параметры сборки следующие:

  • Базовый каталог: /клиент/
  • Команда сборки: npm run build
  • Опубликовать каталог: /client/build

В разделе «Дополнительно» выберите «Новая переменная» и скопируйте все переменные .env, которые вы настроили для своего приложения.
Когда вы закончите, выберите «Развернуть сайт» и подождите, пока Netlify сделает свое волшебство. Вы будете перенаправлены на новую страницу. Прокрутите немного вниз и нажмите на развертывание с оранжевой кнопкой «Сборка», здесь вы увидите журнал вашей сборки, происходящей в реальном времени. Пока вы ждете, вы можете сыграть в матч в правом верхнем углу веб-страницы, если вам нечего делать. Когда сборка завершена, над журналами сборки должна появиться кнопка Preview. Нажмите эту кнопку и просмотрите свой сайт в Интернете. Единственная проблема — это URL, верно? У него очень странный и запутанный URL, сейчас мы его изменим. Вернитесь обратно в netlify и нажмите «Deploys». В разделе «Настройки сайта» перейдите к «Управление доменом» и нажмите «Параметры» справа. Нажмите кнопку «Редактировать имя сайта» и дайте своему сайту красивое имя. Сохраните имя, подождите несколько секунд и перейдите к новому URL-адресу. Помните, что netlify добавляет к каждому URL-адресу префикс .netlify.com, если только вы не покупаете собственный домен. Дополнительную информацию об этом см. в этом руководстве: Скоро будет
Теперь ваш сайт запущен и готов к просмотру вашими друзьями и семьей.

Развертывание сервера с помощью Docker и Heroku

Чтобы развернуть сервер, мы создадим образ докера с сервером, чтобы упростить развертывание сервера в Heroku. Чтобы узнать больше о том, что такое докер, перейдите по ссылке: https://www.docker.com/. Для развертывания с помощью docker вам сначала нужно создать учетную запись docker здесь: https://hub.docker.com/signup.
После этого вам также нужно будет создать учетную запись на Heroku здесь: https ://signup.heroku.com/.
После того, как вы зарегистрируетесь как в Heroku, так и в Docker, перейдите по этой ссылке и установите интерфейс командной строки Heroku: https://devcenter.heroku.com/articles/heroku- cli
Теперь, когда все установлено, мы можем открыть VSCode и выбрать наш проект. В терминале убедитесь, что вы находитесь в корневом каталоге проекта, и введите:

cd ./server

После этого типа:

New-Item Dockerfile; New-Item .dockerignore

Откройте Dockerfile и вставьте это:

FROM node:latest
WORKDIR /app
COPY package*.json ./
COPY tsconfig*.json ./
RUN npm install
COPY . .
ENV PORT=8080
EXPOSE 8080
CMD [“npm”,”run”,”build”]

Теперь ваш Dockerfile готов, и проект готов к загрузке в Heroku.
Чтобы загрузить сервер в Heroku, откройте терминал и выполните:

heroku login

Нажмите любую клавишу и войдите в Heroku в браузере. По завершении входа вернитесь в VSCode.
После входа введите в терминале:

heroku create

Подождите, пока Heroku создаст для вас новый проект.
Когда проект будет создан, запустите:

docker build -t YOURNAME/APPNAME:VERSION .

ОБРАТИТЕ ВНИМАНИЕ НА ТОЧКУ В КОНЦЕ, КОТОРАЯ НЕОБХОДИМА ДЛЯ КОМАНДЫ
В моем случае это будет «docker build -t hawaiidev/test:latest».
Когда изображение будет готово построить его можно пометить и загрузить в Heroku. В терминале запустить:

docker images

Найдите IMAGE ID вновь созданного изображения и скопируйте его в буфер обмена. Затем запустите:

docker tag PASTE_THE_ID_HERE registry.heroku.com/YOUR_UNIQUE_APPNAME/web

Когда образ докера подготовлен для Heroku, войдите в контейнеры Heroku с помощью:

heroku container:login

Это кажется излишним, но раньше вы входили в Heroku, а теперь вы также входите в ту часть Heroku, которая обрабатывает контейнеры и докеры. :D
Теперь, когда мы вошли в систему и у нас есть изображение, мы можем загрузить его с помощью этой команды:

heroku container:push web -a YOUR_UNIQUIE_APPNAME

Теперь образ загружен в Heroku и готов к развертыванию, разверните запуск сервера:

heroku container:release web -a YOUR_UNIQUIE_APPNAME

Поздравляем, клиент и сервер развернуты

Что не было покрыто?

Главное, чего не хватает в этом туториале, — это надлежащего интерфейса или бэкенда. Это руководство было предназначено только для того, чтобы охватить абсолютный минимум запуска сервера и внешнего интерфейса. Мы установили несколько пакетов на серверную часть, которые никогда не использовались, но будут необходимы для последующих руководств, которые будут ссылаться на это руководство как на базовую точку. В следующем руководстве будет рассмотрен стабильный способ связи между сервером и клиентом с помощью общей библиотеки интерфейсов и надежного REST API. Обязательно следите за этим.