{"id":14276,"url":"\/distributions\/14276\/click?bit=1&hash=721b78297d313f451e61a17537482715c74771bae8c8ce438ed30c5ac3bb4196","title":"\u0418\u043d\u0432\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432 \u043b\u044e\u0431\u043e\u0439 \u0442\u043e\u0432\u0430\u0440 \u0438\u043b\u0438 \u0443\u0441\u043b\u0443\u0433\u0443 \u0431\u0435\u0437 \u0431\u0438\u0440\u0436\u0438","buttonText":"","imageUuid":""}
Сервисы
F1l

Все социальные сети в одном месте! Аналог Taplink и Linktree на React JS и Chakra UI!

Я думаю многие из вас видели у блогеров ссылку размещенную в описании профиля, перейдя по которой можно было бы увидеть все социальные сети данного человека!

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

Поэтому мне пришла идея сделать такой сервис для себя и разместить конечный результат на сервере, а в этой статье я хочу поделиться своим проектом и рассказать Вам как его настроить и использовать!

Вот как это сейчас выглядит у меня)

Страница YouTube канала Техноманьяк

Переходим по ссылке и попадаем на мою страничку со всеми социальными сетями разом!

Все социальные сети в одном месте

Мой проект размещен в профиле на GitHub.

В данном проекте я использовал React JS и библиотеку компонентов Chakra UI.

Выбор пал на Chakra UI просто потому что я очень давно хотел попробовать данную библиотеку.

Запуск проекта:

1) Форкаем данные репозиторий, после чего клонируем его себе на компьютер:

git clone https://github.com/FilimonovAlexey/link-bio-page.git

2) Заходим в директорию проекта и устанавливаем зависимости:

npm install

3) Запуск проекта

npm run start

После того как мы убедились, что локально у нас все работает можно переходим к настройке проекта под себя!

Настройка проекта

В самом проекте я оставил множество комментариев, поэтому не думаю, что будут сложности с разбором и адаптацией проекта под себя. Однако на пару вещей я все таки хотел обратить внимание.

Все социальные сети в одном месте! Проект на React JS

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

Для создания анимаций использована библиотека Framer Motion, ссылка на документацию.

Также хотел обратить внимание, что у chakra UI есть библиотека готовых компонентов, которыми вы можете воспользоваться при адаптации проекта под себя и его доработки. Ознакомиться с компонентами можно по ссылке.

Как разместить сайт на сервере?

В этой части статьи я расскажу Вам как загрузить свое React приложение на сервер, пропишем автозапуск приложения с утилитой pm2, настроим конфиг nginx, установим ssl сертификат, пропишем переадресацию с http н https!

В первую очередь необходимо арендовать сервер на Ubuntu 22.04 (все приведенные в статье команды полностью совместимы с ней), сам я уже давно использую сервера timeweb, на них у меня установлено уже достаточно много проектов от VPN до собственного сайта, эти ребята меня не подводили!

Промокоды на скидку от меня:

“tehnomaniak” получи 1 месяц в подарок при оплате сервера на 1 год;

“super” получи 3 месяца в подарок при оплате сервера на 2 года;

После того как сервер уже арендован необходимо выполнить следующее:

1) Подключаемся к нашему серверу через ssh, для этого в терминале прописываем следующую команду:

ssh [email protected] (root и xx.xx.xx.xxx логин и ip адрес соответственно, их мы получим на почту при аренде сервера).

2) Устанавливаем node js:

curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash - //setup_18.x вместо 18 ставим ту версию которая стоит у вас локально, проверить версию можно командой node -v, указываем только первое число
sudo apt install -y nodejs // непосредственная установка NodeJS

3) Устанавливаем git:

sudo apt update //обновляем информацию о новых версиях пакетов, на всякий sudo apt install git -y //устанавливаем git

4) Клонируем репозиторий нашего React приложения командой: git clone

Git clone

5) Устанавливаем зависимости

npm install

6) Устанавливаем pm2 и запускаем наше приложение при старте сервера

sudo npm install pm2 -g // ставим Pm2
pm2 start npm -- start // из папки нашего приложения
pm2 startup
pm2 save

7) Настраиваем Файрвол и nginx

sudo apt update //а вдруг кто новый пакет зарелизил
sudo apt install nginx -y // ставим nginx
sudo ufw allow 'Nginx Full' //открываем 80 и 443 порт в ufw
sudo ufw allow OpenSSH // открываем 22 порт
sudo ufw app list // проверить что все все правила корректно добавились, вы увидите это, главное чтобы OpenSSH был в списке, иначе вы закроете доступ к серверу по ssh и другого способа попасть на сервер не будет //Available applications: // Nginx Full // Nginx HTTP // Nginx HTTPS // OpenSSH
sudo ufw enable // запускаем файрвол
sudo systemctl enable --now nginx // добавляем в автозапуска и запускаем nginx sudo ufw status verbose //смотрим что открыто

8) Настройка конфига nginx

sudo nano /etc/nginx/sites-available/default //открываем конфиг и удаляем все, что там есть по умолчанию

Ваш конфиг должен выглядить примерно так, можете скопировать:

server { listen 443 ssl; server_name ваш_ip_адрес; root путь_до_папки_build; try_files $uri .html; ssl_certificate /etc/ssl/domain.ru.crt; ssl_certificate_key /etc/ssl/domain.ru.key; location / { proxy_pass http://localhost:3000; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection 'upgrade'; proxy_set_header Host $host; proxy_cache_bypass $http_upgrade; } }

9) Установка ssl сертификата

Купить рекламу Отключить

Если вы приобрели сертификат, то у вас должны быть на руках файл CRT и ключ, содержимое этих файлов необходимо записать в файлы: /etc/ssl/domain.ru.crt и /etc/ssl/domain.ru.key соответственно;

С подробной инструкцией можете ознакомится тут.

На этом все, деплой React приложения на сервер завершен успешно!

В статье есть реклама ООО «ТАЙМВЭБ.КЛАУД», ИНН 7810945525, 2VtzqxBCtSA

#react #taplink #linktree

506 показов
150 открытий
0
1 комментарий
Алексей Кугно

Для новичков и не понимающих- не могли бы вы записать видео с экрана вашего компьютера, о том что и куда вводить?

Ответить
Развернуть ветку
Написать комментарий...
-2 комментариев
Раскрывать всегда