...

В этой статье мы откроем код с помощью visual studio и , запустим локально у себя все сервисы, настроим линтер (автокоррекцию кодстайла), автодополнения и все нужные расширения.

Требования:

1. Аккаунт на gitlab.com и доступ к репозиторию https://gitlab.com/fpmi/stfpmi-master (если ссылка открывается и не ведёт на 404 - то доступ есть. Иначе - обращайся к Ivan Arkhipov )
2. Установленный и готовый к работе Docker
3. Установленная и готовая к работе VSCode
4. Склонированные исходники 

Шаг 1: Открываем исходники с помощью VSCode

...

Image Added

Т.к. мой пользователь называется endevir, то у меня папка находится на пути /home/endevir/stfpmi-master

Image Added

Выбери "Trust the authors"

Image Added

Шаг 2: Запускаем docker-compose

Открой консольку vscode с помощью ctrl+` (это кнопка ё) и выполни команду

sshdocker-keygen -t ed25519 -C "My gitlab key" -f ~/.ssh/gitlab

...

compose up

Image Added

Эта команда скачивает, собирает и запускает все сервисы на базе текущего исходного кода. На первых запусках может понадобиться до 20-30 минут, чтобы всё скачать, так что можешь сходить выпить чаю и почитать книжку

Команда docker-compose up блокирует терминал, поэтому хорошей идеей будет открыть ещё одно окно терминала в VSCode

Image Added

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

docker-compose ps

Image Added

definition of done: Когда всё соберётся и запустится, сайт будет доступен по ссылке http://localhost:3000

Image Added

Шаг 3: Устанавливаем python-зависимости для сервиса backend

Чтобы работало автодополнение и переход к исходникам библиотек (очень полезная штуковина крч), VSCode требуется наличие установленных python-пакетов.

Для javascript это работает из коробки благодаря папке node_modules, которая автоматически устанавливается в процессе сборки фронтенда.

Установи, если нужно, python:

ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIH6/mRpV74Hb4gBnMSWA3R3mKpd+6Zy54TycUFrE/rc0 My gitlab key

...

sudo apt-get update && sudo apt-get install python3

Перейди в папку backend и установи все нужные зависимости (они указаны в файле requirements.txt):

-----BEGIN OPENSSH PRIVATE KEY-----
b3BlbnNzaC1rZXktdjEAAAAABG5vbmUAAAAEbm9uZQAAAAAAAAABAAAAMwAAAAtzc2gtZW
QyNTUxOQAAACB+v5kaVe+B2+IAZzElgN0d5iqXfumcueE8nFBaxP63NAAAAJDARrPcwEaz
3AAAAAtzc2gtZWQyNTUxOQAAACB+v5kaVe+B2+IAZzElgN0d5iqXfumcueE8nFBaxP63NA
AAAEAIiRcGpAd8OfJDAKLs0eOHi8yRpV392Fh23Iee3brz+36/mRpV74Hb4gBnMSWA3R3m
Kpd+6Zy54TycUFrE/rc0AAAADU15IGdpdGxhYiBrZXk=
-----END OPENSSH PRIVATE KEY-----

Внимание: ключи выше используются лишь для примера. Ни в коем случае не пытайтесь использовать любой из них!

Шаг 2: Добавление ssh-ключа на Gitlab.com

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

1. Открой настройки профиля с помощью меню сверху:
   Image Removed
2. Выбери раздел SSH Keys в меню слева:
   Image Removed
3. Вставь свой публичный ключ и нажми кнопку "Add key":
   Image Removed

Definition of done: Попробуй выполнить у себя команду 

ssh -i ~/.ssh/gitlab git@gitlab.com

Если всё хорошо - получишь ответ как на картинке:

Image Removed

Шаг 3: Добавление ssh-ключа в ~/.ssh/config

Ты, наверное, заметил, как в прошлой команде нам пришлось явно указать, какой именно ssh-ключ указывать.

При использовании git'а это страшно неудобно, поэтому укажем автоматическое использование свежесозданного ключа для подключения к гитлабу в конфигурационном файле.

Для этого открой файл ~/.ssh/config и отредактируй его содержимое согласно инструкции:

Image Removed

Definition of done: Попробуй выполнить у себя команду 

ssh gitlab.com

Если всё хорошо - получишь ответ как на картинке:

Image Removed

Шаг 4: Клонирование исходников

Переместись в свою домашнюю директорию и выполни команду

git clone git@gitlab.com:fpmi/stfpmi.master

Эта команда у тебя скачает исходники и сохранит их в папку stfpmi-master:

cd backend
pip3 install -r requirements.txt

Шаг 4: Устанавливаем полезные расширения для VSCode:

Эти расширения превратят VSCode из красивого текстового редактора в мощную IDE и автодополнением и проверкой кодстайла.

Нам нужны расширения GitLens от GitKraken, набор расширений React Extension Pack и расширение Python от Microsoft

Image AddedImage AddedImage Added

Шаг 5: Проверяем, что всё работает:

1) (Backend) Открой какой-нибудь .py файл в папке django_apps_<что-нибудь>. Он должен успешно проиндексироваться и покраситься зелёным. Попробуй, зажав ctrl и нажимая на библиотеку, перейти к её исходнику.

 Image Added

2) (Frontend) Попробуй аналогичные действия провернуть в любом javascript-файле

Image Added

Поздравляю! Теперь у тебя всё готово к тому, чтобы начать кодить!

Не забудь прочитать мини-гайд по контрибьютигу: https://gitlab.com/mipt.tech/mipt.tech/-/blob/dev/CONTRIBUTING.mdImage Removed