Я создал это – что теперь? Как развернуть приложение React на DigitalOcean Droplet — Мир компьютерных инноваций

1657314019 ya sozdal eto – chto teper kak razvernut prilozhenie react

Андреа Стрингем

ZuIBTudJzFcboPgjNVD5b9my0hxkRgJye-pQ
Фото Томаса Квистхольта

Большинство начинающих разработчиков уже загружали сайты со статическим HTML. Процесс не слишком сложен, поскольку вы просто перемещаете файлы с одного компьютера на другой, а затем BAM! Веб-сайт.

Но те, кто занимался изучением React, часто тратят сотни или даже тысячи часов на изучение компонентов, реквизитов и состояния, чтобы остаться с вопросом: «Как это разместить?». Не бойтесь, друг разработчик. Развертывание вашего последнего шедевра немного более глубоким, но не слишком сложным. Во как:

Подготовка к производству

Есть несколько вещей, которые вы хотите сделать, чтобы подготовить свою программу к развертыванию.

Выключите обслуживающих работников

Если вы использовали что-то вроде create-react-app для начальной загрузки вашего проекта, вы хотите отключить встроенный сервис-воркер, если вы специально не интегрировали его для работы с вашим приложением. Хотя обычно он безвреден, он может вызвать определенные проблемы, поэтому лучше просто избавиться от его заранее. Найдите эти строки в своем src/index.js файл и удалите их:registerServiceWorker(); import registerServiceWorker from ‘register-service-worker’

Подготовьте свой сервер

Чтобы получить максимальную отдачу от ваших денег, рабочая сборка снизит код и удалит лишние пробелы и комментарии, чтобы загружать его как можно скорее. Он создает новый каталог под названием /build, и нам нужно убедиться, что мы сообщаем Express использовать его. На странице вашего сервера добавьте эту строку: app.use( express.static( `${__dirname}/../build` ) );

Далее вам нужно убедиться, что ваши маршруты знают, как добраться до вашего файла index.html. Для этого нам нужно создать конечную точку и разместить ее под другими конечными точками в файле сервера. Это должно выглядеть так:

const path = require('path')app.get('*', (req, res)=>{  res.sendFile(path.join(__dirname, '../build/index.html'));})

Создайте производственную сборку

Теперь, когда Express знает, как использовать /build каталог, пора его создать. Откройте свой терминал, убедитесь, что вы находитесь в каталоге проекта и воспользуйтесь командой npm run build

Берегите свои секреты

Если вы используете ключи API или строку подключения к базе данных, надеемся, что вы уже спрятали их в a .env файл. Вся конфигурация, отличающаяся от развернутой и локальной, также должна включаться в этот файл. Теги не могут быть прокси-серверами, поэтому мы должны жестко кодировать адрес серверной части при использовании сервера разработчиков React, но хотим использовать относительные пути в производстве. Ваш результат .env файл может выглядеть примерно так:

REACT_APP_LOGIN="/api/auth/login"REACT_APP_LOGOUT="/api/auth/logout"DOMAIN="user4234.auth0.com"ID="46NxlCzM0XDE7T2upOn2jlgvoS"SECRET="0xbTbFK2y3DIMp2TdOgK1MKQ2vH2WRg2rv6jVrMhSX0T39e5_Kd4lmsFz"SUCCESS_REDIRECT="/"FAILURE_REDIRECT="/api/auth/login"
AWS_ACCESS_KEY_ID=AKSFDI4KL343K55L3AWS_SECRET_ACCESS_KEY=EkjfDzVrG1cw6QFDK4kjKFUa2yEDmPOVzN553kAANcy
CONNECTION_STRING="postgres://vuigx:k8Io13cePdUorndJAB2ijk_u0r4@stampy.db.elephantsql.com:5432/vuigx"NODE_ENV=development

Отправьте свой код

Проверьте свою программу локально, перейдя по адресу и замените 3030 портом вашего сервера, чтобы убедиться, что все работает без проблем. Не забывайте запускать свой локальный сервер с помощью node или nodemon, чтобы он был готов к работе, когда вы его проверите. Когда все выглядит хорошо, мы можем отправить это на Github (или Bit Bucket и т.д.).

ВАЖНО! Прежде чем это сделать, еще раз проверьте, ваши .gitignore файл содержит .env и /build вы не публикуете конфиденциальную информацию или ненужные файлы.

Настройка DigitalOcean

DigitalOcean является ведущей хостинговой платформой, позволяющей относительно легко и экономически эффективно разворачивать сайты React. Они используют Droplets, которые являются термином, который они используют для своих серверов. Прежде чем мы создадим наш Droplet, нам еще нужно немного поработать.

Создание ключей SSH

Серверы — это компьютеры с публичными IP-адресами. Поэтому нам нужен способ сообщить серверу, кто мы есть, чтобы мы могли делать вещи, которые бы не хотели, чтобы делал кто-то другой, например, вносить изменения в наши файлы. Ваш ежедневный пароль будет недостаточно безопасным, а пароль, достаточно длинный и сложный, чтобы защитить ваш Droplet, будет почти невозможно запомнить. Вместо этого мы будем использовать ключ SSH.

j4ZwaQlN-vlDVs20wxu3Xxq9QccGKA-gLdLp
Фото Бренды Кларк

Чтобы создать ключ SSH, введите эту команду в терминале: ssh-keygen -t rsa

Это запускает процесс генерации ключа SSH. Сначала вам будет предложено указать, где сохранить новый ключ. Если у вас еще нет ключа, который нужно сохранить, вы можете сохранить местоположение по умолчанию и просто нажать Enter, чтобы продолжить.

Как дополнительный уровень безопасности на случай, если кто-нибудь завладеет вашим компьютером, вам придется ввести пароль, чтобы защитить свой ключ. При вводе этого пароля терминал не отображает нажатие клавиш, но отслеживает его. После того, как вы нажмете Enter, вам придется ввести его снова для подтверждения. В случае успеха вы должны увидеть что-то вроде этого:

Generating public/private rsa key pair.Enter file in which to save the key (/Users/username/.ssh/id_rsa):Enter passphrase (empty for no passphrase):Enter same passphrase again:Your identification has been saved in demo_rsa.Your public key has been saved in demo_rsa.pub.The key fingerprint is:cc:28:30:44:01:41:98:cf:ae:b6:65:2a:f2:32:57:b5 user@user.localThe key's randomart image is:+--[ RSA 2048]----+|=*+.             ||o.               || oo              ||  oo  .+         || .  ....S        ||  . ..E          || . +             ||*.=              ||+Bo              |+-----------------+

Что произошло?

На вашем компьютере создано два файла. id_rsa и id_rsa.pub. The id_rsa файл является вашим закрытым ключом и используется для проверки вашей подписи, когда вы используете id_rsa.pub файл или открытый ключ. Нам необходимо предоставить наш открытый ключ DigitalOcean. Чтобы получить его, войдите cat ~/.ssh/id_rsa.pub. Теперь вы должны увидеть длинную строку символов, которая является содержимым вашего id_rsa.pub файл. Это выглядит примерно так:

ssh-rsaAABC3NzaC1yc2EAAAADAQABAAABAQDR5ehyadT9unUcxftJOitl5yOXgSi2Wj/s6ZBudUS5Cex56LrndfP5Uxb8+Qpx1D7gYNFacTIcrNDFjdmsjdDEIcz0WTV+mvMRU1G9kKQC01YeMDlwYCopuENaas5+cZ7DP/qiqqTt5QDuxFgJRTNEDGEebjyr9wYk+mveV/acBjgaUCI4sahij98BAGQPvNS1xvZcLlhYssJSZrSoRyWOHZ/hXkLtq9CvTaqkpaIeqvvmNxQNtzKu7ZwaYWLydEKCKTAe4ndObEfXexQHOOKwwDSyesjaNc6modkZZC+anGLlfwml4IUwGv10nogVg9DTNQQLSPVmnEN3Z User@Computer.local

Теперь это пароль! Скопируйте строку вручную или воспользуйтесь командой pbcopy < ~/.ssh/id_rsa.pub, чтобы терминал скопировал его для вас.

Добавление ключа SSH к DigitalOcean

Войдите в свой аккаунт DigitalOcean или зарегистрируйтесь, если вы еще этого не сделали. Выделите параметры безопасности и нажмите «Добавить SSH». Вставьте скопированный ключ и дайте ему имя. Вы можете назвать его сколь угодно, но целесообразно указать компьютер, на котором сохранен ключ, особенно если вы регулярно пользуетесь несколькими компьютерами.

Создание Дроплета

XhAxSEJtF-5YqybAqqiqlvHcgjl1nhU11ybt
Фото М. Маддо

Имея ключ на месте, мы наконец-то можем создать нашу каплю. Для начала нажмите Create Droplet. Вам будет предложено выбрать ОС, но для наших целей стандартная Ubuntu будет работать нормально.

Вам нужно выбрать размер Droplet, который вы хотите использовать. Во многих случаях подойдет самая маленькая капелька. Однако просмотрите доступные варианты и выберите тот, который лучше всего подойдет для вашего проекта.

Далее выберите центр обработки данных для вашего Droplet. Выберите центральное место для предполагаемой базы посетителей. DigitalOcean разворачивает новые функции в разных центрах обработки данных в разное время, но если вы не знаете, что хотите использовать специальную функцию, доступную только в определенных местах, это не будет иметь значения.

Если вы хотите добавить дополнительные службы в Droplet, например резервное копирование или частную сеть, у вас есть такая возможность здесь. Имейте в виду, что эти услуги связаны с оплатой.

Наконец, убедитесь, что ваш ключ SSH выбран и дайте своему Droplet имя. На одном дроплете можно размещать несколько проектов, поэтому вы можете не давать ему имя, относящееся к конкретному проекту. Отправьте свои настройки, нажав кнопку «Создать» внизу страницы.

Подключение к вашему Droplet

Создавая Droplet, мы можем подключиться к нему через SSH. Скопируйте IP-адрес вашего Droplet и вернитесь в свой терминал. Введите ssh, а затем root@youripaddress, где youripaddress – это IP-адрес вашего Droplet. Это должно выглядеть примерно так: ssh root@123.45.67.8. Это сообщает вашему компьютеру, что вы хотите подключиться к своему IP-адресу как пользователь root. Кроме того, вы можете настроить аккаунты пользователей, если вы не хотите входить как root, но это не обязательно.

Установка Node

yuVxVs5VxSTn0vkLxPKclZXDgs60-xuMWuE1

Чтобы запустить React, нам понадобится обновленная версия Node. Сначала мы хотим бежать apt-get update && apt-get dist-upgrade для обновления списка программного обеспечения Linux. Далее введите apt-get install nodejs -y, apt-get install npm -yи npm i -g n чтобы установить Nodejs и npm.

Для зависимостей программы React может потребоваться определенная версия Node, поэтому проверьте версию, которую использует ваш проект, запустив node -v в каталоге ваших проектов. Вероятно, вы захотите сделать это на другой вкладке терминала, чтобы вам не пришлось снова входить через SSH.

Когда вы узнаете, какая версия вам нужна, вернитесь к подключению SSH и запустите n 6.11.2, заменив 6.11.2 вашим конкретным номером версии. Это гарантирует, что версия Droplet для Node соответствует вашему проекту и минимизирует возможные проблемы.

Установите свою программу на Droplet

Вся основа была заложена, и наконец пора установить наше приложение React! Подключившись через SSH, убедитесь, что вы находитесь в своем домашнем каталоге. Вы можете входить cd ~ отвезти вас туда, если вы не уверены.

Чтобы получить файлы в ваш Droplet, вы собираетесь клонировать их из своего репозитория Github. Возьмите ссылку на клон HTTP с Github и введите в своем терминале git clone https://github.com/username/my-react-project.git. Так же, как и в случае с вашим локальным проектом, перейдите в папку проекта с помощью cd my-react-project а затем бежать npm install.

Не игнорируйте проигнорированные файлы

Помните, что мы сказали Git игнорировать .env файл, поэтому он не будет включен в код, который мы только что извлекли. Нам нужно добавить его вручную. touch .env создаст пустой .env файл, который мы можем открыть в наноредакторе с помощью nano .env. Скопируйте содержимое вашего локального .env файл и вставьте их в наноредактор.

Мы также сказали Git игнорировать каталог сборки. Это потому, что мы только тестировали рабочую сборку, но теперь собираемся создать ее снова на нашем Droplet. использование npm run build чтобы запустить этот процесс снова. Если вы получаете сообщение об ошибке, проверьте, все ли ваши зависимости указаны в вашем package.json файл. Если некоторые отсутствуют, npm установит эти пакеты.

Запускайте!

Запустите свой сервер с помощью node server/index.js (или другое название файла сервера), чтобы убедиться, что все работает. Если выдает ошибку, еще раз проверьте наличие отсутствующих зависимостей, которые не могли быть обнаружены в процессе сборки. Если все запускается, теперь вы можете перейти на ipaddress:serverport, чтобы увидеть свой сайт: 123.45.67.8:3232. Если ваш сервер работает на порту 80, это стандартный порт, и вы можете просто использовать IP-адрес, не указывая номер порта: 123.45.67.8

Lmb7jLrh1rmpnZFyV0lHZhRpwxCj-4b58LJk
Фото Джона Бейкера на Unsplash

Теперь у вас есть пространство в Интернете, чтобы назвать свой собственный! Если вы приобрели доменное имя, которое вы хотите использовать вместо IP-адреса, следуйте инструкциям DigitalOcean, как это настроить.

Продолжайте работать

Ваш сайт активен, но как только вы закроете терминал, ваш сервер остановится. Это проблема, поэтому мы захотим установить еще какое-нибудь программное обеспечение, которое скажет серверу не останавливаться после разрыва соединения. Есть несколько вариантов для этого, но давайте используем Program Manager 2 для этой статьи.

Выключите сервер, если вы этого еще не сделали, и запустите npm install -g pm2. После установки мы можем приказать ему запускать наш сервер с помощью pm2 start server/index.js

Обновление кода

В какой-то момент вы, вероятно, захотите обновить свой проект, но, к счастью, скачать изменения быстро и легко. После того, как вы отправите свой код на Github, перейдите за ssh в свой Droplet и перейдите в каталог проекта. Поскольку сначала мы клонировались с Github, на этот раз нам не нужно предоставлять никаких ссылок. Вы можете получить новый код, просто запустив git pull.

Чтобы внести изменения во внешний интерфейс, вам нужно будет снова запустить процесс сборки с помощью npm run build. Если вы внесли изменения в файл сервера, перезапустите PM2, запустив pm2 restart all. Это! Ваши обновления должны быть опубликованы сейчас.

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

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