Развертывание и настройка приложения React и экземпляра Lightsail для демонстрации вашего веб-сайта!
Введение
Это первая статья и шаг в пошаговом пошаговом руководстве, которое поможет любому, кто хотел бы научиться создавать веб-сайт с нуля без связанных инструментов и шаблонов веб-сайтов, таких как Squarespace, Wix и т. д. 4 части разбиты следующим образом:
- Регистрация доменного имени в Google Domains.
- Хостинг серверов с AWS Lightsail.
- Кодирование вашего сайта в ReactJs.
- Установка приложения ReactJS на сервер и настройка Lightsail.
Это разбито на 4 части, чтобы каждая статья была короткой и отдельной, и чтобы любой, у кого могут возникнуть проблемы с 1 частью, мог просто прочитать эту конкретную статью.
С введением покончено, давайте начнем.
Что мы рассмотрим в этой части
Мы подошли к финальной части серии. Мы подготовили все инструменты, и теперь нам осталось разобраться со сложной частью развертывания нашего приложения React на нашем сервере Lightsail и настройки параметров, чтобы сделать его доступным для остальной части Интернета.
Но не волнуйтесь, я здесь, чтобы провести вас шаг за шагом и убедиться, что мы можем разместить наше приложение на нашем сервере и получить к нему доступ через Интернет.
К концу у вас будет приложение и веб-сайт React, успешно развернутые на Lightsail и доступные для общественности через ваше доменное имя.
Резюме предыдущих частей
На данном этапе у нас есть приложение React на нашем локальном компьютере, ненастроенный экземпляр Lightsail с подключенным статическим IP-адресом, который работает на AWS, и доменное имя, настроенное так, чтобы оно указывало на IP-адрес нашего экземпляра Lightsail. Если у вас нет этих вещей, вы можете просмотреть предыдущие части о том, как их получить.
Настройка Лайтсейл
Начнем с настройки нашего экземпляра Lightsail. Давайте войдем в нашу консоль AWS, используя нашего пользователя IAM, перейдем на нашу страницу Lightsail и получим доступ к нашему экземпляру через веб-терминал SSH AWS, нажав эту кнопку:
Вы также можете загрузить клиент SSH, такой как PuTTy, и использовать ключ SSH для доступа к нему, но это сложнее. Чтобы узнать, как это сделать, вот aws’s guide.
NGINX
Оказавшись в Lightsail, первое, что мы хотим сделать, это установить NGINX. NGINX — это мощный и популярный веб-сервер, который очень хорошо работает с React.
Вернитесь в свой терминал, обновите списки пакетов и установите последнюю версию NGINX с помощью apt-get:
sudo apt-get update sudo apt-get install nginx
Node.js и NPM
Затем мы хотим установить Node.js и NPM. Мы можем сделать это с помощью следующей команды. Это загрузит и установит узел 18.x с помощью apt и nodesource на вашем экземпляре Lightsail. (Для будущих обновлений вы можете следовать документации здесь)
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash - &&\ sudo apt-get install -y nodejs
Добавить файлы проекта на сервер Lightsail
Прежде чем мы продолжим с остальной частью конфигурации Lightsail, нам нужно добавить файлы проекта нашего приложения React в Lightsail. Для этого мы будем полагаться на GIT, чтобы убедиться, что все скопировано, и чтобы вы могли продолжать использовать GIT для контроля версий и работы над своим проектом на разных машинах.
Мы начнем с создания учетной записи GitHub, чтобы у нас был удаленный репозиторий, в который мы могли бы отправлять и загружать обновления с разных компьютеров.
Перейдите на GitHub и создайте учетную запись.
Как только это будет сделано, создайте новый репозиторий для вашего приложения React. Вы можете назвать это как угодно.
После создания репозитория GitHub вы сможете увидеть ссылку HTTPS, которую мы будем использовать для загрузки нашего локального приложения React.
Когда мы используем «create-react-app», он автоматически инициализирует для нас файл Git, поэтому сейчас нам нужно добавить ссылку на удаленный репозиторий Github и отправить в него наши локальные файлы.
$ git remote add origin <REMOTE_URL> # "origin" is the name of the Github repository or remote repository. You can change the name to something else. # Sets the new remote $ git remote -v # Verifies the new remote URL $ git push origin main # Pushes the changes in your local repository up to the remote repository you specified as the origin # if you've changed your default branch to "master" on Github, then you should change "main" to "master" here
Как только это будет сделано, ваш cmd/терминал должен показать, что вы отправили файлы приложения React в Github, и когда вы обновите свой репозиторий Github, вы также должны увидеть там файлы.
Наконец, чтобы завершить этот шаг, нам нужно загрузить файлы из Github в наш экземпляр Lightsail. Теперь нам нужно вернуться к нашему терминалу Lightsail и ввести следующие строки:
cd ../.. # change directory to the root cd opt # change directory to /opt so we can install our React app here, as recommended by linux documentations. sudo git clone https://github.com/your_username/your_repository_name.git # Clone our React app to our /opt folder from our Github repository # Need sudo as we need root user permission here cd your_repository_name sudo npm i # If the process hangs here, you may have selected the 512 Lightsail instance. Change it to a 1gb instance, and this step will work. # This installs all the node module dependencies that our React app requires sudo npm run build # This creates a production build that our server will be serving to our visitor's browser.
Вернуться к NGINX
Теперь мы создали наше приложение React на нашем сервере и можем настроить параметры NGINX для отображения нашего приложения React, когда кто-либо посещает наш веб-сайт. Мы делаем это со следующими строками.
cd /var/www/ sudo mkdir your_domain.com # Create a folder for your website sudo rm -r html # Remove the default html file in /var/www/ sudo ln -s /home/your_username/your_repository_name/build/* /var/www/your_domain.com/ # Make a symbolic link to your project's build folder with the ln -s command # This will mirror all the information from your build folder to the your_domain.com directory
Затем мы модифицируем файлы конфигурации NGINX.
cd /etc/nginx/sites-available sudo rm -r default # Delete the default file here sudo vi your_domain.com # "vi" is the command for opening VIM, which is a text editor # Press "I" to go into insert mode, where you can edit the file. Then press "ESC" to exit insert mode. A # And when you're ready to save it, type ":wq" to write and quit VIM.
Затем скопируйте следующий код в новый файл. Убедитесь, что вы находитесь в «режиме вставки», нажав «i».
server {
listen 80 default_server;
listen [::]:80 default_server;
root /var/www/your_domain.com;
index index.html;
server_name your_domain.com www.your_domain.com;
location / {
try_files $uri $uri/ /index.html;
}
}
Наконец, нам нужно скопировать этот новый файл сервера в папку с поддержкой сайтов, и мы можем сделать это с помощью другой символической ссылки.
sudo ln -s /etc/nginx/sites-available/your_domain.com /etc/nginx/sites-enabled/your_domain.com
Давайте проверим нашу работу, запустив:
sudo nginx -t
И в случае успеха перезапускаем наш сервер:
sudo systemctl restart nginx
Если все сделано, вы сможете просматривать свой сайт, введя свое доменное имя в браузере, когда вы набираете http://yourdomainname.com.
Это не сработает для https-подключения, потому что у нас все еще нет SSL-сертификата и мы настраиваем наш брандмауэр Lightsail.
SSL-сертификат
Мы будем использовать бесплатный сервис под названием Let’s Encrypt, чтобы получить наш SSL-сертификат. И это шаги, чтобы получить это:
# Add CertBot repository for the latest version sudo add-apt-repository ppa:certbot/certbot # Update the package list afterwards to pick up the new information sudo apt-get update # Install CertBot's python/NGINX package sudo apt-get install python-certbot-nginx # Run the certbot plugin. sudo certbot --nginx -d your_domain.com -d www.your_domain.com # Enter your email address and agree to the terms of service if required. Certbot will then present you # with some options, and select [2] in the case for "Redirect". # If everything went smoothly, CertBot will update your configs, reload NGINX and confirm success with a message.
Последний шаг!
Это последний и последний простой шаг по настройке нашего брандмауэра Lightsail для разрешения порта HTTPS.
Мы делаем это, щелкнув страницу нашего экземпляра и выбрав вкладку «Сеть».
Затем под брандмауэром IPv4 добавляем правило для HTTPS и нажимаем «Создать»
Готово! Теперь, если вы введете yourdomainname.com в свой браузер, вы сможете увидеть там свое реагирующее приложение. Поздравляю!
Обзор
Поздравляем с созданием собственного веб-сайта со всеми базовыми услугами вместо того, чтобы полагаться на пакетные услуги! Если вы хотите просмотреть предыдущие шаги, вы можете использовать приведенные ниже ссылки. И теперь вы можете просто повторять свое приложение, работая с локальным файлом React, прежде чем вставлять его в свой экземпляр Lightsail с помощью Git.
Вот ссылки на остальные части:
Часть 1: Зарегистрируйте свой домен Google
Часть 2: Настройка AWS Lightsail
Часть 3: Создайте свое приложение React
Если у вас есть какие-либо вопросы, пожалуйста, не стесняйтесь оставлять комментарии в истории, и я сделаю все возможное, чтобы помочь вам ответить на них. Спасибо!
Давайте оставаться на связи. Подпишитесь на меня на Medium, если вам понравилась эта статья. Вы также можете просмотреть мой веб-сайт на yuhaocooper.com, чтобы увидеть результат создания моего собственного веб-сайта с использованием вышеуказанных шагов.
