Что нам стоит сайт построить. Часть 2 - разработческая

В этой части разрабатываем домашнюю страницу согласно ТЗ из первой части.

Шаг 1. Создаём репозиторий

Идём на https://gitlab.com/, регистрируемся, создаём группу для нашего проекта (чтобы не плодить верхнеуровневый мусор) и пустой репозиторий в этой группе, где будет храниться код сайта.

Пример репозитория в GitLab

Шаг 2. Создаём HTML страницу

Кто-то скажет что это слишком дедовский способ - использовать чистый HTML в 2023 году, но во-первых, интернет был 3000 лет назад и я был там, во-вторых, я видел такое, во что вы, люди, просто не поверите. Сайты на flash, табличная вёрстка, гостевые книги... Все эти мгновения затеряются во времени, как слёзы в дожде. Так, стоп. Я слишком увлёкся. На самом деле моя мотивация очень проста. Во-первых, в 2023 году всем абсолютно наплевать на вашу домашнюю страницу и на все её технологии. Во-вторых, чистый HTML идеален в плане кроссплатформенности. Его можно открыть на любом чайнике, даже если тот умеет работать только из текстового терминала, он растягивается под любой экран, весит минимально и грузится мгновенно. Круто же.

В общем, создали файл index.html, добавили туда теги, контент, сохранили, добавили в git, запушили в gitlab-репозиторий. Молодцы.

Пример чистого HTML:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>My homepage</title>
</head>

<body>
  <h1>Welcome to my homepage</h1>
  <p>This site uses pure HTML</p>
</body>

</html>

Шаг 3. Создаём Dockerfile

Я уже настолько привык что все проекты, с которыми работаю, запускаются в контейнерах, что открытие файла в браузере меня немного напрягает. Но свой HTML я закину в docker не для этого, а на будущее, когда решу что чистого HTML может быть недостаточно. Тогда мне и пригодится контейнер в полной мере.

За основу возьму alpine, в котором будет крутиться nginx. Dockerfile будет таким:

FROM alpine:3.18.4

LABEL maintainer="Andrey Dolbilin nonice@ionice.ru"

RUN set -x \
    && addgroup --system --gid 101 nginx \
    && adduser  --system --ingroup nginx --no-create-home --home /nonexistent --gecos "nginx user" --shell /bin/false --uid 101 nginx \
    && apk add --no-cache nginx \
    && ln -sf /dev/stdout /var/log/nginx/access.log \
    && ln -sf /dev/stderr /var/log/nginx/error.log \
    && mkdir -m 755 /www \
    && chown nginx:nginx /www

COPY ./docker/default.conf /etc/nginx/http.d/default.confcat 
COPY --chown=nginx:nginx --chmod=644 ./index.html /www/

WORKDIR /www

EXPOSE 80

STOPSIGNAL SIGQUIT

ENTRYPOINT ["nginx", "-g", "daemon off;"]

Здесь мы создаём группу и пользователя nginx, от которого веб-сервер работать, устанавливаем сервер, логи монтируем в стандартный поток вывода, создадим директорию, скопируем конфигурацию для nginx и сам файл index.html.

Сама конфигурация виртуального хоста для nginx выглядит так:

#docker/default.conf 
server {
	listen 80 default_server;

	root /www;

	location / {
	}
}

Этого хватит чтобы собрать docker-образ, запустить контейнер и проверить проделанную работу, перейдя на http://localhost/:

docker build . -t my/nginx -f docker/Dockerfile
docker run --rm -d -p80:80 my/nginx

Если в браузере открылся наш сайт - всё отлично. На данном этапе изменения можно закоммитить и отправить в репозиторий. На самом деле, если подумать на пару шагов дальше, тут работы ещё полно - мы не проверили валидность HTML, не настроили nginx, не протестировали docker-образ и так далее, но всё это будет ближе к появлению продакшн-сервера.